Develop Reference

Nested json object into single json objects with repeating parent details to construct html table

This is a nested json file and I am trying to arrange it in a readable format to display in a table
I tried to manually put all the keys and values with in a for loop but there should be an elegant way to achieve this and hence I am reaching SO.
The actual JSON is quite a nested one and needed time to execute data with 500k rows
The result should be enhanced JSON with parent values appearing for child values as well
var property = {
"data": [{
"ID": "123456",
"name": "Coleridge st",
"criteria": [
{
"type": "type1",
"name": "name1",
"value": "7",
"properties": []
},
{
"type": "type2",
"name": "name2",
"value": "6",
"properties": [
{
"type": "MAX",
"name": "one",
"value": "100"
}, {
"type": "MIN",
"name": "five",
"value": "5"
}
]
},
{
"type": "type3",
"name": "name3",
"value": "5",
"properties": [{
"type": "MAX1",
"name": "one6",
"value": "1006"
}, {
"type": "MIN2",
"name": "five6",
"value": "56"
}]
}
]
},
{
"ID": "456789",
"name": "New Jersy",
"criteria": [
{
"type": "type4",
"name": "name4",
"value": "6",
"properties": [{
"type": "MAX12",
"name": "one12",
"value": "10012"
}, {
"type": "MIN23",
"name": "five12",
"value": "532"
}]
}
]
}]
};
var output = [];
property.data.forEach(function (users) {
var multirows = {
id: users.ID,
name: users.name,
};
for (var i = 0; i < users.criteria.length; i++) {
var criterias = {
type: users.criteria[i].type,
name: users.criteria[i].name,
value: users.criteria[i].value,
}
var mat_contacts_rows;
if (!isEmpty(users.criteria[i].properties)) {
for (var j = 0; j < users.criteria[i].properties.length; j++) {
var property = {
type: users.criteria[i].properties[j].type,
name: users.criteria[i].properties[j].name,
value: users.criteria[i].properties[j].value
};
mat_contacts_rows = { ...multirows, ...{ criteria: criterias }, ...{ properties: property } };
output.push(mat_contacts_rows);
}
} else {
var property = [];
mat_contacts_rows = { ...multirows, ...{ criteria: criterias }, ...{ properties: property } };
output.push(mat_contacts_rows);
}
}
});
console.log(JSON.stringify(output, undefined, 2))
function isEmpty(obj) {
for (var key in obj) {
if (obj.hasOwnProperty(key))
return false;
}
return true;
}

I think this could be a great exercise to you to don't answer your question but to give you some tips. You should first look at : Lodash wish has a bunch of usefull method to help you doing what you'r trying to do.
In a second time you should avoir using .forEach or for loops and try using Array.prototype.map or Array.prototype.reduce

Javascript filter for multidimensional json object

Can't use javascript filter in multi-dimensional object.
var object = [{
"id": "1",
"name": "General",
"cards": [{
"id": "1",
"name": "shawn"
}, {
"id": "2",
"name": "neo"
}]
}, {
"id": "2",
"name": "CEO",
"cards": [{
"id": "1",
"name": "Raman"
}, {
"id": "2",
"name": "Sheena"
}]
}]
function searchFor(item) {
return item.cards.filter(
(card) => {
return card.name.indexOf("Raman") !== -1;
}
);
}
var filtered = object.filter(searchFor);
console.log(filtered);
This is how I am trying, inside the searchFor card.name I am getting the correct card name but filtering is returning all the cards.Its not filtering.
Could any help me with this.

An empty array isn't considered falsey in Javascript. So instead of returning the result of filtering the cards array, test its length.
var object = [{
"id": "1",
"name": "General",
"cards": [{
"id": "1",
"name": "shawn"
}, {
"id": "2",
"name": "neo"
}]
}, {
"id": "2",
"name": "CEO",
"cards": [{
"id": "1",
"name": "Raman"
}, {
"id": "2",
"name": "Sheena"
}]
}]
function searchFor(item) {
return item.cards.filter(
(card) => {
return card.name.indexOf("Raman") !== -1;
}
).length != 0;
}
var filtered = object.filter(searchFor);
console.log(filtered);

