We Keep Coding

Get children in array

I have this array:
myArray: [{
name: "Name1",
subArray: [{
name: "Subname1",
value: 1
}]
}, {
name: "Name2",
subArray: [{
name: "Subname2",
value: 2
}]
}, {
name: "Name3",
subArray: [{
name: "Subname3",
value: 3
}, {
name: "Subname4",
value: 4
}]
}, ]
I am using this array in a Vue app, but this should not be vue-specific.
In a dropdown I am showing all the values from the parent array (Name1, Name2, Name3). So far, so good. In Vue I do it like so:
<option v-for="array in myArray">
But, when the user has selected the parent array, I have another dropdown below, which should show the children of the selected object. So if the user selects Name3, there should be two options in my other dropdown with the two subArray's values.
How can I achive this?

Try using
<option v-for="option in myArray[index].subArray">
where index is index of your first option.

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 can I edit the attributes in a JSON using 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.

Can handontable pivot data

Handsontable really fits my needs when it comes to UI interaction. But was wondering if it can also pivot data.
I have Json data that looks like this:
var objectData = [
{id: 1, name: "Ted Right", gender: "male"},
{id: 2, name: "Bill Allan", gender: "male"},
{id: 1, name: "Joan Well", gender: "female"},
{id: 2, name: "Jane Doe", gender: "female"}
];
where id value should be the row name and the gender value should be the column header and the name is the value in the table.

I'm not sure it's possible natively within the framework, but it looks like you can dynamically pass an array containing the column definitions to the table instance while creating it, so you could potentially handle it that way in javascript - you might want to check out this example.
How to create dynamic columns for Handsontable?
Old thread I know, but it's the first one that comes up for handsontable pivot table, so hopefully this helps someone.

To set custom row/column headers, have a look here:
http://handsontable.com/demo/renderers_html.html#header
Portion from above page:
$container.handsontable({
colHeaders: [
"<b>Bold</b> and <em>Beautiful</em>",
"Some <input type='checkbox' class='checker'> checkbox"
]
})

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.