We Keep Coding

How to transform nested object of objects into array of objects

Hi all I have the following code
the data that I want to transform.
const obj = {
numbers: {
label: "main numbers",
pageTitle: "Numbers",
key: "1",
items: {
firstNumber: {
label: "first number",
pageTitle: "first",
key: "first"
},
secondNumber: {
label: "second number",
pageTitle: "second",
key: "second"
}
}
},
letters: {
label: "main Letters",
pageTitle: "Letters",
key: "2",
items: {
firstLetter: {
label: "first Letter",
pageTitle: "first",
key: "first"
}
}
},
signs: {
label: "main sign",
pageTitle: "Sign",
key: "3"
}
};
In my obj variable I have 3 other objects
numbers object which has items property which includes 2 other objects.
letters object which has items property which includes only one object.
signs object.
I need to transform my obj to the following way.
[
{
label:"main numbers",
pageTitle:"Numbers",
key:1,
children: [{label,pageTitle,key},{label,pageTitle,key}]
},
{
label:"main Letters",
pageTitle:"Letters",
key:1,
children: [{label,pageTitle,key}]
},
{
label:"main sign",
pageTitle:"Sign",
key:1,
children: []
},
]
for that transformation, I wrote the following code.
const transformedData = Object.values(obj).map((menuitem) => menuitem);
const data = [];
transformedData?.map((x) => {
const newData = {};
newData.label = x.label;
newData.pageTitle = x.pageTitle;
newData.key = x.key;
newData.children = x?.Object?.values(items)?.map((el) => {
newData.children.label = el.label;
newData.children.pageTitle = el.pageTitle;
newData.children.key = el.key;
});
data.push(newData);
});
Everything was working, but for children instead of printing an array it prints undefined.
Please help me to resolve this issue.

I created a function for your case.
const convert = data =>
Object.values(data)?.map(x => ({
label: x.label,
pageTitle :x.pageTitle ,
key: x.pathname,
children: x.items
? Object.values(x.items || {}).map(el => ({ label: el.label,
key:el.pathname,pageTitle:el.pageTitle }))
: null,
}));
You can use like const items = convert(obj).

xdoesn't have Objects. Change it to:
newData.children = Object.values(x.items)?.map(/*...*/);

Is this what you're after?
const transformedData = Object.values(obj).map((menuitem) => menuitem);
const data = [];
transformedData?.map((x) => {
const newData = {};
newData.label = x.label;
newData.pageTitle = x.pageTitle;
newData.key = x.key;
if(x.hasOwnProperty('items')){
newData.children = Object.values(x.items).map((el) => {
const obj={
label:el.label,
pageTitle:el.pageTitle,
key:el.key
}
return obj
})};
data.push(newData);
});
console.log(data)
Your code return undefined because inside map you didn't return anything so newData.children was never populated with anything.
Also, I think accessing and assigning newData.children.label was problematic since there was no newData.children yet. So we declare a temp obj inside map and we return it
Lastly we need to check if items is a property that exists in the first place.

Add complex array of objects into another object

I have an source object obj that looks like this and an array input
const obj = {
name: "xyz",
filter: {
and: [
{
or: [
{
and: []
}
]
}
]
}
};
const input = ["test1\name1", "test2\name2"]
I need to push objects that are formed after spiltting input by \. After splitting, using left side of the string i need to form an object like this
{ type: "type1", value: whatever the left hand value}
Same for right side value
{ type: "type2", value: whatever the right hand value}
And these objects should be pushed to innermost and in the source object.
Expected output
{
name: "xyz",
filter: {
and: [
{
or: [
{
and: [
{ type: "type1", value: "test1" },
{ type: "type2", value: "name1" },
{ type: "type1", value: "test2" },
{ type: "type2", value: "name2" }
]
}
]
}
]
}
}
Code that I tried
function processResult(input) {
return {
name: "xyz",
filter: {
and: [
{
or: [
{
and: getUpdatedValues(input)
}
]
}
]
}
};
}
// I need the getUpdateValues to be processing the each item from the input array and then sending the two objects back after splitting
function getUpdatedValues(input){
const updated = input.map(item => {
const spilt = item.split("\\");
});
}

