how to fetch the single name property from nested array? - javascript

I am working on Angular Project, where i need to fetch name property from given nested array object.
I tried with lodash map function _.map('ArrayName',(o)=>o.name); here i am receving only [ Peter, Andy ] as result. I want all name property [Peter, Andy, Mills, mac, Teddy]like this. Can someone guide me how to do this.
[{
"id": "1",
"name": "Peter",
"children": []}
,{
"id": "2",
"name": "Andy",
"children": [
{
"id": "3",
"name": "Mills",
"children": []
},
{
"id": "4",
"name": "Mac",
"children": [
{
"id": "5",
"name": "Teddy",
"children": []
}
]
}
]}]


You'll need to access the nested children arrays recursively.
Here is an example using Array.prototype.flatMap() and spread syntax to recursively iterate each array of children and flatten the results.
const input = [{ "id": "1", "name": "Peter", "children": [] }, { "id": "2", "name": "Andy", "children": [{ "id": "3", "name": "Mills", "children": [] }, { "id": "4", "name": "Mac", "children": [{ "id": "5", "name": "Teddy", "children": [] }] }] }];
const recursivelyGetProp = (arr, prop) => (
arr.flatMap(({ children, [prop]: p }) =>
[p, ...(children.length ? recursivelyGetProp(children, prop) : [])]
));
console.log(recursivelyGetProp(input, 'name'));

Related

Need to add parentId to child in multi-dimensional Array of JSON data

I have a multidimensional array of JSON data with 'n' number of nested children. My task is to add UniqueId to parent JSON and that uniqueId should be added as parentId to the child. Can you please help in javascript. Thanks
Note:
The number of child its recursive, and there can be any number of children. For this purpose, we can have a deep level of three
Input :
[{
"text": 1527978678434,
"value": 1527978678434,
"children": [{
"text": 1292232152442,
"value": 1292232152442,
"children": [{
"text": 474194771845,
"value": 474194771845,
"children": []
},
{
"text": 468086178830,
"value": 468086178830,
"children": []
}
]
},
{
"text": 1067869237589,
"value": 1067869237589,
"children": []
},
{
"text": 1166591731429,
"value": 1166591731429,
"children": []
},
]
}]
The Required Output:
[{
"text": 1527978678434,
"value": 1527978678434,
"parentId": 0,
"uniqueId": 1,
"children": [{
"text": 1292232152442,
"value": 1292232152442,
"parentId": 1,
"uniqueId": 2,
"children": [{
"text": 474194771845,
"value": 474194771845,
"parentId": 2,
"uniqueId": 3,
"children": []
},
{
"text": 468086178830,
"value": 468086178830,
"parentId": 2,
"uniqueId": 4,
"children": []
}
]
},
{
"text": 1067869237589,
"value": 1067869237589,
"parentId": 1,
"uniqueId": 5,
"children": []
},
{
"text": 1166591731429,
"value": 1166591731429,
"parentId": 1,
"uniqueId": 6,
"children": []
},
{
"text": 111221786011,
"value": 111221786011,
"parentId": 1,
"uniqueId": 7,
"children": []
},
{
"text": 641372005975,
"value": 641372005975,
"parentId": 1,
"uniqueId": 8,
"children": [{
"text": 23082640100,
"value": 23082640100,
"parentId": 8,
"uniqueId": 9,
"children": []
}]
}
]
}]

Consider data is your array.
Just do the DFS and alter the data on the fly. + Having a global to hold the increased ID.
let lastUniqueId = 0;
function addIds(children, parentId) {
(children || []).forEach(r => {
r.parentId = parentId;
r.uniqueId = ++lastUniqueId;
addIds(r.children, r.uniqueId);
});
}
addIds(data, lastUniqueId);

This seems something you can do using a recursive function while keeping track of a shared uniqueId counter, assuming the nesting doesn't go incredibly deep:
const data = [{
"text": 1527978678434,
"value": 1527978678434,
"children": [{
"text": 1292232152442,
"value": 1292232152442,
"children": [{
"text": 474194771845,
"value": 474194771845,
"children": []
},
{
"text": 468086178830,
"value": 468086178830,
"children": []
}
]
},
{
"text": 1067869237589,
"value": 1067869237589,
"children": []
},
{
"text": 1166591731429,
"value": 1166591731429,
"children": []
},
]
}];
function convert(array) {
let uniqueId = 0;
function mapData(data, parentId) {
const myId = ++uniqueId;
const result = {
...data, // copy all data
uniqueId, parentId, // add our new fields
// and handle the children recursively
children: data.children.map(c => mapData(c, myId)),
};
// Don't mind this, just tricking JS in displaying the children array at the bottom during console.log
const children = result.children; delete result.children; result.children = children;
return result;
}
return array.map(d => mapData(d, 0));
}
const result = convert(data);
console.log(result);

