I am new to reactjs.
I have a survey question answer UI, where I can enter question title and have the option to select the type of option.
If I select Text and Boolean type no option will be provided.
But if I select Lsit or Multiselect etc, a text box will be provided to add options.
So when I select Text type
{...questions.map((x, idx) => ( console.log(questions[idx] )) )}
I get the output like this first time
Object {
"text": "asdsad",
"type": "text",
"options": null
}
First time options will be null which is fine. So I just need the question title and type to DB.
Then on clicking on 'List' type in my UI , this console becomes :
Object{
"text": "asdsad",
"type": "list",
"options": [
{
"value": "sdsad"
}
]
}
I need to check whether options.value is set or not every time. If it is set then I need to look whether options.value is null or not for validation. How can I get that in the below loop.
{...questions.map((x, idx) => ( console.log(questions[idx] )) )}
Without knowing the details of your code, here is a function that you can use to validate your questions. It will return a boolean true/false.
It uses Array.prototype.every to test that all questions match the condition. The condition that the options are not null.
const isQuestionsValid = (questions) => {
return questions.every((question) => question.options !== null);
};
Related
I am trying to access the Options key value and get the Name and Value in my jsx but I am unable to use map on field.Options (when I hover over Options there is a question mark next to it).
I have tried field.Options[0].Name , field.Options["Name"], field.map().
I am just confused on how to access those values. An explanation would be appreciated.
I have an Array[] of Objects{} like below and I am trying to get the "Options" objects values.
{
"Type": "rating",
"Key": "professionalism",
"LabelBranding": "api#professionalism#placeholder",
"Label": "Professionalism:",
"Required": false,
"Options": [
{
"Name": "Smiley",
"Value": "0123456789"
}
]
},
I cant use a (for of ) in JSX. So I am wondering how to access this?
I think you were close there. Have you tried this?
{field.Options.map(block => (
<p key={block.Name}>{block.Value}</p>
))}
Since you want to iterate the field.Options array.
This was a case of not checking if the "Options" array was there. The 1st object that was coming back did not have the "Options" key value like the rest of them. So I added a conditional around it and it worked swimmingly.
{field.Options !== undefined
&& field.Options.map((block) => {
if (block.Value !== undefined || block.Name !== undefined) {
return (
<ul>
<li key={block.Name}>{block.Value}</li>
<li key={block.Name}>{block.Name}</li>
</ul>
);
}
return null;
})
}
So I've got a weird problem that I'm having a hard time figuring out. I've got a simple form with a few elements that are not being submitted, all of these elements have only one thing in common, they're select elements:
echo $this->Form->control("spirit_type_id", [
"label" => false,
"type" => "select",
"options" => $spirit_types,
"empty" => "Spirit Type"
]);
echo $this->Form->control("country_id", [
"label" => false,
"type" => "select",
"options" => $countries,
"empty" => "Country"
]);
echo $this->Form->control("region_id", [
"label" => false,
"type" => "select",
"options" => $regions,
"empty" => "Region"
]);
And in my controller I have:
public function add() {
$spirit = $this->Spirits->newEntity();
$spirit_types = $this->Spirits->SpiritTypes->find("list");
$countries = $this->Spirits->Countries->find("list");
$regions = $this->Spirits->Regions->find("list");
if ($this->request->is("post")) {
debug($this->request->getData());
die();
$spirit = $this->Spirits->patchEntity($spirit, $this->request->getData());
$spirit->user_id = $this->Auth->user("id");
if ($this->Spirits->save($spirit)) {
$this->Flash->success("Your spirit was successfully saved.");
$this->redirect(["action" => "index"]);
} else {
$this->Flash->error("Your spirit could not be saved.");
}
}
$this->set(compact("spirit", "spirit_types", "countries", "regions"));
}
The important part is that debug statement. It shows this when I insert data using the form.
[
'name' => 'Longrow Peated',
'image' => 'imageLocation',
'brand' => 'Springbank',
'age' => '',
'cost' => '55'
]
Those are all text and/or number elements in my form, and they all come out just fine. It gets a little weirder though. I have validation in my table to require those id fields:
public function validationDefault(Validator $validator) {
$validator->requirePresence(
"name", "brand", "spirit_type_id", "country_id", "region_id", "age", "cost", "image"
)
->notEmpty("name", "We require a name")
->notEmpty("brand", "We require a brand or distillery")
->notEmpty("spirit_type_id", "We require a type of alchohol")
->notEmpty("country_id", "We require a country of origin")
But this doesn't ever seem to get triggered when I insert the data using patchEntity, it's only caught when I actually call the save function and I try inserting into the database.
If $this->request->getData() is not showing all of your fields, the most likely cause would be some sort of problem with your form; there are not a lot of ways for CakePHP to discard your data from here. You can narrow it down by using browser tools (built into most of them now) to inspect the data actually being sent from your browser in the page request.
If it turns out that the fields really aren't being sent across at all, the problem is almost certainly in your form. For example, you might be closing it early, or there might be HTML errors that confuse the browser. Make sure that all of your input tags are between the <form> and </form>, and if they are then try an HTML validator to check your code. There are lots of options online, and even the inspectors built into browsers can often help you spot these sorts of issues.
This is the most common problem:
If you check debug($this->request->getData()); before $spirit = $this->Spirits->newEntity(); you then see all submitted data!
Next go to Spirit Entity and double check if your fields "spirit_type_id,.." accessible!
/**
* Fields that can be mass assigned using newEntity() or patchEntity().
*
* Note that when '*' is set to true, this allows all unspecified fields to
* be mass assigned. For security purposes, it is advised to set '*' to false
* (or remove it), and explicitly make individual fields accessible as needed.
*
* #var array
*/
protected $_accessible = [
'*' => true, // quick fix
'id' => false,
];
or better way:
protected $_accessible = [
'spirit_type_id' => true,
'country_id' => true,
// etc ...
];
Edit
debug
$spirit = $this->Spirits->patchEntity($spirit, $this->request->getData());
debug($spirit); exit();
see if any errors.
This question already has an answer here:
How to Pass the data from Main Window to Child Window to display large data in table using AngulaJS
(1 answer)
Closed 6 years ago.
Can some one help me putting the DATA value new window .
I want to make td cell with DATA name as hyperlink . If I click that DATA it should open new window to show the value .
Demo
JSON Data
{
"58231e66982cf7857fee2cb5": {
"_id": {
"$id": "58231e66982cf7857fee2cb5"
},
"RECEIVETIME": {
"sec": 1478696550,
"usec": 529000
},
"OPERATION": "Operation 1",
"DATA" : "kdsjfkdjfkdjfkjdjfjdsfjdsilkjdkfljdsklfjkdlsjfkldsjflkdsjf",
"ACCOUNTNUMBER": "account",
"STATUS": "SUCCESS",
"MESSAGELOGCREATIONDATE": {
"sec": 1478696550,
"usec": 537000
}
},
"58231e681b58b970137b56aa": {
"_id": {
"$id": "58231e681b58b970137b56aa"
},
"RECEIVETIME": {
"sec": 1478696552,
"usec": 961000
},
"OPERATION": "Operation 2",
"DATA" : "dfdfdfkoooooooooooookdkfdkfodkfldkffdfd",
"ACCOUNTNUMBER": "account",
"STATUS": "FAIL",
"MESSAGELOGCREATIONDATE": {
"sec": 1478696552,
"usec": 961000
}
}
}
Currently I am using {{list.DATA}} show the data in the cell, But I want create hyperlink and once user clicks that link it should open new window to show the data. Since my DATA value is around 1000 lines. Can someone help me in approaching this.
And Is there way I can decode the Value of DATA in UTF-8 as the data value is encoded in UTF-8
Thanks in advance.
<tr class="features" ng-repeat="list in opMessageLogs">
<td>{{list._id.$id}}</td>
<td>{{list.OPERATION}}</td>
<td>{{list.STATUS}}</td>
<td>{{list.DATA}}</td>
</tr>
For a new tab, you need to create a link, but there's limit on a link (url) length, 2000 characters
Link here
what you can do is create a new route in angular that will take the param _id and then you can get the data by a http call or from service.
And for decoding/encoding utf-8
function encode_utf8(s) {
return unescape(encodeURIComponent(s));
}
function decode_utf8(s) {
return decodeURIComponent(escape(s));
}
Hope this helps..
To achieve this, you need to do following steps:
Create a state with a parameter i.e.
$stateProvider.state('openTab', {
'url' : '/link/:id',
'templateUrl': 'abc.html'
});
Use it this way in html.
<td> <a ui-sref="openTab({'id': list.DATA})" target="_blank">Click Here</a></td>
I'm trying to load some json file in a DropdownList from react-widgets. When I load the json file the data type looks like this:
Map {size: 1, _root: ArrayMapNode, __ownerID: undefined, __hash: undefined, __altered: false}
__altered
:
false
__hash
:
undefined
__ownerID
:
undefined
_root
:
ArrayMapNode
size
:
1
__proto__
:
KeyedIterable
While the Dropdown component (from react-widgets) needs an array! So It makes this error:
Failed propType: Invalid prop `data` of type `object` supplied to `DropdownList`,
expected `array`. Check the render method of `Uncontrolled(DropdownList)`.
I can't load the json file directly and I have to use ajax to load it (or technically I can but it's a huge file and each time the user click on the dropdown list it takes couple of seconds to load the data from file). How can I convert this to an array?
P.S. The json file looks like this:
{
"items":[
{
"id": "aaa",
"name": "english"
},
{
"id": "aab",
"name": "Swedish"
},
]
}
I think you're looking for something along the lines of:
var dropdownList = jsonObject.items.map((item, i) => {
return (
<option key={i} val={item.id}>{item.name}</option>
);
})
The Array.prototype.map function simply goes over a list and produces a new list of the same size but with changes based on the modifier/callback function.
Update based on comment:
Based on the docs for DropdownList, you have two options for passing data to the list: a flat array of item names, or a list of objects with specific keys for the item name and value.
Option 1: flat list of item names
var itemNames = jsonObject.items.map((item) => item.name );
Option 2 : list of objects
var items = jsonObject.items.map((item) => {
return {
textField: item.name,
valueField: item.id
}
});
The benefit to using the second option would be when someone selects one of the items, the event that is created with point to the val attribute of the HTML <option>. This is useful for you especially since your ids and names are not the same. An example:
Option 1 (from above):
<DropwdownList
data={itemNames}
onSelect: (event) => {
// Will give the `val` attribute set by DropdownList
// This might be the item name, or it might be something unique to DrowdownList
console.log(event.target.value);
}
/>
Option 2 (from above):
<DropwdownList
data={items}
onSelect: (event) => {
// Will give the `valueField` attribute you set, which for you is the item's `id` field
// This might be the item name, or it might be something unique to DrowdownList
console.log(event.target.value);
}
/>
I actually have to add some custom fields to every line item within the commercetools platform.
Line Item Docs => http://dev.sphere.io/http-api-projects-carts.html#line-item
There I found this: => http://dev.sphere.io/http-api-projects-custom-fields.html#custom-fields
But apparently the docs for custom-fields are way too less in terms of showing "how to use them". Does somebody has any experience with that? A json example would be wonderful, with a bit more explanation. Thanks in advance.
you can create a custom type for line items using the resource type ID "line-item" or "custom-line-item" (http://dev.sphere.io/http-api-projects-custom-fields.html#customizable-resource ) - example:
{
"key": "myLineItemType",
"name": { "en": "my line item type" },
"resourceTypeIds": ["line-item"],
"fieldDefinitions": [
{
"type":{
"name":"LocalizedString"
},
"name":"myField",
"label":{
"en":"my field",
"de":"mein feld"
},
"required":false,
"inputHint":"SingleLine"
}
]
}
Then there are 2 ways of using the new custom type and the new field.
You can set the custom type and a value at the time you create a line item using the "addLineItem" Update action on the cart resource - see this JSON example for instance:
{
"version": 19,
"actions": [{
"action": "addLineItem",
"productId": "9f19f37d-ec10-4ccf-9ff8-e5a295de0c3e",
"variantId": 1,
"quantity": 1
}],
"custom": {
"typeKey": "myLineItemType",
"fields": {
"myField": {
"en":"whats up",
"de":"was ist los"
}
}
}
}
You can set the custom type of the line item with the "setLineItemCustomType" update action on the cart to make the field available. This can work with existing line items.
http://dev.sphere.io/http-api-projects-carts.html#set-line-item-custom-type