Develop Reference

Javascript - How to create filtered nested Array

I have my array object here:
let businessList = [{
name: "siAdmin",
count: 52,
children: [{
name: "si1",
count: 30,
children: [{
count: 10,
name: "org1-1"
}, {
count: 14,
name: "org1-2"
}, {
name: "org1-3",
count: 6
}]
}, {
name: "si2",
count: 22,
children: [{
name: "org2-1",
count: 22
}]
}]
}]
I want to make make a filtered list if count > 10, which would be like:
filteredList = [{
name: "siAdmin",
count: 52,
children: [{
name: "si1",
count: 30,
children: [{
count: 14,
name: "org1-2"
}]
}, {
name: "si2",
count: 22,
children: [{
name: "org2-1",
count: 22
}]
}]
}]
How can I achieve this result?
And if condition changes to count > 23, it would be like:
filteredList = [{
name: "siAdmin",
count: 52,
children: [{
name: "si1",
count: 30,
children: []
}]
}]

You can use recursion like this,
let businessList = [{
name: "siAdmin",
count: 52,
children: [{
name: "si1",
count: 30,
children: [{
count: 10,
name: "org1-1"
}, {
count: 14,
name: "org1-2"
}, {
name: "org1-3",
count: 6
}]
}, {
name: "si2",
count: 22,
children: [{
name: "org2-1",
count: 22
}]
}]
}];
const filteredArray = (arr, countLimit) => {
return arr.filter(item => {
if(item.hasOwnProperty('children')) {
item.children = filteredArray(item.children, countLimit);
}
return item.count > countLimit;
})
};
console.log(filteredArray(JSON.parse(JSON.stringify(businessList)), 10));
console.log(filteredArray(JSON.parse(JSON.stringify(businessList)), 23));
console.log(businessList);

let businessList = [{
name: "siAdmin",
count: 52,
children: [{
name: "si1",
count: 30,
children: [{
count: 10,
name: "org1-1"
}, {
count: 14,
name: "org1-2"
}, {
name: "org1-3",
count: 6
}]
}, {
name: "si2",
count: 22,
children: [{
name: "org2-1",
count: 22
}]
}]
}]
function getData(input, number){
let len = input.length;
let ans = [];
for(let i = 0; i < len; i++){
if(input[i].count >= number){
if(input[i].children){
let data = getData(input[i].children,number);
//ans.push(input[i]);
input[i].children = data;
ans.push(input[i])
}
else{
ans.push(input[i]);
}
}
}
return ans;
}
getData(businessList,10)
getData(businessList,23)
above function should work

I finally find the solution without breaking the original object, here's my code:
let businessList = [{
name: "siAdmin",
count: 52,
children: [{
name: "si1",
count: 30,
children: [{
count: 10,
name: "org1-1"
}, {
count: 14,
name: "org1-2"
}, {
name: "org1-3",
count: 6
}]
}, {
name: "si2",
count: 22,
children: [{
name: "org2-1",
count: 22
}]
}]
}];
function filteredBusiness(businessArr, count) {
let arr = [];
businessArr.forEach((business) => {
let index = 0;
let businessMatched = business.count > count
if (businessMatched) {
let {
children,
...dataWithoutChildren
} = business;
arr.push({
...dataWithoutChildren
});
index = arr.length - 1;
let hasChildren = business.children;
if (hasChildren) {
// arr[index].children = [];
//check children matched
let nextBusinessArr = filteredBusiness(
business.children,
count
);
if (nextBusinessArr) {
arr[index].children = nextBusinessArr;
}
}
}
})
return arr;
}
console.log(filteredBusiness(businessList, 10))