Assuming that the input array would include an escape character and could be like so: ["test1\\name1", "test2\\name2"], presented below is one possible way to achieve the desired objective.
Code Snippet
const transformMyArr = (myArr) => (
myArr.flatMap(
s => {
const [leftie, rightie] = s.split('\\');
return ([{
type: 'type1', value: leftie
}, {
type: 'type2', value: rightie
}]);
}
)
);
/* code explanation
// method to transform the array to required format
const transformMyArr = (myArr) => (
myArr.flatMap( // iterate over the array and remove nested-array in result
s => { // manipulate each array element
// "split" using "\\" and store the left-side as "type"
// and the rest as "value"
const [type, value] = s.split('\\');
// explicit return of an array with two objects per array elt
return ([{
type: 'type1', value: leftie
}, {
type: 'type2', value: rightie
}]);
}
) // implicit return from the "transformMyArr" method
);
*/
let myInputArr = ["test1\\name1", "test2\\name2"];
const myObj = {
name: "test",
filter: {
and: [{
or: [{
and: [...transformMyArr(myInputArr) ]
}]
}]
}
};
console.log('updated obj:\n', myObj);
.as-console-wrapper { max-height: 100% !important; top: 0 }
Explanation
Inline comments added to the snippet above.
EDIT
the left and right side value after splitting can be present in different items in the array too. How can I have only unique type1 , type2 objects inside final array
const myTransform2 = arr => {
// set-up empty arrays to hold left & right side elements
let leftEltArr = [], rightEltArr = [];
// iterate over the arg-array using ".forEach()"
arr?.forEach(
s => {
// split using "\\" to store left & right side elts
const [leftElt, rightElt] = s.split('\\');
// push elements into respective arrays
leftEltArr.push(leftElt);
rightEltArr.push(rightElt);
}
);
// return the result using left & right arrays
return (
([...new Set(leftEltArr)]) // remove dupes
.map(value => ({ type: 'type1', value })) // transform to required format
.concat( // concat result of similar operation on right-side
([...new Set(rightEltArr)])
.map(value => ({ type: 'type2', value }))
)
);
};
// updated sample input with 3rd elt which has duplicates
// on both left-side & right-side of the "\\"
let myInputArr = ["test1\\name1", "test2\\name2", "test1\\name2"];
const myObj = {
name: "test",
filter: {
and: [{
or: [{
and: [...myTransform2(myInputArr) ]
}]
}]
}
};
console.log('transformed object:\n', myObj);
.as-console-wrapper { max-height: 100% !important; top: 0 }

One way to do it. It's tricky because the input structure is so different to the output, and there is no reference for "type1"/"type2" other than the array element position.
const input = ["test1\\name1", "test2\\name2"];
function processResult(input) {
return {
name: "xyz",
filter: {
and: [
{
or: [
{
and: getUpdatedValues(input)
}
]
}
]
}
};
}
function getUpdatedValues(input){
return input.flatMap((item, i) => item.split("\\").map(val => ({[`type${i + 1}`]: val })));
}
console.log(processResult(input));

Find nested object by Id using for loop in Javascript

I'm trying to find a specific Object in a nested Object by id and wrote this function, which works like a charm:
const findNestedObjById = (tree, myFunction, id) => {
if(tree.attributes.node_id === id){
myFunction(tree)
} else{
if(tree.children){
tree.children.forEach(child => {
findNestedObjById(child, myFunction, id)
});
}
}
};
const doThat = (tree) => {
console.log("Got it: " + tree.name)
}
findNestedObjById(myObj, doThat, "0.1.2.1");
But i want to be able to get the "path" of the object (e.g. myObj.children[0].children[2]) (The children property of my object is an array)
So I wanted to rewrite the function using a fori loop instead of a foreach, so that I could later add the index of the array (saved in i of the fori loop at the time) to a path string.
So I wanted to start with this function:
const findWithFori = (tree, myFunction, id) => {
if(tree.attributes.node_id === id){
myFunction(tree)
} else{
if(tree.children){
for (let i = 0; i < tree.length; i++) {
const child = tree.children[i];
findNestedObjById(child, myFunction, id)
}
}
}
};
But it doenst work, it's able to locate the object by id, if the inital myObj already has the right id, but it doesn't find nested objects, like the first function does and I don't understand why.
If it helps answerign the question, myObj looks like this btw.:
const myObj = {
name: "Mein zweiter Baum",
attributes: {
node_id: "0"
},
children: [
{
name: "Lorem",
attributes: {
node_id: "0.1",
done: true
},
children: [
{
name: "Ipsum",
attributes: {
node_id: "0.1.1",
done: true
},
children: [
{
name: "Dolor",
attributes: {
node_id: "0.1.1.1",
done: false
}
}
]
},
{
name: "Sit",
attributes: {
node_id: "0.1.2",
done: false
},
children: [
{
name: "Anet",
attributes: {
node_id: "0.1.2.1"
}
}
]
}
]
}
]
};

