I have a nested array of objects and want to get only the child property elements of an array with the title of the parent element prepended to the title in the child. This is just an example and the actual data will include a unique children property in separate indices in the array.
I would like to implement flatMap in my solution instead of using flattenDeep and map from lodash. Please advice.
const headers = [{
"id": "name1",
"title": "Name 1",
"children": [{
"title": "Children 1",
"child": [{
"title": "Child 1",
"onClick": "child1Click"
}, {
"title": "Child 2",
"onClick": "child2Click"
}]
}, {
"title": "CHildren 2",
"child": [{
"title": "Child 3",
"id": "child3Click"
}, {
"title": "Child 4",
"id": "child4Click"
}]
}]
}, {
"id": "name2",
"title": "Name 2",
"children": [{
"title": "Children 3",
"child": [{
"title": "Child 5",
"onClick": "child5Click"
}, {
"title": "Child 6",
"onClick": "child6Click"
}]
}, {
"title": "CHildren 4",
"child": [{
"title": "Child 7",
"id": "child7Click"
}, {
"title": "Child 8",
"id": "child8Click"
}]
}]
}, {
"id": "name3",
"title": "Name 3"
}, {
"id": "name4",
"title": "Name 4"
}]
console.log(_.flattenDeep(_.map(_.flattenDeep(_.compact(_.map(headers, item => item.children))), item => _.map(item.child, child => {
return {
...child,
title: `${item.title} ${child.title}`
}
}))))
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
The output I expect is
[
{
"title": "Children 1 Child 1",
"onClick": "child1Click"
},
{
"title": "Children 1 Child 2",
"onClick": "child2Click"
},
{
"title": "CHildren 2 Child 3",
"id": "child3Click"
},
{
"title": "CHildren 2 Child 4",
"id": "child4Click"
},
{
"title": "Children 3 Child 5",
"onClick": "child5Click"
},
{
"title": "Children 3 Child 6",
"onClick": "child6Click"
},
{
"title": "CHildren 4 Child 7",
"id": "child7Click"
},
{
"title": "CHildren 4 Child 8",
"id": "child8Click"
}
]
Any help is greatly appreciated. Thanks
You can solve this with just reduce and two inner forEach loops for children and child.
const headers = [{"id":"name1","title":"Name 1","children":[{"title":"Children 1","child":[{"title":"Child 1","onClick":"child1Click"},{"title":"Child 2","onClick":"child2Click"}]},{"title":"CHildren 2","child":[{"title":"Child 3","id":"child3Click"},{"title":"Child 4","id":"child4Click"}]}]},{"id":"name2","title":"Name 2","children":[{"title":"Children 3","child":[{"title":"Child 5","onClick":"child5Click"},{"title":"Child 6","onClick":"child6Click"}]},{"title":"CHildren 4","child":[{"title":"Child 7","id":"child7Click"},{"title":"Child 8","id":"child8Click"}]}]},{"id":"name3","title":"Name 3"},{"id":"name4","title":"Name 4"}]
const result = headers.reduce((r, {children}) => {
children && children.forEach(({title: pTitle, child}) => {
child && child.forEach(({title, ...rest}) => r.push({
title: `${pTitle} ${title}`,
...rest
}))
})
return r;
}, [])
console.log(result)
Related
I have an array of objects with duplicates:
[
{
"code": "d1",
"title": "Title 1"
},
{
"code": "d2",
"title": "Title 2"
},
{
"code": "d3",
"title": "Title 3"
},
{
"code": "d4",
"title": "Title 4"
},
{
"code": "d4",
"title": "Title 4"
},
{
"code": "d3",
"title": "Title 3"
}
]
So i want the output to be having only the once which doesn't have duplicates included like below:
[
{
"code": "d1",
"title": "Title 1"
},
{
"code": "d2",
"title": "Title 2"
}
]
Any help would be appreciated, Thanks!
Find unique's values in an array.
const ressult = YourArray.filter(
(value, index, array) => array.findIndex((v) => v.code === value.code) === index
);
Here is one way of doing it:
const products=[
{
"code": "d1",
"title": "Title 1"
},
{
"code": "d2",
"title": "Title 2"
},
{
"code": "d3",
"title": "Title 3"
},
{
"code": "d4",
"title": "Title 4"
},
{
"code": "d4",
"title": "Title 4"
},
{
"code": "d3",
"title": "Title 3"
}
];
const res=Object.entries(products.reduce((a,c)=>{
(a[c.code+"|"+c.title]??=[]).push(c);
return a;
},{})).reduce((a,[k,v])=>{
if(v.length==1) a.push(v[0]);
return a;
},[]);
console.log(res);
My approach involves two .reduce() loops:
In the first one I generate an object that collects all elements of the original array behind a compound key made up of the properties of the elements.
the object is then converted into an array again with Object.entries()
and in a second .reduce() only those elements will be collected (i. e.: their first element) into the target array that have a length of 1
let val = [
{
"code": "d1",
"title": "Title 1"
},
{
"code": "d2",
"title": "Title 2"
},
{
"code": "d3",
"title": "Title 3"
},
{
"code": "d4",
"title": "Title 4"
},
{
"code": "d4",
"title": "Title 4"
},
{
"code": "d3",
"title": "Title 3"
}
];
let distinctVal = getDistincts(val);
function getDistincts(val){
let obj={};
for (let i = 0; i < val.length; i++) {
obj[`${val[i]["code"]}`]=val[i]["title"];
}
return obj;
}
console.log(distinctVal);
I have two arrays of objects that I need to combine where the nested ID (connect.id) of the second array matches the id of the first but can't see how to do it
can anyone help?
const arr1 = [
{ "id": 7619209572755, "title": "Title 1" },
{ "id": 7619209157372, "title": "Title 2" },
{ "id": 7619209921625, "title": "Title 3" }
];
const arr2 = [
{
"id": 7619217289192,
"connect": [
{ "id": 7619209157372, "title": "Title 1" }
],
"value": "1"
},
{
"id": 7619217242206,
"connect": [
{ "id": 7619209921625, "title": "Title 2" }
],
"value": "2"
}
];
const expectedResult = [
{ "id": 7619209572755, "title": "Title 1" },
{ "id": 7619209157372, "title": "Title 2", "value": "1" },
{ "id": 7619209921625, "title": "Title 3", "value": "2" }
]
Using Array#reduce, iterate over arr2 to map every connect element's id with the its object's value in a Map
Using Array#map, iterate over arr1, if an element's id is in the map, set its value
const
arr1 = [ { "id": 7619209572755, "title": "Title 1" }, { "id": 7619209157372, "title": "Title 2" }, { "id": 7619209921625, "title": "Title 3" } ],
arr2 = [
{
"id": 7619217289192,
"connect": [ { "id": 7619209157372, "title": "Title 1" } ],
"value": "1",
},
{
"id": 7619217242206,
"connect": [ { "id": 7619209921625, "title": "Title 2" } ],
"value": "2",
}
];
const connectValueMap = arr2.reduce((map, { connect = [], value}) => {
connect.forEach(({ id }) => map.set(id, value));
return map;
}, new Map);
const merged = arr1.map(e => {
const value = connectValueMap.get(e.id);
if(value) e.value = value;
return e;
});
console.log(merged);
I have the following array:
const items = [
{
"id": 1,
"name": "Menu 1",
"content": [
{
"id": 2,
"name": "Submenu 1 OF 1",
"url": "teste"
}
]
},
{
"id": 3,
"name": "Menu 2",
"content": [
{
"id": 4,
"name": "Submenu 1 OF 2",
"url": "teste"
},
{
"id": 5,
"name": "Submenu 2 OF 2",
"content": [
{
"id": 6,
"name": "Sub submenu 1 OF 2",
"url": "teste"
},
{
"id": 7,
"name": "Sub submenu 2 OF 2",
"url": "teste"
},
]
}
]
}
]
I need a function that given the id gets the closest parent object. For example, if I give the id 2 it returns {"id: 1, "name": "Menu 1", "content": [...]}. If I give the id 6 it returns {"id": 5, "name": "Submenu 2 OF 2", content: [...]}.
I have tried but i can only get the top-level parent and not the closest one.
EDIT: the code that i have tested so far:
let findDeep = function(data, id) {
return data.find(function(e) {
if(e.id == id) return e;
else if(e.content) return findDeep(e.content, id);
}
})
You can use a recursive depth-first search:
function findParent(items, id, parent=null) {
for (let item of items) {
let res = item.id === id ? parent
: item.content && findParent(item.content, id, item);
if (res) return res;
}
}
// demo: find parent of id=6 in example tree:
const items = [{"id": 1,"name": "Menu 1","content": [{"id": 2,"name": "Submenu 1 OF 1","url": "teste"}]},{"id": 3,"name": "Menu 2","content": [{"id": 4,"name": "Submenu 1 OF 2","url": "teste"},{"id": 5,"name": "Submenu 2 OF 2","content": [{"id": 6,"name": "Sub submenu 1 OF 2","url": "teste"},{"id": 7,"name": "Sub submenu 2 OF 2","url": "teste"},]}]}]
console.log(findParent(items, 6));
You can do this with a recursive function that checks each child and returns the parent if the id matches:
const findParent = (id, obj) => {
for (const child of obj.content) {
if (child.id === id) return obj;
if (!child.content) continue;
const found = findParent(id, child);
if (found) return found;
}
return undefined;
}
const items = {content: [{
"id": 1,
"name": "Menu 1",
"content": [{
"id": 2,
"name": "Submenu 1 OF 1",
"url": "teste"
}]
},
{
"id": 3,
"name": "Menu 2",
"content": [{
"id": 4,
"name": "Submenu 1 OF 2",
"url": "teste"
},
{
"id": 5,
"name": "Submenu 2 OF 2",
"content": [{
"id": 6,
"name": "Sub submenu 1 OF 2",
"url": "teste"
},
{
"id": 7,
"name": "Sub submenu 2 OF 2",
"url": "teste"
},
]
}
]
}
]
}
console.log(findParent(2, items));
console.log(findParent(6, items));
I need to transform an array of object into new array based on the parent_id's in the list. In the below given input we have a parent_id which tells use parent of the given object.
Input:
[
{
"id": 1,
"title": "Item 1",
"parent_id": null
},
{
"id": 2,
"title": "Item 2",
"parent_id": 1
},
{
"id": 3,
"title": "Item 3",
"parent_id": 2
},
{
"id": 4,
"title": "Item 4",
"parent_id": null
},
{
"id": 5,
"title": "Item 5",
"parent_id": null
},
{
"id": 6,
"title": "Item 6",
"parent_id": 5
},
{
"id": 7,
"title": "Item 7",
"parent_id": 6
},
{
"id": 8,
"title": "Item 8",
"parent_id": 6
}
]
Desired Output:
[
{
"id": 1,
"title": "Item 1",
"parent_id": null,
"child": [{
"id": 2,
"title": "Item 2",
"parent_id": 1,
"child": [{
"id": 3,
"title": "Item 3",
"parent_id": 2
}]
}]
},
{
"id": 4,
"title": "Item 4",
"parent_id": null
},
{
"id": 5,
"title": "Item 5",
"parent_id": null,
"child": [{
"id": 6,
"title": "Item 6",
"parent_id": 5,
"child": [{
"id": 7,
"title": "Item 7",
"parent_id": 6
}, {
"id": 8,
"title": "Item 8",
"parent_id": 6
}]
}]
}
]
In the desired output I have created a nested array of object where each object will hold its children.
Can someone please suggest how we can do this in javascript?
Just take a loop and build a tree with the help of an object.
var data = [{ id: 1, title: "Item 1", parent_id: null }, { id: 2, title: "Item 2", parent_id: 1 }, { id: 3, title: "Item 3", parent_id: 2 }, { id: 4, title: "Item 4", parent_id: null }, { id: 5, title: "Item 5", parent_id: null }, { id: 6, title: "Item 6", parent_id: 5 }, { id: 7, title: "Item 7", parent_id: 6 }, { id: 8, title: "Item 8", parent_id: 6 }],
tree = function (data, root) {
var t = {};
data.forEach(o => {
Object.assign(t[o.id] = t[o.id] || {}, o);
t[o.parent_id] = t[o.parent_id] || {};
t[o.parent_id].children = t[o.parent_id].children || [];
t[o.parent_id].children.push(t[o.id]);
});
return t[root].children;
}(data, null);
console.log(tree);
.as-console-wrapper { max-height: 100% !important; top: 0; }
I have a scenario were I need to iterate through each parent/child array in an object.
Each Grandparents can have multiple parents, in same fashion each parent can have multiple childs, each child can have multiple subChilds and so on.
I need to check if type is "parent" or "child" while iterating and then push name property to an array as mentioned in expected output.
Input Object:
var inputObject = {
"id": 1,
"name": "Grand Parent 1",
"type": "GrandParent",
"childType": [
{
"id": 2,
"type": "Parent",
"childType": [
{
"id": 3,
"type": "Child",
"childType": [],
"name": "Child 11"
},
{
"id": 4,
"type": "Child",
"childType": [],
"name": "Child 12"
}
],
"name": "Parent 1"
},
{
"id": 5,
"type": "Parent",
"childType": [
{
"id": 6,
"type": "Child",
"childType": [],
"name": "Child 21"
}
],
"name": "Parent 2"
},
{
"id": 7,
"type": "Parent",
"childType": [
{
"id": 8,
"type": "Child",
"childType": [],
"name": "Child 31"
}
],
"name": "Parent 3"
}
]
}
Code Tried:
function handleData({childType, ...rest}){
const res = [];
res.push(rest.name);
if(childType){
if(rest.type == "Child")
res.push(...handleData(childType));
}
return res;
}
const res = handleData(inputObject);
Expected Output:
If type selected is "Parent"
["Parent 1", "Parent 2, Parent 3"]
if type selected is "Child"
["Child 11", "Child 12", "Child 21", "Child 31"]
You can do a recursive function that uses flatMap():
const obj = {id:1,name:"Grand Parent 1",type:"GrandParent",childType:[{id:2,type:"Parent",childType:[{id:3,type:"Child",childType:[],name:"Child 11"},{id:4,type:"Child",childType:[],name:"Child 12"}],name:"Parent 1"},{id:5,type:"Parent",childType:[{id:6,type:"Child",childType:[],name:"Child 21"}],name:"Parent 2"},{id:7,type:"Parent",childType:[{id:8,type:"Child",childType:[],name:"Child 31"}],name:"Parent 3"}]};
const get = (o, t) => o.type === t ? [o.name] : o.childType.flatMap(c => get(c, t));
console.log(get(obj, 'GrandParent'));
console.log(get(obj, 'Parent'));
console.log(get(obj, 'Child'));
You can do that using recursion.
Steps:
Create a wrapper function in which you declare result array.
Inside that make a wrapper function create a function which would be called recursively
Check if type matches the given type add the name of object to result
Then check if elements exists in its childType. If yes yes then call function on each each of its element.
var inputObject = { "id": 1, "name": "Grand Parent 1", "type": "GrandParent", "childType": [ { "id": 2, "type": "Parent", "childType": [ { "id": 3, "type": "Child", "childType": [], "name": "Child 11" }, { "id": 4, "type": "Child", "childType": [], "name": "Child 12" } ], "name": "Parent 1" }, { "id": 5, "type": "Parent", "childType": [ { "id": 6, "type": "Child", "childType": [], "name": "Child 21" } ], "name": "Parent 2" }, { "id": 7, "type": "Parent", "childType": [ { "id": 8, "type": "Child", "childType": [], "name": "Child 31" } ], "name": "Parent 3" } ] }
function handleData(obj,type){
let res = [];
function recursive(obj){
if(type === obj.type) res.push(obj.name);
if(obj.childType.length){
obj.childType.forEach(a => recursive(a));
}
}
recursive(obj)
return res;
}
console.log(handleData(inputObject,"Child"))
console.log(handleData(inputObject,"Parent"))
Recursion is elegant but you could use es6 to do it , if the object childType was very large, recursion might not be applicable (stack overflow), here is a solution using reduce,
function getType({childType}, type) {
return childType.reduce( (acc, {type: objectType, name}) => {
if (objectType === type){
acc.push(name)
}
return acc
}, [])
}
You can solve this problem using recursion. You can try on this way !
var inputObject = {
"id": 1,
"name": "Grand Parent 1",
"type": "GrandParent",
"childType": [
{
"id": 2,
"type": "Parent",
"childType": [
{
"id": 3,
"type": "Child",
"childType": [],
"name": "Child 11"
},
{
"id": 4,
"type": "Child",
"childType": [],
"name": "Child 12"
}
],
"name": "Parent 1"
},
{
"id": 5,
"type": "Parent",
"childType": [
{
"id": 6,
"type": "Child",
"childType": [],
"name": "Child 21"
}
],
"name": "Parent 2"
},
{
"id": 7,
"type": "Parent",
"childType": [
{
"id": 8,
"type": "Child",
"childType": [],
"name": "Child 31"
}
],
"name": "Parent 3"
}
]
};
var resultValues = [];
function getResult(inputObject, propertyName, propertyValue) {
for (var objectProperty in inputObject) {
if (objectProperty == propertyName && inputObject[objectProperty] == propertyValue) {
resultValues.push(inputObject['name']);
console.log(resultValues);
} else {
if (objectProperty == 'childType') {
inputObject[objectProperty].forEach(function (element) {
getResult(element, propertyName, propertyValue)
});
}
}
}
//console.log(resultValues);
}
getResult(inputObject, 'type', 'GrandParent');
getResult(inputObject, 'type', 'Parent');
getResult(inputObject, 'type', 'Child');