Combine two different sized array of objects in javascript [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have two different sized arrays like this
[{ id: 1, name: 'One', contacts: [] },
{ id: 2, name: 'Two', contacts: [] },
{ id: 3, name: 'Three', contacts: [] },
{ id: 4, name: 'Four', contacts: [] }]
[{ id: 1, name: 'One', contacts: [{ id: 100, name: "C1" }, { id: 101, name: "C2" }] },
{ id: 3, name: 'Three', contacts: [{ id: 120, name: "C1" }, { id: 121, name: "C2" }] },
{ id: 5, name: 'Five', contacts: [{ id: 420, name: "F1" }, { id: 421, name: "F2" }] }];
I tried with below code in javascript
const mergeArray = (source, merge, by) => source.map(item => ({
...item,
...(merge.find(i => i[by] === item[by]) || {}),
}));
output = mergeArray(this.oldArray1,this.oldArray2,'id');
It gives output as
[{ id: 1, name: 'One', contacts: [{ id: 100, name: "C1" }, { id: 101, name: "C2" }] },
{ id: 2, name: 'Two', contacts: [] }
{ id: 3, name: 'Three', contacts: [{ id: 120, name: "C1" }, { id: 121, name: "C2" }] }]
But desired output like this
[{ id: 1, name: 'One', contacts: [{ id: 100, name: "C1" }, { id: 101, name: "C2" }] },
{ id: 2, name: 'Two', contacts: [] }
{ id: 3, name: 'Three', contacts: [{ id: 120, name: "C1" }, { id: 121, name: "C2" }] },
{ id: 4, name: 'Four', contacts: [] }
{ id: 5, name: 'Five', contacts: [{ id: 420, name: "F1" }, { id: 421, name: "F2" }] }]

you could collect the arrays in an array, or simply concat the arrays and then reduce this array by checkin if the id is in the result array. If not add the object to the result array or if exist, then extend contacts with the acutal data.
var array1 = [{ id: 1, name: 'One', contacts: [] }, { id: 2, name: 'Two', contacts: [] }, { id: 3, name: 'Three', contacts: [] }, { id: 4, name: 'Four', contacts: [] }],
array2 = [{ id: 1, name: 'One', contacts: [{ id: 100, name: "C1" }, { id: 101, name: "C2" }] }, { id: 3, name: 'Three', contacts: [{ id: 120, name: "C1" }, { id: 121, name: "C2" }] }, { id: 5, name: 'Five', contacts: [{ id: 420, name: "F1" }, { id: 421, name: "F2" }] }],
merged = [array1, array2].reduce((r, a) => {
a.forEach(o => {
var object = r.find(({ id }) => id === o.id);
if (!object) {
return r.push(o);
}
object.contacts.push(...o.contacts);
});
return r;
}, []);
console.log(merged);
.as-console-wrapper { max-height: 100% !important; top: 0; }

How to create a tree of existing json

I want to parse a json that is fetch from api
I have following schema
nodes = [
{
id: 1,
name: 'root1',
key: 'value1'
key1: 'value2'
children: [
{ id: 2, name: 'child1' },
{ id: 3, name: 'child2' }
]
},
{
id: 4,
name: 'root2',
key3: 'value3'
key4: 'value4'
children: [
{ id: 5, name: 'child2.1' },
{
id: 6,
name: 'child2.2',
key5: 'value5'
key6: 'value6'
children: [{
id: 7,
name: 'subsub',
children: [{
id: 8,
name: 'subsubsub'
}]
}]
}
]
}
];
I'm trying following but not working
data = []
var nodesFun = function(n, data, cObj) {
let obj = {}
obj["name"] = n['name']
if (n['children']) {
console.log(obj);
console.log("name--> "+n['name']);
let childList = []
for (let i=0; i < n['children'].length; i++){
console.log("cname--> "+n['children'][i]['name']);
childList.push({"name": n['children'][i]['name']})
let dataObj = nodesFun(n['children'][i], data, obj)
if (dataObj){
data.push(dataObj)
}
}
obj["children"] = childList
cObj["children"] = obj
return cObj
}else{
cObj["children"] = obj
return cObj
}
}
nodesFun(nodes, data, {})
console.log(nodes);
Now I want to convert above json in following format using recursive function
nodes = [{
id: 1,
name: 'root1',
children: [
{ id: 2, name: 'child1' },
{ id: 3, name: 'child2' }
]
},
{
id: 4,
name: 'root2',
children: [
{ id: 5, name: 'child2.1' },
{
id: 6,
name: 'child2.2',
children: [{
id: 7,
name: 'subsub',
children: [{
id: 8,
name: 'subsubsub'
}]
}]
}
]
}
];

You can modify your original nodes array using array#forEach and recursive approach. Iterate through each key of node if the key includes key word delete it and if it contains children call deleteKey function again.
var nodes = [ { id: 1, name: 'root1', key: 'value1', key1: 'value2', children: [ { id: 2, name: 'child1' }, { id: 3, name: 'child2' } ] }, { id: 4, name: 'root2', key3: 'value3', key4: 'value4', children: [ { id: 5, name: 'child2.1' }, { id: 6, name: 'child2.2',key5: 'value5', key6: 'value6', children: [{ id: 7, name: 'subsub', children: [{ id: 8, name: 'subsubsub' }] }] } ] } ];
var deleteKey = (nodes) => {
nodes.forEach(node => {
Object.keys(node).forEach(k => {
if(k.includes('key'))
delete node[k];
if(k == 'children')
deleteKey(node[k]);
})
});
}
deleteKey(nodes);
console.log(nodes);
.as-console-wrapper { max-height: 100% !important; top: 0; }
In case you want a new array, you can use array#reduce and array#map.
var nodes = [ { id: 1, name: 'root1', key: 'value1', key1: 'value2', children: [ { id: 2, name: 'child1' }, { id: 3, name: 'child2' } ] }, { id: 4, name: 'root2', key3: 'value3', key4: 'value4', children: [ { id: 5, name: 'child2.1' }, { id: 6, name: 'child2.2',key5: 'value5', key6: 'value6', children: [{ id: 7, name: 'subsub', children: [{ id: 8, name: 'subsubsub' }] }] } ] } ];
var removeKey = (nodes) => {
return nodes.map(node => {
return Object.keys(node).reduce((r, k) => {
if(!k.includes('key'))
r[k] = node[k];
if(k == 'children')
r[k] = removeKey(node[k]);
return r;
},{});
});
}
console.log(removeKey(nodes));
.as-console-wrapper { max-height: 100% !important; top: 0; }

The function delete all the keys that are not id, name and children from your object
let nodes = [
{
id: 1,
name: 'root1',
key: 'value1',
key1: 'value2',
children: [
{ id: 2, name: 'child1' },
{ id: 3, name: 'child2' }
]
},
{
id: 4,
name: 'root2',
key3: 'value3',
key4: 'value4',
children: [
{ id: 5, name: 'child2.1' },
{
id: 6,
name: 'child2.2',
key5: 'value5',
key6: 'value6',
children: [{
id: 7,
name: 'subsub',
children: [{
id: 8,
name: 'subsubsub'
}]
}]
}
]
}
];
const getFinalNode = function(arr){
arr.forEach(function(obj, idx){
let tmpObj = {
id: obj.id,
name: obj.name,
}
if(obj.children && obj.children.length){
tmpObj.children = getFinalNode(obj.children)
}
arr[idx] = tmpObj
})
return arr
}
getFinalNode(nodes);
console.log(nodes)

How to generate such tree?

Trying to generate dropdown with deep nested elements.
Incoming data:
111: {id: 111, name: '111' },
222: {id: 222, name: '222' },
333: {id: 333, name: '333', parent: {id: 222} },
444: {id: 444, name: '444', parent: {id: 333} },
555: {id: 555, name: '555' }
I know only parent and I want to generate a tree for React template.
It's going to be like this:
result:
[{
id: 111,
name: '111'
},
{
id: 222,
name: '222',
children: [{
id: 333,
name: '333',
parent: {
id: 222
},
children: [{
id: 444,
name: '444',
parent: {
id: 333
}
}]
}
]
},
{
id: 555,
name: '555'
}
]

You could take temporary object for keeping all references to the same id and build a tree with the parts.
This works for unsorted data as well.
var data = { 111: { id: 111, name: '111' }, 222: { id: 222, name: '222' }, 333: { id: 333, name: '333', parent: { id: 222 } }, 444: { id: 444, name: '444', parent: { id: 333 } }, 555: { id: 555, name: '555' } },
tree = function (object, root) {
var r = [], o = {};
Object.keys(object).forEach(function (k) {
var id = object[k].id;
o[id] = Object.assign(o[id] || {}, object[k]);
if (o[id].parent === root) {
r.push(o[id]);
} else {
o[o[id].parent.id] = o[o[id].parent.id] || {};
o[o[id].parent.id].children = o[o[id].parent.id].children || [];
o[o[id].parent.id].children.push(o[id]);
}
});
return r;
}(data, undefined);
console.log(tree);
.as-console-wrapper { max-height: 100% !important; top: 0; }

I take a time for make a demo, but look at your object is worg no passed any json validator.
var _data = [{
id: '111',
name: '111'
}, {
id: '222',
name: '222',
children: [
{
id: '333',
name: '333',
parent: {
id: '222'
},
children: [
{
id: '444',
name: '444',
parent: {
id: '333'
}
}
]
}]
}
];
console.log(_data);
function make(arr){
var _arr = [];
function _do(arr, _parent){
for(var i=0; i<arr.length;i++){
var _o = {
id: arr[i].id,
name: arr[i].name
};
if(_parent){
_o.parent = _parent;
}
if(arr[i].children){
_do(arr[i].children, arr[i].id);
}
_arr[arr[i].id] = _o;
}
}
_do(arr);
return _arr
};
console.log(make(_data));

You can try following. You can solve n level nesting with it.
var obj = {
111: {id: 111, name: '111' },
222: {id: 222, name: '222' },
333: {id: 333, name: '333', parent: {id: 222} },
444: {id: 444, name: '444', parent: {id: 333} },
555: {id: 555, name: '555' }
};
// Iterate over the object keys and create the tree and only push items which have no parent in response
var response = [];
Object.keys(obj).forEach(function(key) {
var item = obj[key];
if (item.parent) {
obj[item.parent.id].children = obj[item.parent.id].children || [];
obj[item.parent.id].children.push(obj[key]);
} else {
response.push(obj[key]);
}
});
console.log(response);

jquery update property in an array from another array

I want to update a property in an array from another array by matching a field by using jquery.
objArray = [ { Id: 1, Val: 'A'}, { Id: 3, Val: 'B'}, { Id: 5, Val: 'C'} ];
After doing some processing, I am getting an array like this.
objnewArray = [ { Id: 1, Value: 'AA'}, { Id: 3, Value: 'BB'}, { Id: 5, Value: 'CC'} ];
Now I want to update objArray Val field to objnewArray's value field so the result is like this
objArray = [ { Id: 1, Val: 'AA'}, { Id: 3, Val: 'BB'}, { Id: 5, Val: 'CC'} ];
Is there any other way other than looping both the arrays ,matching the Id and updating the Val property?

You could use a hash table and loop the target first and the the new object for assigning to the old object.
var objArray = [{ Id: 1, Val: 'A' }, { Id: 3, Val: 'B' }, { Id: 5, Val: 'C' }],
objnewArray = [{ Id: 1, Value: 'AA', extra: 42 }, { Id: 3, Value: 'BB' }, { Id: 5, Value: 'CC' }],
hash = Object.create(null);
objArray.forEach(function (a) {
hash[a.id] = a;
});
objnewArray.forEach(function (a) {
Object.keys(a).forEach(function (k) {
hash[a.id][k] = a[k];
});
});
console.log(objnewArray);
.as-console-wrapper { max-height: 100% !important; top: 0; }
ES6 with Map
var objArray = [{ Id: 1, Val: 'A' }, { Id: 3, Val: 'B' }, { Id: 5, Val: 'C' }],
objnewArray = [{ Id: 1, Value: 'AA', extra: 42 }, { Id: 3, Value: 'BB' }, { Id: 5, Value: 'CC' }],
hash = new Map;
objArray.forEach(a => hash.set(a.id, a));
objnewArray.forEach(a => Object.keys(a).forEach(k => hash.get(a.id)[k] = a[k]));
console.log(objnewArray);
.as-console-wrapper { max-height: 100% !important; top: 0; }
ES6 with Array#find
var objArray = [{ Id: 1, Val: 'A' }, { Id: 3, Val: 'B' }, { Id: 5, Val: 'C' }],
objnewArray = [{ Id: 1, Value: 'AA', extra: 42 }, { Id: 3, Value: 'BB' }, { Id: 5, Value: 'CC' }];
objnewArray.forEach(a =>
Object.keys(a).forEach(k => objArray.find(b => a.id === b.id)[k] = a[k]));
console.log(objnewArray);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Traverse the array, create new key and assign its value properly, delete the old key. You are done.
objnewArray = [ { Id: 1, Value: 'AA'}, { Id: 3, Value: 'BB'}, { Id: 5, Value: 'CC'} ];
var objArray = objnewArray.map(function(el){
el.Val = el.Value; // Create new key Val
delete el.Value; // Delete old key Value
return el;
});
console.log(objArray);

You can use Array.prototype.reduce with a hash table and Object.assign to create a shallow object copy to get the required output array - see demo below:
var objArray = [ { Id: 1, Val: 'A'}, { Id: 3, Val: 'B'}, { Id: 5, Val: 'C'} ];
var objnewArray = [ { Id: 1, Value: 'AA'}, { Id: 3, Value: 'BB'}, { Id: 5, Value: 'CC'}];
var result = objArray.reduce(function(hash){
//create hash table
objnewArray.forEach(function(element){
hash[element.Id]=element.Value;
});
// reduce to the required result
return function(prev, curr){
var element = Object.assign({}, curr);
element.Val = hash[curr.Id];
prev.push(element);
return prev;
}
}(Object.create(null)),[]);
console.log(result);
.as-console-wrapper{top:0;max-height:100%!important;}

You can iterate over objArray and $.extend the object
Jquery -
objArray = [ { Id: 1, Value: 'A'}, { Id: 3, Value: 'B'}, { Id: 5, Value: 'C'} ];
objnewArray = [ { Id: 1, Value: 'AA'}, { Id: 3, Value: 'BB'}, { Id: 5, Value: 'CC'} ];
objArrayById = [];
objArray.forEach(function(value){
objArrayById[value.Id] = value;
});
objnewArray.forEach(function(value,index){
objArrayById[value.Id] = $.extend(objArrayById[value.Id],value);
});
console.log(objArrayById);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
ES6
objArray = [ { Id: 1, Value: 'A'}, { Id: 3, Value: 'B'}, { Id: 5, Value: 'C'} ];
objnewArray = [ { Id: 1, Value: 'AA'}, { Id: 3, Value: 'BB'}, { Id: 5, Value: 'CC'} ];
objArrayById = [];
objArray.forEach(function(value){
objArrayById[value.Id] = value;
});
objnewArray.forEach(function(value){
objArrayById[value.Id] = Object.assign(objArrayById[value.Id],value);
});
console.log(objArrayById);

This is quite similar to #void answer
Iterating through objArray so not to update the objnewArray object
var objnewArray = [ { Id: 1, Value: 'AA'}, { Id: 3, Value: 'BB'}, { Id: 5, Value: 'CC'} ];
var objArray = JSON.parse(JSON.stringify(objnewArray));
//console.log(objArray)
objArray = objArray.map(function(doc){
doc.Val = doc.Value;
delete doc.Value;
return doc;
});
console.log(objArray)