Get difference between two nested arrays in javascript

I wanted to get the difference between two arrays which is nested.
let firstArray = {
"family": "BLUE",
"globalThreshold": "2.0",
"levelData": [
{
"name": "India",
"value": "4.0",
"count": [
{
"id": "21",
"countName": "ABC",
"countThreshold": "7.0"
},
{
"id": "22",
"workscopeName": "DEF",
"countThreshold": "4242"
}
]
},
{
"name": "FEDERAL EXPRESS CORPORATION",
"value": "1.0",
"count": [
{
"id": "5",
"countName": "ABC",
"countThreshold": "2.0"
},
{
"id": "6",
"countName": "DEF",
"countThreshold": "3.0"
}
]
}
]
}
let changedArray= {
"family": "BLUE",
"globalThreshold": "2.0",
"levelData": [
{
"name": "India",
"value": "5",
"count": [
{
"id": "21",
"countName": "ABC",
"countThreshold": "7.0"
},
{
"id": "22",
"workscopeName": "DEF",
"countThreshold": "4242"
}
]
},
{
"name": "FEDERAL EXPRESS CORPORATION",
"value": "1.0",
"count": [
{
"id": "5",
"countName": "ABC",
"countThreshold": "60"
},
{
"id": "6",
"countName": "DEF",
"countThreshold": "3.0"
}
]
}
]
}
Expected result:
let finalArray = {
"family": "BLUE",
"globalThreshold": "2.0",
"levelData": [
{
"name": "India",
"value": "5",
"count": []
},
{
"name": "FEDERAL EXPRESS CORPORATION",
"value": "1.0",
"count": [
{
"id": "5",
"countName": "ABC",
"countThreshold": "60"
}
]
}
]
}
I would like to track the diffference based on the value property inside 'levelData' array and countThreshold inside count array.
i tried repeating two arrays in for loop but was not able to repeat Any simultaneously as its nested.Do let me know any quick approach..
Thanks

Try using map to iterate for each levelData finding their respective in firstArray by name then filter by matching its properties:
let firstArray={"family":"BLUE","globalThreshold":"2.0","levelData":[{"name":"India","value":"4.0","count":[{"id":"21","countName":"ABC","countThreshold":"7.0"},{"id":"22","workscopeName":"DEF","countThreshold":"4242"}]},{"name":"FEDERAL EXPRESS CORPORATION","value":"1.0","count":[{"id":"5","countName":"ABC","countThreshold":"2.0"},{"id":"6","countName":"DEF","countThreshold":"3.0"}]}]};
let changedArray={"family":"BLUE","globalThreshold":"2.0","levelData":[{"name":"India","value":"5","count":[{"id":"21","countName":"ABC","countThreshold":"7.0"},{"id":"22","workscopeName":"DEF","countThreshold":"4242"}]},{"name":"FEDERAL EXPRESS CORPORATION","value":"1.0","count":[{"id":"5","countName":"ABC","countThreshold":"60"},{"id":"6","countName":"DEF","countThreshold":"3.0"}]}]}
var arr = changedArray.levelData.map(ele => {
var count = firstArray.levelData.find(x => x.name == ele.name).count;
ele.count = ele.count.filter(x => !count.some(y => x.id == y.id && x.countThreshold == y.countThreshold));
return ele;
})
console.log(arr);

Search nested object and return whole path

I have below JavaScript with n level children and want to search for id and if any of item from has matching id than need to return object from root to matching item.
I want to return entire hierarchy of found item from root till object with it's children.
I tried with lodash and underscore and could not find easy solution.
input: {
"children": [{
"name": "Home",
"title": "Home",
"id": "home1",
"children": []
},
{
"name": "BUSINESS AND ROLE SPECIFIC",
"title": "BUSINESS AND ROLE SPECIFIC",
"id": "BAR1",
"children": [{
"name": "Global Businesses",
"title": "Global Businesses",
"id": "GB1",
"children": [{
"name": "Commercial Banking",
"title": "Commercial Banking",
"id": "CB1",
"children": [{
"name": "FLAGSHIP PROGRAMMES",
"title": "FLAGSHIP PROGRAMMES",
"id": "FG1",
"children": []
}]
}]
}]
},
{
"name": "RISK MANAGEMENT",
"title": "RISK MANAGEMENT",
"id": "RM1",
"children": []
}
]
}
Search: {
id: 'FG1'
}
return :{
"name": "BUSINESS AND ROLE SPECIFIC",
"title": "BUSINESS AND ROLE SPECIFIC",
"id": "BAR1",
"children": [{
"name": "Global Businesses",
"title": "Global Businesses",
"id": "GB1",
"children": [{
"name": "Commercial Banking",
"title": "Commercial Banking",
"id": "CB1",
"children": [{
"name": "FLAGSHIP PROGRAMMES",
"title": "FLAGSHIP PROGRAMMES",
"id": "FG1",
"children": [{}]
}]
}]
}]
}