You could return the indices.
If an item is found return an empty array, or undefined. Inside of some get the result of children and if not undefined add the actual index in front of the array.
const
findNestedObjById = (tree, id, callback) => {
if (tree.attributes.node_id === id) {
callback(tree);
return [];
}
if (tree.children) {
let path;
tree.children.some((child, index) => {
path = findNestedObjById(child, id, callback);
if (path) {
path.unshift(index);
return true;
}
});
return path;
}
},
doThat = tree => {
console.log("Got it: " + tree.name);
},
data = { name: "Mein zweiter Baum", attributes: { node_id: "0" }, children: [{ name: "Lorem", attributes: { node_id: "0.1", done: true }, children: [{ name: "Ipsum", attributes: { node_id: "0.1.1", done: true }, children: [{ name: "Dolor", attributes: { node_id: "0.1.1.1", done: false } }] }, { name: "Sit", attributes: { node_id: "0.1.2", done: false }, children: [{ name: "Anet", attributes: { node_id: "0.1.2.1" } }] }] }] }
console.log(findNestedObjById(data, "0.1.2.1", doThat)); // [0, 1, 0]
.as-console-wrapper { max-height: 100% !important; top: 0; }

I would do this by building atop some reusable functions. We can write a function that visits a node and then recursively visits all its children's nodes. To use this for a find, however, we want to be able to stop once its found, so a generator function would make sense here. We can extend a basic version of this 1 to allow each stop to include not only the values, but also their paths.
Then we can layer on a generic find-path-by-predicate function, testing each node it generates until one matches the predicate.
Finally we can easily write a function using this to search by node_id. It might look like this:
function * visit (value, path = []) {
yield {value, path}
for (let i = 0; i < (value .children || []) .length; i ++) {
yield * visit (value .children [i], path .concat (i))
}
}
const findDeepPath = (fn) => (obj) => {
for (let o of visit (obj)) {
if (fn (o .value)) {return o .path}
}
}
const findPathByNodeId = (id) =>
findDeepPath (({attributes: {node_id}}) => node_id === id)
const myObj = {name: "Mein zweiter Baum", attributes: {node_id: "0"}, children: [{name: "Lorem", attributes: {node_id: "0.1", done: true}, children: [{name: "Ipsum", attributes: {node_id: "0.1.1", done: true}, children: [{name: "Dolor", attributes: {node_id: "0.1.1.1", done: false}}]}, {name: "Sit", attributes: {node_id: "0.1.2", done: false}, children: [{name: "Anet", attributes: {node_id: "0.1.2.1"}}]}]}]}
console .log (findPathByNodeId ('0.1.2.1') (myObj)) //=> [0, 1, 0]
If we want to return the node and the path, it's simply a matter of replacing
if (fn (o .value)) {return o .path}
with
if (fn (o .value)) {return o}
and we would get back something like:
{
value: {attributes: {node_id: "0.1.2.1"}, name: "Anet"},
path: [0, 1, 0],
}
1 A basic version for nodes without their paths might look like this:
function * visit (obj) {
yield obj
for (let child of (obj .children || [])) {
yield * visit (child)
}
}
and we might write a generic search for values matching a predicate with
const findDeep = (fn) => (obj) => {
for (let o of visit (obj)) {
if (fn (o)) {return o}
}
}
Layering in the path handling adds some complexity, but not a great deal.

Retain array structure when filtering nested array

My brain froze with this advanced filtering. This task has exceeded my basic knowledge of filter, map etc.
Here I have an array with nested objects with array:
const DATA = [
{
title: 'Spongebob',
data: [
{ id: 1, name: 'Mr Crabs' },
{ id: 2, name: 'Sandy' }
]
},
{
title: 'Dragon Balls Z',
data: [
{ id: 1, name: 'GoKu' },
{ id: 2, name: 'Zamasu' }
]
}
];
You may have seen this sort of style if you've worked with React Native (RN). This question is not for RN. I need to perform a filter on the name property in the nested array and when I get a match, I must return the format as the DATA variable.
const handleFiltering = (value) => {
const _value = value.toLowerCase();
const results = DATA.map(o => {
return o.data.filter(o => o.name.toLowerCase().indexOf(_value) != -1)
});
console.log(results);
};
My limited knowledge of deep filtering returns the basic filtering for the data array but need to retain the structure for DATA. The expected results I'd expect:
// I'm now querying for "ZAMASU"
const handleFiltering = (value='ZAMA') => {
const _value = value.toLowerCase();
const results = DATA.map(o => {
return o.data.filter(o => o.name.toLowerCase().indexOf(_value) != -1)
});
// console.log(results) should now be
// [
// {
// title: 'Dragon Balls Z',
// data: [
// { id: 2, name: 'Zamasu' }
// ]
// }
// ];
};
What comes to mind is the use of {...DATA, something-here } but my brain has frozen as I need to get back the title property. How to achieve this, please?