You were returning the filtered array, which would produce a TRUE result whenever cards existed. So you can just turn that into a boolean, by saying when the item.cards.filter(...).length > 0.
var object = [{
"id": "1",
"name": "General",
"cards": [{
"id": "1",
"name": "shawn"
}, {
"id": "2",
"name": "neo"
}]
}, {
"id": "2",
"name": "CEO",
"cards": [{
"id": "1",
"name": "Raman"
}, {
"id": "2",
"name": "Sheena"
}]
}]
var searchFor = (card) => card.name.indexOf("Raman") > -1;
var filteredCards = object.reduce((cards, item) => cards.concat(item.cards.filter(searchFor)), []);
var filteredObj = object.map(i => {
i.cards = i.cards.filter(searchFor);
return i;
}).filter(i => i.cards.length)
console.log(filteredCards, filteredObj)
Updated
I updated the code snippet to produce either the cards which were found. I also provide a method for returning all objects which contain the needed cards, and filter out the other cards.

// HTML Part
<div class="filter-list">
<button class="filter" data-filter-key="all">all</button>
<button class="filter" data-filter-key="open">open</button>
<button class="filter" data-filter-key="done">done</button>
</div>
// CSS Part
.filter:hover,
.filter:focus,
[data-active-filter="all"] .filter[data-filter-key="all"],
[data-active-filter="done"] .filter[data-filter-key="done"],
[data-active-filter="open"] .filter[data-filter-key="open"] {
text-decoration: underline;
}
[data-active-filter="open"] [data-completed="true"],
[data-active-filter="done"] [data-completed="false"] {
display: none;
}
// Script Part
(function () {
const mainNode = document.querySelector("main");
const filters = document.querySelector(".filter-list");
for (const filter of filters.children) {
filter.addEventListener("click", () => {
mainNode.setAttribute(
"data-active-filter",
filter.getAttribute("data-filter-key")
);
});
}
mainNode.setAttribute("data-active-filter", "all");
})();