You could use this function:
function findChild(obj, condition) {
if (Object.entries(condition).every( ([k,v]) => obj[k] === v )) {
return obj;
}
for (const child of obj.children || []) {
const found = findChild(child, condition);
// If found, then add this node to the ancestors of the result
if (found) return Object.assign({}, obj, { children: [found] });
}
}
// Sample data
var input = { "children": [{ "name": "Home", "title": "Home", "id": "home1", "children": [] }, { "name": "BUSINESS AND ROLE SPECIFIC", "title": "BUSINESS AND ROLE SPECIFIC", "id": "BAR1", "children": [{ "name": "Global Businesses", "title": "Global Businesses", "id": "GB1", "children": [{ "name": "Commercial Banking", "title": "Commercial Banking", "id": "CB1", "children": [{ "name": "FLAGSHIP PROGRAMMES", "title": "FLAGSHIP PROGRAMMES", "id": "FG1", "children": [] }] }] }] }, { "name": "RISK MANAGEMENT", "title": "RISK MANAGEMENT", "id": "RM1", "children": [] } ]},
search = { id: 'FG1' };
console.log(findChild(input, search));
.as-console-wrapper { max-height: 100% !important; top: 0; }
You can use this also for searching with multiple conditions, which must be true at the same time:
search = { "name": "Global Businesses", "title": "Global Businesses" };
... would give you the object that has the specified name and title.
Follow-up question
You asked in comments:
Is there way to supply number to not remove children for given node in input. like,
const donotRemoveChildNode = 2;
console.log(findChild(input, search, donotRemoveChildNode ));
...so it will not remove that specific node's children if it matches condition?
Here, if we search for { id: 'FG1'} and supply donotRemoveChildNode = 2, it would not remove the first level children for "Commercial banking".
I would say the donotRemoveChildNode would have to be 3, as there are three levels of children arrays in the ancestor-hierarchy of the "Commercial banking" node. A value of 0 would show the first level children of the top-most children property.
Here is how that extra argument would work -- I added some records to the data to illustrate the difference in the output:
function findChild(obj, condition, removeChildNodesBefore = Infinity) {
if (Object.entries(condition).every( ([k,v]) => obj[k] === v )) {
return obj;
}
for (const child of obj.children || []) {
let found = findChild(child, condition, removeChildNodesBefore - 1);
if (found) {
return Object.assign({}, obj, {
children: removeChildNodesBefore <= 0
? obj.children.map( sibling =>
sibling == child ? found
: Object.assign({}, sibling, {children: []})
)
: [found]
});
}
}
}
var input = { "children": [{ "name": "Home", "title": "Home", "id": "home1", "children": [] }, { "name": "BUSINESS AND ROLE SPECIFIC", "title": "BUSINESS AND ROLE SPECIFIC", "id": "BAR1", "children": [{ "name": "Global Businesses", "title": "Global Businesses", "id": "GB1", "children": [{ "name": "test", "title": "test", "id": "xxx", "children": [{ "name": "testDeep", "title": "test", "id": "deep", "children": []}]}, { "name": "Commercial Banking", "title": "Commercial Banking", "id": "CB1", "children": [{ "name": "test", "title": "test", "id": "yyy", "children": []}, { "name": "FLAGSHIP PROGRAMMES", "title": "FLAGSHIP PROGRAMMES", "id": "FG1", "children": [] }] }] }] }, { "name": "RISK MANAGEMENT", "title": "RISK MANAGEMENT", "id": "RM1", "children": [] } ]},
search = { id: 'FG1' }
console.log(findChild(input, search, 3));
.as-console-wrapper { max-height: 100% !important; top: 0; }

function getBranch(branches, leaf_id)
{
var result_branch = null;
branches.some(function(branch, idx) {
if (branch.id == leaf_id) {
result_branch = Object.assign({}, branch);
result_branch.children.forEach(function(child, idx) {
delete result_branch.children[idx].children;
});
return true;
} else {
let target_branch = getBranch(branch.children, leaf_id);
if (target_branch) {
result_branch = Object.assign({}, branch);
delete result_branch.children
result_branch.children = [target_branch];
return true;
}
}
return false;
});
return result_branch;
}
console.log(getBranch(input.children, 'GB1'));

