How can I edit the attributes in a JSON using JavaScript - javascript

I have the following JSON:
[{ ID: '0001591',
name: 'EDUARDO DE BARROS THOMÉ',
class: 'EM1A',
'phone Pai': '(11) 999822922',
'email Pai': 'sergio7070#globo.com',
{ ID: '0001592',
name: 'JEAN LUC EUGENE VINSON',
class: 'EM1A',
'phone Pai': '(11) 981730534',
'email Pai': 'jeanpevinson#distock.com.br',
And I wish that looks like that:
[{ ID: '0001591',
name: 'EDUARDO DE BARROS THOMÉ',
class: 'EM1A',
Address[
type:Phone,
tag:Pai,
address:'(11) 999822922',
]
Address[
type:Email,
tag:Pai,
address:'sergio7070#globo.com',
]
},
{ ID: '0001592',
name: 'JEAN LUC EUGENE VINSON',
class: 'EM1A',
Address[
type:Phone,
tag:Pai,
address:'(11) 981730534',
]
Address[
type:email,
tag:Pai,
address:'jeanpevinson#distock.com.br',
]
} ]
Do you have any suggestions, please?

After fixing your JSON a bit, let's say you have this JS object (btw. it's still an invalid JSON, but a valid JS object):
var json = [{ ID: '0001591',
name: 'EDUARDO DE BARROS THOMÉ',
class: 'EM1A',
'phone Pai': '(11) 999822922',
'email Pai': 'sergio7070#globo.com'
},
{ ID: '0001592',
name: 'JEAN LUC EUGENE VINSON',
class: 'EM1A',
'phone Pai': '(11) 981730534',
'email Pai': 'jeanpevinson#distock.com.br'
}];
It's a two-element array, with each array element being an object, so to access each object, you need to use an index, for example:
json[0];
json[1];
To access a specific property of an object, you need to use the key, for example:
json[0].name;
json[0]['name']; // equal to above, but you'll need it for your keys with spaces
Finally to add an object property, we can do something like this:
json[0].Address = []; // make it an empty array
json[0].Address.push({
type: 'Phone',
tag: 'Pai',
address: '(11) 999822922'}); // push the phone number
json[0].Address.push({
type: 'Email',
tag: 'Pai',
address: 'sergio7070#globo.com'}); // push the email
That will give you the final object you asked for.
If you wish to make it automatic (I see you're reading 'phone Pai' and 'email Pai' values to build those new objects), you'd need to loop the whole array, parse the object keys to figure out the types and tags, and finally add an object property to each object based on the parsed data.

Related

Placing an array of jQuery objects into html form elements

I have this array of jQuery objects
(2) [{…}, {…}]
0:{Name: "name", NRIC/Passport: "nric", Date of Birth: "2018-06-02", Occupation: "occ", Weight: "123", …}
1:{Name: "name2", NRIC/Passport: "nric2", Date of Birth: "2018-06-02", Occupation: "occ2", Weight: "234", …}
length:2
__proto__:Array(0)
I want to place them into html form elements. Currently this is how I do it:
$.each(spouses,function(key,value){
$.each(value,function(int_key,int_value){
$("#spouse_data").append("<div class='col-sm-4'><label>"+int_key+"</label><input type='text' readonly class='form-control' name='spouse' value="+int_value+"></div>");
});
});
However, I won't be able to set a name for each of the form elements so that I can receive the data when I submit the form.
There is another option where instead of using this format of object
"Name of obj":data
I use
name_of_obj:data
The problem with the second one is that I can't insert label names. I was wondering what the best way of doing this is.
Change your objects to an array of objects looking somewhat like this:
[{ value: 'name', label: 'Name', name: 'name' }, { value: 'nric', label: 'NRIC/Passport', name: 'nric_password' }]
Then iterate over it using Array.prototype.forEach:
[{
value: 'name',
label: 'Name',
name: 'name_for_form_submission'
}, {
value: 'nric',
label: 'NRIC/Passport',
name: 'nric_password'
}].forEach((item) => {
console.log(`${item.label}: ${item.value}, form name: ${item.name}`)
})
What about using the following for your form elements:
name="spouse[' + index + ']"
Does it make sense to use an array field type instead of a string?
check this code, you can do it like this
https://codepen.io/creativedev/pen/pKjamd
var obj = {
0: {Name: "name", "NRIC/Passport": "nric", "Date of Birth": "2018-06-02", Occupation: "occ", Weight: "123"},
1: {Name: "name2", "NRIC/Passport": "nric2", "Date of Birth": "2018-06-02", Occupation: "occ2", Weight: "234"}
};
$.each(obj,function(key,value){
$.each(value,function(key1,value1){
$("#data").append("<div class='col-sm-4'><label>"+key1+"</label><input type='text' readonly class='form-control' name='spouse' value="+value1+"></div>");
});
$("#data").append("<br/><br/>");
});

JSON object parse issue on react

json = "{ elements: [ {type: 'radiogroup', choices: ['Yes','No','Maybe','Never'], isRequired: true, name: 'Test_01', title: 'Do you like ice cream?' }],showQuestionNumbers: 'off'}";
json = JSON.stringify(json);
model = new Model(json);
it dosen't recognise the json object when it have quotes on
var json = "{ elements: [ {type: 'radiogroup', choices: ['Yes','No','Maybe','Never'], isRequired: true, name: 'Test_01', title: 'Do you like ice cream?' }],showQuestionNumbers: 'off'}";
it works when removes quotes
json = { elements: [ {type: 'radiogroup', choices: ['Yes','No','Maybe','Never'], isRequired: true, name: 'Test_01', title: 'Do you like ice cream?' }],showQuestionNumbers: 'off'};
I have tried JSON.parse(json); it dosen't work, would anyone please suggest solution, please?
If you have JSON in a string, then you should do JSON.parse, not JSON.stringify.
Also, single quotes are invalid in JSON, so always use double-quotes for that.
// I fixed the JSON
var json = '{ elements: [ {type: "radiogroup", choices: ["Yes","No","Maybe","Never"], isRequired: true, name: "Test_01", title: "Do you like ice cream?" }],showQuestionNumbers: "off"}';
// The thing you would expect
var obj = JSON.parse(json);
Because you are trying to stringify a string no the object remove " " and it would become object and then try JSON.stringify and JSON.parse is not working because the data is not in proper JSON string format. For example:
var object = '{"e":"a"}';
Then use JSON.parse(object);
Which will convert your string in object.

Using ng-options with JSON data

I'm still trying to find my way with AngularJS. I have a JavaScript code that uses URL to return JSON data as an array. I need help with populating the same data in select using ng-options.
data to populate on the select
This isn't how you ask for help, but nevermind. Given a JSON object like this
var JsonArray = [{
id: 1,
name: 'Jane',
address: 'Jane\'s house'
}, {
id: 2,
name: 'Jill',
address: 'Jill\'s house'
}, {
id: 3,
name: 'John',
address: 'John\'s house'
}, {
id: 4,
name: 'Jack',
address: 'Jack\'s house'
}];
When you want to use ng-select with ng-options, you need to specify 3 required fields :
your table
the name that every object will take (like a for ... each loop)
The property you want to see in your options
You also can specify a track by property to give your options a given value.
<select ng-model="mySelect" ng-options="object.name for object in JsonArray track by object.id"></select>
Now, use the last piece of code, and inspect it in a brwoser. You will understand everything.
For reference :
<select ng-model="mySelect" ng-options="[object].[chosenProperty] for [object] in [yourArray] track by [object].[property]"></select>

How to create following type of json that will usefull in type ahead with angular js

I have successfully implement type ahead using angular js using this codepen.
Now my data is dynamic so I want to create my own json that should looks something like following:
$scope.states = [
{
name: "ABCD",
id: "AB"
},
{
name: "XYZ",
id: "XY"
},
{
name: "OPQR",
id: "OP"
},
{
name: "LMNO",
id: "LM"
},
{
name: "KLM",
id: "KL"
}
];
How to create like above json and store in $scope variable so I can access it using name and id separately.
Please help me...!!
I am giving by my own now cause I got it little bit late.
Solution is I have pushed the data wrong I have solved it like:
$scope.states.push({
name: "string",
id: int,
});
and I got it.

Celleditor for object value Extjs4

I'm looking for a best solution how to do this.
What I have:
// model
Ext.define("User", {
extend: "Ext.data.Model",
fields: [
{name: "id", type: "int"},
{name: "name"},
{name: "description", type: "string"}
]
});
// store with data
var oStore = new Ext.data.Store({
model: "User",
data: [
{id: 1, name: {name:"John"}, description: "Fapfapfap"},
{id: 2, name: {name:"Danny"}, description: "Boobooboo"},
{id: 3, name: {name: "Tom"}, description: "Tralala"},
{id: 4, name: {name:"Jane"}, description: "Ololo"},
]
});
// and finally I have a grid panel
Ext.create("Ext.grid.Panel", {
columns: [
{dataIndex: "id", header:"ID"},
{
dataIndex: "name",
header: "Name",
renderer: function(value){return value.name;},
editor: "textfield"},
{dataIndex: "description", header: "Description", flex: 1, editor: "htmleditor"}
],
plugins: [new Ext.grid.plugin.CellEditing({clicksToEdit: 2})],
store: store,
renderTo: document.body
});​
When I doublecick on a cell I see [object] Object in editor's field, and when I enter valid value than I see empty cell in the grid.
So, the question is – how could I setup celleditor to get data not from record.name but from record.name.name?
You can override get and set methods on model, so the will support multi-level field names. Below is sample implementation.
Ext.define("User", {
extend: "Ext.data.Model",
fields: [
{name: "id", type: "int"},
{name: "name"},
{name: "description", type: "string"}
],
get: function(key) {
if (Ext.isString(key) && key.indexOf('.') !== -1) {
var parts = key.split('.');
var result = this.callParent([ parts[0] ]);
return result[parts[1]];
}
return this.callParent(arguments);
},
set: function(key, value) {
if (Ext.isString(key) && key.indexOf('.') !== -1) {
var parts = key.split('.');
var result = this.get(parts[0]);
result[parts[1]] = value;
this.callParent([ parts[0], result ]);
return;
}
this.callParent(arguments);
}
});
I am not sure if store detects change made to name.name field. If no, you should also probably mark record as dirty.
Working sample: http://jsfiddle.net/lolo/dHhbR/2/
The editor accepts whatever value is provided in the "dataIndex" field of the column. Since "name" is an object, that's what you're getting. After entering a name in the editor, value is equal to a string (not an object) and your renderer is trying to get the name property of the string.
The easiest way to fix this is to make the "name" field of your store a string instead of an object. However, I'm assuming there's a reason you want to do it this way.
The CellEditing plugin has three events it can listen for: beforeedit, edit, and validateedit. You can implement a beforeedit listener to get the "name" object from the column, then get the "name" property of that object and fill the editor with that value. Then on validateedit, get the value from the editor and set the "name" property of the "name" object in the record with that value.
For quick reference, here's the event definition: CellEditing events
An easier way is to modify your User Model object to map the "name" property differently:
{name: "name", mapping:'name.name'}
then everything else stays the same.

Categories