Javascript to manipulate array of objects and create two set of arrays for data and link [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have an object array like the following.
[
{
"name": "car",
"value": "",
"children": [
{
"name": "v8_engine",
"value": "",
"children": [
{
"name": "cylinder-arrangement",
"value": "",
"children": [
{
"name": "type",
"value": "string",
"children": []
},
{
"name": "max-elements",
"value": "8",
"children": []
}
]
}
]
},
{
"name": "other-parts",
"value": "",
"children": [
{
"name": "per-cylinder-parts",
"value": "",
"children": [
{
"name": "piston-diameter",
"value": "",
"children": [
{
"name": "type",
"value": "uint32",
"children": []
},
{
"name": "range",
"value": "2000... 9000",
"children": []
}
]
},
{
"name": "valves",
"value": "",
"children": [
{
"name": "number",
"value": "",
"children": []
},
{
"name": "position",
"value": "",
"children": []
}
]
}
]
}
]
}
]
}
]
I want to parse through each elements and their respective childrens and manipulate it to create two set of arrays
Node data array that contains:key which is index of that element and values as shown
nodeDataArray.push({ key:i,Data: a.yang_type + " " + a.name}) or nodeDataArray.push({ key:i,Data: a.name + " " + a.value})
Link Data array that contains the link (parent child relation ship)
linkDataArray.push({ from: i, to: j });
where i is the index of parent and j is index of child
I have the following function that parses through the elements and pushes them fine in to node data array with index.
vm.tree.forEach(loop);// here vm.tree is the json data, passed dynamically
var i=0;
function loop(a) {
if(a.yang_type!='' && a.name!=''){
nodeDataArray.push({ key:i,Data: a.yang_type + " " + a.name, group: -1 });
//console.log("Data:",a.yang_type);
linkDataArray.push({ from: i, to: i+1 });
}
if(a.name!='' && a.value!=''){
nodeDataArray.push({ key:i,Data: a.name + " " + a.value, group: -1 });
linkDataArray.push({ from: 0, to: i+1 });
}
i=i+1;
// process you data
//if(Array.isArray(a.children)){j++;}
if(Array.isArray(a.children)){
//var g=0;
a.children.forEach(loop);
}
}
Below wordings is based on the sample JSON to make it more clear on what is my expected output should be
parse through the JSON and list out all the elements in the JSON object as shown below
car
v8_engine
cylinder-arrangement
type string
max-elements 8
other_parts
per-cylinder-parts
piston-diameter
type UINT32
range 2000...3000
valves
number
position
Then list of relationship based on parent and child index. Where car is the 0th element,v8_engine is the 2nd and so on … until the last one which is position being 12th
So we have total of 13 elements from the above example. Now I need to list their relation ship too. Like
0th element is parent of 1 and 5.
1st element is parent of 2
2nd element is parent of 3 and 4
and so on

To generate the parent list, you could use a closure with a from variable, which holds the node number from where it has been called.
BTW, your list above is not correct for 5th element is parent of 6 and 10.
function loop(from) {
return function (a) {
var f = i;
if (from !== undefined) {
linkDataArray.push({ from: from, to: i });
}
i++;
if (Array.isArray(a.children)) {
a.children.forEach(loop(f));
}
};
}
var data = [{ "name": "car", "value": "", "children": [{ "name": "v8_engine", "value": "", "children": [{ "name": "cylinder-arrangement", "value": "", "children": [{ "name": "type", "value": "string", "children": [] }, { "name": "max-elements", "value": "8", "children": [] }] }] }, { "name": "other-parts", "value": "", "children": [{ "name": "per-cylinder-parts", "value": "", "children": [{ "name": "piston-diameter", "value": "", "children": [{ "name": "type", "value": "uint32", "children": [] }, { "name": "range", "value": "2000... 9000", "children": [] }] }, { "name": "valves", "value": "", "children": [{ "name": "number", "value": "", "children": [] }, { "name": "position", "value": "", "children": [] }] }] }] }] }],
i = 0,
linkDataArray = [];
data.forEach(loop());
console.log(linkDataArray);

var i=0;
var nodeDataArray = [];
var linkDataArray = [];
function loop(from) {
return function (a) {
var f = i;
if(a.yang_type!='' && a.name!=''){
nodeDataArray.push({ key:i,Data: a.yang_type + " " + a.name, group: -1 });
//c=c+a.name;
//console.log("c:",c);
//console.log("Data:",a.yang_type);
//linkDataArray.push({ from: i, to: i+1 });
}
if(a.name!='' && a.value!=''){
nodeDataArray.push({ key:i,Data: a.name + " " + a.value, group: -1 });
//c=c+a.name+a.value;
console.log("c:",c);
//linkDataArray.push({ from: 0, to: i+1 });
}
if (from !== undefined) {
linkDataArray.push({ from: from, to: i });
}
i++;
if (Array.isArray(a.children)) {
a.children.forEach(loop(f));
}
//console.log("c:",c);
};
}
var data = [{ "name": "car", "value": "", "children": [{ "name": "v8_engine", "value": "", "children": [{ "name": "cylinder-arrangement", "value": "", "children": [{ "name": "type", "value": "string", "children": [] }, { "name": "max-elements", "value": "8", "children": [] }] }] }, { "name": "other-parts", "value": "", "children": [{ "name": "per-cylinder-parts", "value": "", "children": [{ "name": "piston-diameter", "value": "", "children": [{ "name": "type", "value": "uint32", "children": [] }, { "name": "range", "value": "2000... 9000", "children": [] }] }, { "name": "valves", "value": "", "children": [{ "name": "number", "value": "", "children": [] }, { "name": "position", "value": "", "children": [] }] }] }] }] }]
data.forEach(loop());

Remove duplicate objects, but push property to array on remaining object

I have an array of objects like so:
[
{
"id": "1",
"location": "US"
},
{
"id": "7",
"location": "US"
},
{
"id": "1",
"location": "France"
},
{
"id": "1",
"location": "China"
}
]
I would like to end up with a resulting array that looks like this:
[
{
"id": "1",
"locations": ["US", "France", "China"]
},
{
"id": "7",
"locations": ["US"]
}
]
Is there a solid way to accomplish this using underscore?
I'm contemplating looping through the array and for each id looping through the rest of the array and pushing location values to a locations array on that first object (by id), then at the end removing all duplicate objects (by id) which do not contain a locations property.
This is different from existing questions on SO that simply ask about removing duplicates. I am aiming to remove duplicates while also holding on to certain property values from these duplicates in an array on the 'surviving' object.

Solution in plain Javascript
var data = [{ "id": "9" }, { "id": "1", "location": "US" }, { "id": "7", "location": "US" }, { "id": "1", "location": "France" }, { "id": "1", "location": "China" }],
result = [];
data.forEach(function (a) {
a.location && !result.some(function (b) {
if (a.id === b.id) {
b.locations.push(a.location);
return true;
}
}) && result.push({ id: a.id, locations: [a.location] });
});
document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');

You can use reduce function to transform your array.
var data = [
{ "id": "1", "location": "US" },
{ "id": "7", "location": "US" },
{ "id": "1", "location": "France" },
{ "id": "1", "location": "China" }
];
var result = data.reduce(function (prev, item) {
var newItem = prev.find(function(i) {
return i.id === item.id;
});
if (!newItem) {
prev.push({id: item.id, locations: [item.location]});
} else {
newItem.locations.push(item.location);
}
return prev;
}, []);

And a version using underscore:
var result = _.chain(data)
.groupBy('id')
.map(function(group, id){
return {
id: id,
locations: _.pluck(group, 'location')
}
})
.value();

Nesting a parent child relationship in lodash, given the parent id and children

How would I be able to nest json object if the parent and its children was given as a property.
The data looks like:
"1": {
"id": 1,
"name": "foo",
"parent": null,
"root": 1,
"children": [2, 4, 6],
"posts":[
{ "id": "1", "name": "item1" },
{ "id": "2", "name": "item2" },
{ "id": "3", "name": "item3" }
]
},
"2": {
"id": 2,
"name": "bar",
"parent": 1,
"root": 1,
"children": null,
"posts":[
{ "id": "4", "name": "item4" }
]
},
"3": {
"id": 3,
"name": "bazz",
"parent": null,
"root": 3,
"children": [5, 7],
"posts":[
{ "id": "5", "name": "item5" },
{ "id": "6", "name": "item6" }
]
},
....
A simple groupby using lodash won't do it.
var group = _.groupBy(data, 'parent');
Here is a fiddle:
http://jsfiddle.net/tzugzo8a/1/
The context of question is a nested categories with subcategories, and categories can have categories and posts in them.
Basically I don't want to have a different property for children and posts, since they are all children of a parent.
Desired output
"1": {
"id": 1,
"name": "foo",
"parent": null,
"root": 1,
"isCategory": true,
"children": [
{
"id": 2,
"name": "bar",
"parent": 1,
"root": 1,
"isCategory": true,
"children": null
},
{ "id": "1", "name": "item1", isCategory: false },
{ "id": "2", "name": "item2", isCategory: false },
{ "id": "3", "name": "item3", isCategory: false }
]
...
}

This is my take on the question (fiddle):
var data = getData();
var group = getTree(data);
console.log(group);
function getTree(flat) {
return _.reduce(flat, function (treeObj, item, prop, flatTree) {
var children = _.map(item.children, function (childId) {
return _.set(flatTree[childId], 'isCategory', true);
}).concat(_.map(item.items, function(item) {
return _.set(item, 'isCategory', false);
}));
item.children = !!children.length ? children : null;
delete item.items;
item.parent === null && (treeObj[prop] = item);
return treeObj;
}, {});
}

Take a look on the updated fiddle:
var data = getData();
_.keys(data).forEach(function(id){
var element = data[id];
if (element.children === null){
element.children = [];
}
element.isCategory = true;
element.items.forEach(function(item){
item.isCategory = false;
})
});
_.keys(data).forEach(function(id){
var element = data[id];
element.children = element.children.map(function(childId){
return data[childId];
}).concat(element.items);
});
_.keys(data).forEach(function(id){
delete data[id].items;
});
console.log(JSON.stringify(_.findWhere(_.values(data), {'parent': null})));