One way is to first loop the root children, and then create another function to see if the Id exists in any of it's children.
var data = {
"children": [{
"name": "Home",
"title": "Home",
"id": "home1",
"children": []
},
{
"name": "BUSINESS AND ROLE SPECIFIC",
"title": "BUSINESS AND ROLE SPECIFIC",
"id": "BAR1",
"children": [{
"name": "Global Businesses",
"title": "Global Businesses",
"id": "GB1",
"children": [{
"name": "Commercial Banking",
"title": "Commercial Banking",
"id": "CB1",
"children": [{
"name": "FLAGSHIP PROGRAMMES",
"title": "FLAGSHIP PROGRAMMES",
"id": "FG1",
"children": []
}]
}]
}]
},
{
"name": "RISK MANAGEMENT",
"title": "RISK MANAGEMENT",
"id": "RM1",
"children": []
}
]
};
function hasId( id, data ) {
if (data.id === id) return true;
if (data.children) {
for (const child of data.children) {
if (hasId( id, child)) return true;
}
}
return false;
}
function search( id, data ) {
for (const child of data.children) {
if (hasId(id, child)) return child;
}
return null;
}
console.log(search( "FG1", data ));

Build a map using values of multiple objects in an array javascript

I need to build a map "A" from an existing array of objects. However the key value pairs on Map A are from the values of existing Object keys "id" and "cap".
Is it possible to read the values of 2 keys and store as an object
var items = [{
"id": 1,
"name": "Primary",
"cap": [{
"id": "1",
"name": "1s"
}, {
"id": "2",
"name": "T2s"
}]
},{
"id": 2,
"name": "Secondary",
"cap": [{
"id": "1",
"name": "1s"
}, {
"id": "2",
"name": "T2s"
}
]
}]
My map needs to be like this
{ "1" : [{
"id": "1",
"name": "1s"
}, {
"id": "2",
"name": "T2s"
}],
"2" : [{
"id": "1",
"name": "1s"
}, {
"id": "2",
"name": "T2s"
}]
}

Use Array#reduce to achieve the results like below:
var items = [{
"id": 1,
"name": "Primary",
"cap": [{
"id": "1",
"name": "1s"
}, {
"id": "2",
"name": "T2s"
}]
}, {
"id": 2,
"name": "Secondary",
"cap": [{
"id": "1",
"name": "1s"
}, {
"id": "2",
"name": "T2s"
}]
}];
var ans = items.reduce(function(v, i) {
v[i.id] = i.cap;
return v;
}, {});
console.log(ans);

You can do this using a simple loop on the original array, and defining a new key: value pair into the object.
// Create the map
var map = {}
// For every 'item' within the 'items' array
items.forEach(item => {
// Map the item ID to the item.cap array
map[item.id] = item.cap
}
var items = [{
"id": 1,
"name": "Primary",
"cap": [{
"id": "1",
"name": "1s"
}, {
"id": "2",
"name": "T2s"
}]
}, {
"id": 2,
"name": "Secondary",
"cap": [{
"id": "1",
"name": "1s"
}, {
"id": "2",
"name": "T2s"
}]
}]
var map = {}
items.forEach(item => {
map[item.id] = item.cap
})
console.log(map)

Using ES6 Array.from() method.
var items = [{
"id": 1,
"name": "Primary",
"cap": [{
"id": "1",
"name": "1s"
}, {
"id": "2",
"name": "T2s"
}]
},{
"id": 2,
"name": "Secondary",
"cap": [{
"id": "1",
"name": "1s"
}, {
"id": "2",
"name": "T2s"
}
]
}];
var obj = {};
var res = Array.from(items, x => obj[x.id] = x.cap);
console.log(obj);

Create Parent and Child from JSON

I need to implement one collapsible diagram using d3. But first, it is necessary to parse my json file in order to create correct hierachies.
This is my json file example which I need transform:
{"likes":[{"_id":null,"category":"Music","link":"https://www.facebook.com/Brum","name":"Brum"},
{"_id":null,"category":"Music","link":"https://www.facebook.com/pan", "name":"Pan FM"},
{"_id":null,"category":"Music","link":"https://www.facebook.com/Example","name":"Example"},
{"_id":null,"category":"Books","link":"https://www.facebook.com/foo","name":"Foo"},
{"_id":null,"category":"Movies","link":"https://www.facebook.com/Titanic","name":"Titanic"}]}]}
And this the structure that I need extract from my json file:
var Data = [{
"name": "SocialProfiles",
"parent": "null",
"children": [{
"name": "Likes",
"parent": "SocialProfiles",
"children": [{
"name": "Music",
"parent": "Likes",
"children": [{
"parent": "Music",
"name": "Brum"
}, {
"parent": "Music",
"name": "Pan FM"
}, {
"parent": "Music",
"name": "Example"
}]
},
{
"name": "Books",
"parent": "Likes",
"children": [{
"parent": "Books",
"name": "Foo"
}, {
"parent": "Books",
"name": "Foo"
}]
}, {
"name": "Movies",
"parent": "Likes",
"children": [{
"parent": "Movies",
"name": "Titanic"
}]
}
]
}]
}];

Categories

Resources