Another solution would be first use filter to find only objects containing the name in data passed through the argument, subsequently mapping data.
Here is your adjusted filter method
const handleFiltering = (value) => {
const _value = value.toLowerCase();
const results = DATA.filter((obj) =>
obj.data.some((character) => character.name.toLowerCase() === _value)
).map((obj) => ({
title: obj.title,
data: obj.data.filter(
(character) => character.name.toLowerCase() === _value
),
}));
console.log(results);
};

You can use reduce method of array. First find out the object inside data array and then add that to accumulator array as new entry by preserving the original structure.
const DATA = [
{
title: 'Spongebob',
data: [
{ id: 1, name: 'Mr Crabs', where: 'tv' },
{ id: 2, name: 'Sandy' }
]
},
{
title: 'Dragon Balls Z',
data: [
{ id: 1, name: 'GoKu' },
{ id: 2, name: 'Zamasu' }
]
}
];
let handleFiltering = (value='tv') => {
return DATA.reduce((acc,d) => {
let obj = d.data.find(a => a.name?.toLowerCase().includes(value.toLowerCase())
|| a.where?.toLowerCase().includes(value.toLowerCase()));
obj ? acc.push({...d, data:[obj]}) : null;
return acc;
}, []);
}
let result = handleFiltering();
console.log(result);

tree from array of dot-separated strings

I have an array of dot delimited strings which looks like the following
data = [
'Europe.UK.London.TrafalgarSq',
'Europe.UK.London.HydePark',
'Europe.UK.London.OxfordStreet',
'Europe.UK.London.City.Bank',
'Europe.France.Paris',
'Europe.France.Bordeaux'},
]
and I want to build the following tree of of nested objects. In case it matters, this is for a leaflet map where the Tree Layers Control is going to be used
var tree = {
label: 'Places',
selectAllCheckbox: 'Un/select all',
children: [
{
label: 'Europe',
selectAllCheckbox: true,
children: [
{
label: 'Europe.UK',
selectAllCheckbox: true,
children: [
{
label: 'Europe.UK.London',
selectAllCheckbox: true,
children: [
{label: 'Europe.UK.London.TrafalgarSq'},
{label: 'Europe.UK.London.HydePark'},
{label: 'Europe.UK.London.OxfordStreet'},
{
label: 'Europe.UK.London.City',
selectAllCheckbox: true,
children: [
{label: 'Europe.UK.London.City.Bank'},
]
},
]
},
{
label: 'Europe.France',
selectAllCheckbox: true,
children: [
{label: 'Europe.France.Paris'},
{label: 'Europe.France.Bordeaux'},
]
},
]
}
]
}
]
};
How do I do this tree please?

You could use a mapper object which has partial paths (or label) as key and a reference to the object in the tree as it's value. split the path at . and reduce the array with tree as the initialValue. If the path doesn't exist yet, add it to mapper and tree. Return the nested object in each iteration.
const data = ["Europe.UK.London.TrafalgarSq","Europe.UK.London.HydePark","Europe.UK.London.OxfordStreet","Europe.UK.London.City.Bank","Europe.France.Paris","Europe.France.Bordeaux"],
mapper = {},
tree = {
label: 'Places',
selectAllCheckbox: 'Un/select all',
children: []
}
for (const str of data) {
let splits = str.split('.'),
label = '';
splits.reduce((parent, place) => {
if (label)
label += `.${place}`
else
label = place
if (!mapper[label]) {
const o = { label };
mapper[label] = o;
parent.selectAllCheckbox = true
parent.children = parent.children || [];
parent.children.push(o)
}
return mapper[label];
}, tree)
}
console.log(tree)

You could an iterative approach with a reduceing of the nested objects.
var data = ['Europe.UK.London.TrafalgarSq', 'Europe.UK.London.HydePark', 'Europe.UK.London.OxfordStreet', 'Europe.UK.London.City.Bank', 'Europe.France.Paris', 'Europe.France.Bordeaux'],
children = data.reduce((r, s) => {
s.split('.').reduce((q, _, i, a) => {
q.selectAllCheckbox = true;
var label = a.slice(0, i + 1).join('.'),
temp = (q.children = q.children || []).find(o => o.label === label);
if (!temp) q.children.push(temp = { label });
return temp;
}, r);
return r;
}, { children: [] }).children,
tree = { label: 'Places', selectAllCheckbox: 'Un/select all', children };
console.log(tree);
.as-console-wrapper { max-height: 100% !important; top: 0; }