Array like this:
const array = [
{
title: 'xx',
children: [
{
title: 'xxx',
children: [
{ title: 'xxx' }
]
}
]
}
]
The depth is 3, how i get depth use a function, or make array become this
const array = [
{
title: 'xx',
depth: 1,
children: [
{
title: 'xxx',
depth: 2,
children: [
{ title: 'xxx', depth: 3 }
]
}
]
}
]
Is there a better way in javascript?
You could use a simple recursive function to decorate the children at each level.
const array = [
{
title: 'Title 1',
children: [
{
title: 'Title 2',
children: [
{
title: 'Title 3'
}
]
}
]
}
];
const depthArray = depthDecorator(array);
console.log(depthArray);
function depthDecorator(array, depth = 1) {
return array.map((child) => Object.assign(child, {
depth,
children: depthDecorator(child.children || [], depth + 1)
}));
}
Related
I have an array of objects as the following
const sample = [
{ id: '1' },
{ id: '1.1' },
{ id: '1.1.1' },
{ id: '1.1.2' },
{ id: '1.2' },
{ id: '1.2.1' },
{ id: '1.2.1.1' },
{ id: '2' },
{ id: '2.1' }
];
I'd like to create a new array to include the children under their parent based on id property as the following
[
{
id: '1',
children: [
{
id: '1.1',
children: [
{ id: '1.1.1' },
{ id: '1.1.2' }
]
},
{
id: '1.2',
children: [
{
id: '1.2.1',
children: [{ id: '1.2.1.1' }]
}
]
}
]
},
{
id: '2',
children: [ { id: '2.1' } ]
}
]
I'm not sure how to do it or from where to start
Use a map to keep track of parents and children, then get the entries that are the roots as your result:
const data = [
{ id: '1' },
{ id: '1.1' },
{ id: '1.1.1' },
{ id: '1.1.2' },
{ id: '1.3' },
{ id: '1.3.1' },
{ id: '1.3.1.1' },
{ id: '2' },
{ id: '2.1' }
];
const map = new Map();
data.forEach(({ id }) => {
// exclude last bit to get parent id
const parent = id.split(".").slice(0, -1).join(".");
// our entry - needs to be like this since
// we want a reference to the same object
const entry = { id, children: [] };
// won't run if this is a root
if (parent)
// add child to parent
map.get(parent).children.push(entry);
// add to map
map.set(id, entry);
});
const result = Array.from(map)
// get roots - keys that only have one part
.filter(([key]) => key.split(".").length === 1)
// map to entry values
.map(([, value]) => value);
console.log(result);
.as-console-wrapper { max-height: 100% !important }
console.log(value)
{
List: [
{
id: 1
title: 'hi',
content: [
{
id: 1,
functionId: 11,
}
]
}
{
id: 2,
title: 'minsu',
content: []
}
]
}
I want to delete the object if there is no content array.
I am creating a variable called control and outputting it using the map function inside.
If the objects without content array have to be deleted by applying a filter condition, I don't know how to do it.
let control: any[any] = [
value.map((value: any) => {
return {
id: value?.id,
title: value?.title,
content: value?.content[0].functionId
}
})
]
But now, when I do console.log(control), an error occurs because the second object does not have content.
I want to delete the second object without content and print it like this.
console.log(control)
[
id: 1,
title: 'hi',
functionId: 11
]
First filter out the elements with 0 length content array or content array doesn't exists and then map to transform it
const List = [ { id: 1, title: 'hi', content: [ { id: 1, functionId: 11, } ] }, { id: 2, title: 'minsu', content: [] } ]
const control = List
.filter(({content}) => content?.length)
.map(({id,title,content:[{functionId}]}) => ({id,title,functionId}))
console.log(control)
Filter source list the way you need and reapply filtered list as new value
const sourceObject = {
list: [
{
id: 1,
title: 'hi',
content: [
{
id: 1,
functionId: 11,
}
]
},
{
id: 2,
title: 'minsu',
content: []
}
]
};
const filteredList = sourceObject.list.filter(element => (
typeof(element.content) === 'object' && element.content.length > 0
));
sourceObject.list = filteredList;
console.log(sourceObject);
I usually use reduce to solve problems like this
const items = [
{
id: 1,
title: 'hi',
content: [
{
id: 1,
functionId: 11,
}
]
},
{
id: 2,
title: 'minsu',
content: []
}
];
const result = items.reduce((rs, item) => {
const functionId = item?.content?.[0]?.functionId;
if (functionId) {
rs.push({
id: item.id,
title: item.title,
functionId
})
}
return rs;
}, [])
console.log(result)
I want walk through a nested array and need to find the target element in the array. An example path [2, 1] should return {text: 'More 2'} and path [2, 2, 1] should return { text: 'Other-2' }. I tried lodash functions but no luck yet.
My Nested array is given below:
var data = [
{ text: 'Item 1', },
{ text: 'Item 2', },
{
text: 'More',
children: [
{ text: 'More 1', children: [] },
{ text: 'More 2'},
{ text: 'Other', children:[ {text: 'Other-1'}, {text: 'Other-2'}, {text: 'Other-3'} ] }
]
}
];
Well, it's not a multi-dimensional array, nor is it a raggedy array-of-arrays. It's an array of objects (that happen contain other arrays of objects that happen to...).
Lodash's _.get() ought to do the trick for you:
const _ = require('lodash');
const data = data = [
{ text: 'Item 1', },
{ text: 'Item 2', },
{
text: 'More',
children: [
{ text: 'More 1', children: [] },
{ text: 'More 2'},
{ text: 'Other', children:[ {text: 'Other-1'}, {text: 'Other-2'}, {text: 'Other-3'} ] }
]
}
];
const widget = _.get(obj, '[2].children[1]');
console.log('widget',widget);
Or... roll your own. It's not that hard to walk the tree:
function select(data, ...path) {
let i = path.shift() ;
let node = data[i] ;
while ( node && (i=path.shift()) !== undefined ) {
node = node?.children?.[i] ;
}
return node ;
}
const widget = select( data, 2, 1 );
console.log(widget);
I have an nested array of objects with the following format
const arr1 = [
{
name: "internalcorp.com",
children: [
{
name: "internalcorp.com.child1",
children: [
{
name: "internalcorp.com.grandchild1",
children: []
},
{
name: "internalcorp.com.grandchild2",
children: []
}
]
},
{
name: "internalcorp.com.child2",
children: []
}
]
},
{
name: "internalcorpwebsite.com",
children: [
{
name: "internalcorpwebsite.com.child1",
children: []
}
]
}
];
Need to add an className property to the each array object based on its level. Like for example, parent should have level-0 group and children items should have level-x leaf where x is the level number relative to the main parent.
Output should look like
const result = [
{
name: "internalcorp.com",
className: "level-0 group",
children: [
{
name: "internalcorp.com.child1",
className: "level-1 leaf",
children: [
{
name: "internalcorp.com.grandchild1",
className: "level-2 leaf",
children: []
},
{
name: "internalcorp.com.grandchild2",
className: "level-2 leaf",
children: []
}
]
},
{
name: "internalcorp.com.child2",
className: "level-1 leaf",
children: []
}
]
},
{
name: "internalcorpwebsite.com",
className: "level-0 group",
children: [
{
name: "internalcorpwebsite.com.child1",
className: "level-1 leaf",
children: [],
}
],
}
];
Code that I have tried
const result = arr1.map((item,idx)=> {
if(item.children.length){
return {
...item,
className: `level${idx} leaf`
}
}
})
You can use the power of recursion:
function recursive(item, id) {
let returnedItem = item
if (item.children.length) {
returnedItem = {
...returnedItem,
children: returnedItem.children.map(childItem => recursive(childItem, id + 1))
}
}
if (0 === id) {
return { ...returnedItem, className: `level-0 group` }
}
return { ...returnedItem, className: `level-${id} leaf` }
}
const result = arr1.map(item => recursive(item, 0))
Here is what I have
[
{
typeProgramId: {
name: 'type1',
},
title: 'test1',
},
{
typeProgramId: {
name: 'type1',
},
subTypeProgramId: [{
name: 'sub1',
}],
title: 'test2',
},
{
typeProgramId: {
name: 'type2',
},
title: 'test3',
},
{
typeProgramId: {
name: 'type2',
},
subTypeProgramId: {
name: 'sub2',
},
title: 'test4',
}
]
First I want to group typeProgramId if the title have the same typeProgramId I want to push title into array by each typeProgramId but If the data have typeProgramId and subTypeProgram Id I want to group subtypeProgramId in typeProgramId too. if not empty subtypeProgramId I want to push it in array title inside subtypeProgram Id. I try to use lodash groupBy and many way but it still did not work.
Here is what I want
{
typeProgramId: [{
name: 'type1',
title: [
'test1',
],
subTypeProgramId: {
name: sub1,
title: [
'test2'
]
}
}, {
name: 'type2',
title: [
'test3',
],
subTypeProgramId: [{
name: sub1,
title: [
'test4'
]
}
}]
}
what I do now
let result = _.groupBy(getProgram, function(data) {
return data.typeProgramId
})
result = _.map(result, function(group, data) {
// I think in here I must groupBy subTypeProgramId again
// the data return all string not object after group
return {
typeProgramId: data,
titile: group,
}
})
Please check the below code. I have used reduce function of Array. It produces the expected result.
function updateMem(mem, prgIndex, val){
if(prgIndex < 0) {
mem.typeProgramId.push({});
prgIndex = mem.typeProgramId.length - 1;
}
mem.typeProgramId[prgIndex].name = val.typeProgramId.name;
if(val.subTypeProgramId){
mem.typeProgramId[prgIndex].subTypeProgramId = Object.assign({}, mem.typeProgramId[prgIndex].subTypeProgramId || {}, {"name" : val.subTypeProgramId.name, "title": []});
mem.typeProgramId[prgIndex].subTypeProgramId.title.push(val.title);
} else {
mem.typeProgramId[prgIndex].title = (mem.typeProgramId[prgIndex].title ? mem.typeProgramId[prgIndex].title : []);
mem.typeProgramId[prgIndex].title.push(val.title);
}
};
arr.reduce((mem, val) => {
var prgIndex = mem.typeProgramId.findIndex((p) => p.name === val.typeProgramId.name);
updateMem(mem, prgIndex, val);
return mem;
}, {typeProgramId: []});