Develop Reference

I want to turn a JavaScript array into a nested object form

I want to convert an array with this shape into a nested object shape.
I've been thinking about it for hours, but I can't come up with a proper way. Any good way?
before
let files2 = [
"folder/empty_file.txt",
"folder/inner file.txt",
"user16.txt",
"reagjjjd.md",
"folder/folder2/hi.txt",
];
after
let files = [
{ folder: [{ folder2: ["hihi.txt"] }, "empty_file.txt", "inner file.txt"] },
"user16.txt",
"reagjjjd.md",
];
I would appreciate any help or guidance here. Thanks!

Here is a solution that can convert arbitrary folder depth into a tree according to your requirement. It basically builds the tree through text splitting and recursion, which works but is likely not ideal. I wish it were a little simpler, but hopefully it helps if no-one else offers a better solution.
// const path = require("path");
// const sep = path.sep;
const sep = "/";
const input = [
"folder/empty_file.txt",
"folder/inner file.txt",
"user16.txt",
"reagjjjd.md",
"folder/folder2/hi.txt",
];
const get_files = (list) => {
return list.filter((s) => s.length < 2).map((s) => s[0]);
};
const get_folder_names = (list) => {
return [...new Set(list.filter((s) => s.length > 1).map((s) => s[0]))];
};
const get_folder_contents = (list, folder) => {
return list
.filter((s) => s.length > 1)
.filter((s) => s[0] == folder)
.map((s) => s.slice(1));
};
const get_folders = (list) => {
return get_folder_names(list).map((folder) => {
return { [folder]: build_tree(get_folder_contents(list, folder)) };
});
};
function build_tree(list) {
const tree = [];
tree.push(...get_files(list));
tree.push(...get_folders(list));
return tree;
}
const list = input.map((s) => s.split(sep));
const output = build_tree(list);
console.log("Tree:", JSON.stringify(output));

newArr by your structure .
newArr1 by my structure suggest
let files = [
"folder/empty_file.txt",
"folder/inner file.txt",
"user16.txt",
"reagjjjd.md",
"folder/folder2/hi.txt",
]
let newArr = files.reduce((res, path) => {
let convertArr = path.split("/")
if(convertArr.length < 2) return [...res, path]
let parent = res
let treePath = convertArr.forEach( (ele, key) => {
let temParent = parent.find(el => typeof el === 'object' && el.hasOwnProperty(ele))
if (temParent) {
parent = temParent[ele]
} else {
let tmp = key === convertArr.length-1 ? ele : {[ele] : []}
parent.push(tmp)
parent = tmp[ele]
}
})
return res
}, [])
let files2 = [
"folder/empty_file.txt",
"folder/inner file.txt",
"user16.txt",
"reagjjjd.md",
"folder/folder2/hi.txt",
]
let newArr1 = files2.reduce((res, path) => {
let convertArr = path.split("/")
let parent = res
let treePath = convertArr.forEach( ele => {
let temParent = parent.find(el => el.path === ele)
if (!temParent) {
let tmp = {path: ele, children: []}
parent.push(tmp)
parent = tmp.children
} else {
parent = temParent.children
}
})
return res
}, [])
console.log(newArr)
console.log(newArr1)
I think the array structure should follow this format for ease of use :
[
{
path : 'folder',
children : [
{
path : 'empty_file.txt',
children : []
},
{
path : 'inner file.txt',
children : []
},
{
path : 'folder2',
children : [
{
path : 'hi.txt',
children : []
}
]
},
]
},
{
path : 'user16.txt',
children : []
},
{
path : 'reagjjjd.md',
children : []
}
]

Node.js - How to merge objects inside an array based on condition?

In Node.js, I have 3 sets of data like
[
{
"userId":"54c7f3ef-64d4-40de-8100-d2ec81e8aaf3",
"dailyData":159392.235451,
"dailyDataInUSC":255.284807
}
]
and
[
{
"userId":"54c7f3ef-64d4-40de-8100-d2ec81e8aaf3",
"monthlyData":159392.235451,
"monthlyDataInUSC":255.284807
},
{
"userId":"23fs6fds3-34k4-17de-3123-d2ec81e8aaf3",
"monthlyData":349392.455451,
"monthlyDataInUSC":655.234807
}
]
and
[
{
"userId":"54c7f3ef-64d4-40de-8100-d2ec81e8aaf3",
"threeMonthsData":159392.235451,
"threeMonthsDataInUSC":255.284807
},
{
"userId":"23fs6fds3-34k4-17de-3123-d2ec81e8aaf3",
"threeMonthsData":349392.455451,
"threeMonthsDataInUSC":655.234807
},
{
"userId":"34sdf34-67j4-54nd-6763-d2ec81e8aaf3",
"threeMonthsData":6789392.455451,
"threeMonthsDataInUSC":905.655807
}
]
How can I combine this to one object based on userId(filter) inside an array.
Eg, output should be like
[
{
"userId":"54c7f3ef-64d4-40de-8100-d2ec81e8aaf3",
"dailyData":159392.235451,
"dailyDataInUSC":255.284807,
"monthlyData":159392.235451,
"monthlyDataInUSC":255.284807,
"threeMonthsData":159392.235451,
"threeMonthsDataInUSC":255.284807
}
]
Please help me to achieve this.

A combination of spread, reduce and findIndex can be used to solve the problem.
Combine the original arrays into a single array using the spread operator.
Use reduce to group the elements by key (in this case userId)
Something like this :
const dailyData = [{"userId":"54c7f3ef-64d4-40de-8100-d2ec81e8aaf3","dailyData":159392.235451,"dailyDataInUSC":255.284807}];
const monthlyData = [{"userId":"54c7f3ef-64d4-40de-8100-d2ec81e8aaf3","monthlyData":159392.235451,"monthlyDataInUSC":255.284807}, {"userId":"23fs6fds3-34k4-17de-3123-d2ec81e8aaf3","monthlyData":349392.455451,"monthlyDataInUSC":655.234807}]
const triMonthlyData = [{"userId":"54c7f3ef-64d4-40de-8100-d2ec81e8aaf3","threeMonthsData":159392.235451,"threeMonthsDataInUSC":255.284807}, {"userId":"23fs6fds3-34k4-17de-3123-d2ec81e8aaf3","threeMonthsData":349392.455451,"threeMonthsDataInUSC":655.234807}, {"userId":"34sdf34-67j4-54nd-6763-d2ec81e8aaf3","threeMonthsData":6789392.455451,"threeMonthsDataInUSC":905.655807}]
const combinedData = [...dailyData, ...monthlyData, ...triMonthlyData].reduce((mergedResult, curElement) => {
let matchingElementIdx = mergedResult.findIndex(ele => ele.userId === curElement.userId);
if (matchingElementIdx !== -1) {
mergedResult[matchingElementIdx] = {...mergedResult[matchingElementIdx], ...curElement};
} else {
mergedResult = [...mergedResult, curElement];
}
return mergedResult;
}, []);
console.log(combinedData);

const aa = () => {
let aa = [
{
userId: "54c7f3ef-64d4-40de-8100-d2ec81e8aaf3",
dailyData: 159392.235451,
dailyDataInUSC: 255.284807
}
];
let bb = [
{
userId: "54c7f3ef-64d4-40de-8100-d2ec81e8aaf3",
monthlyData: 159392.235451,
monthlyDataInUSC: 255.284807
},
{
userId: "23fs6fds3-34k4-17de-3123-d2ec81e8aaf3",
monthlyData: 349392.455451,
monthlyDataInUSC: 655.234807
}
];
let cc = [
{
userId: "54c7f3ef-64d4-40de-8100-d2ec81e8aaf3",
threeMonthsData: 159392.235451,
threeMonthsDataInUSC: 255.284807
},
{
userId: "23fs6fds3-34k4-17de-3123-d2ec81e8aaf3",
threeMonthsData: 349392.455451,
threeMonthsDataInUSC: 655.234807
},
{
userId: "34sdf34-67j4-54nd-6763-d2ec81e8aaf3",
threeMonthsData: 6789392.455451,
threeMonthsDataInUSC: 905.655807
}
];
let newArrObj = aa;
bb.forEach(item => {
let index = newArrObj.findIndex(item1 => item1.userId === item.userId);
if (index === -1) {
newArrObj = [...newArrObj, item];
} else {
newArrObj[index] = { ...newArrObj[index], ...item };
}
});
cc.forEach(item => {
let index = newArrObj.findIndex(item1 => item1.userId === item.userId);
if (index === -1) {
newArrObj = [...newArrObj, item];
} else {
newArrObj[index] = { ...newArrObj[index], ...item };
}
});
console.log(newArrObj);
};

After adding in Array element change oher element but not adding to array

i've got an array:
dataSet: [
{ name: "Имя1", image: "img.jpeg", author: "Александр Полтавченко", date: "21.02.2020", id: 1 },
{ name: "Имя2", image: "img.png", author: "Александр Полтавченко", date: "21.02.2020", id: 2 },
],
addedToCart: []
and here is the function which put value from dataSet to addedToCart according ID from props:
added = (id) => {
this.setState (( { addedToCart, dataList } )=>{
const newItem = dataList.filter(el=>el.id===id);
const testArr = [...addedToCart ];
const filteredATC = testArr.filter((item, el)=>{
if(addedToCart.indexOf(item)===el){
item.count++
return item, el
}
else {
return item
}
it is works well (only one element with count ++) but if click add to another element it is just change element in array (with correct count surprisingly).
How to put another element into addedToCart, just like
[
{el1},
{el2}
]

filter returns an array instead of the desired element, you should use find instead.
I believe you would desire an approach like this:
added = (id) => {
this.setState (( { addedToCart, dataList } ) => {
const newItem = dataList.find(el=> el.id === id);
const testArr = [...addedToCart ];
const filteredATCIndex = testArr.findIndex((_item, id) => newItem.id === id)
// if there is an added item
if (filteredATCIndex !== -1) {
const count = testArr[filteredATCIndex].count + 1
testArr[filteredATCIndex] = { ...testArr[filteredATCIndex], count }
return { addedToCart: testArr }
}
// for new item
const newItemAdded = { ...newItem, count: 1 }
testArr.push(newItemAdded)
return { addedToCart: testArr }
})
}
though this approach duplicates data, which is not desirable. I suggest you consider to change addedToCart to an object where key value pairs are the id and count respectively from added items. This way you would avoid duplicating data.
then your update state would look like:
added = (id) => {
this.setState (( { addedToCart } ) => {
const count = typeof addedToCart[id] === 'undefined' ? 1 : ++addedToCart[id]
return { addedToCart: { ...addedToCart, [id]: count } }
})
}

Reformatting array of arrays to nested json in Javascript [duplicate]

I have an array like
[
"parent1|child1|subChild1",
"parent1|child1|subChild2",
"parent|child2|subChild1",
"parent1|child2|subChild2",
"parent2|child1|subChild1",
"parent2|child1|subChild2",
"parent2|child2|subChild1",
.
.
.
]
Wherein my first string before | is the parent and the second string before | is the child and the third string after the second | is the subchild
How can I convert this array into an object like
[
{
"id": "parent1",
"children":[
{
"id": "child1",
"children":[
{
"id": "subChild1"
}
]
}
]
}
]
Parent -> child -> subchild object
Based on Sebastian's answer I tried below using typescript
private genTree(row) {
let self = this;
if (!row) {
return;
}
const [parent, ...children] = row.split('|');
if (!children || children.length === 0) {
return [{
id: parent,
children: []
}];
}
return [{
id: parent,
children: self.genTree(children.join('|'))
}];
}
private mergeDeep(children) {
let self = this;
const res = children.reduce((result, curr) => {
const entry = curr;
const existing = result.find((e) => e.id === entry.id);
if (existing) {
existing.children = [].concat(existing.children, entry.children);
} else {
result.push(entry);
}
return result;
}, []);
for (let i = 0; i < res.length; i++) {
const entry = res[i];
if (entry.children && entry.children.length > 0) {
entry.children = self.mergeDeep(entry.children);
}
};
return res;
}
private constructTree(statKeyNames){
let self = this;
const res = this.mergeDeep(statKeyNames.map(self.genTree).map(([e]) => e));
console.log(res);
}
but this gives me:
Cannot read property 'genTree' of undefined" error
Update:
As per Sebastian's comment changed self.genTree to this.genTree.bind(this) and it worked without any issues

You could use a mapper object which maps each object to it's unique path (You could map the object with each id, but id is not unique here). Then reduce each partial item in the array. Set the root object as the initialValue. The accumulator will be the parent object for the current item. Return the current object in each iteration.
const input = [
"parent1|child1|subChild1",
"parent1|child1|subChild2",
"parent1|child2|subChild1",
"parent1|child2|subChild2",
"parent2|child1|subChild1",
"parent2|child1|subChild2",
"parent2|child2|subChild1"
],
mapper = {},
root = { children: [] }
for (const str of input) {
let splits = str.split('|'),
path = '';
splits.reduce((parent, id, i) => {
path += `${id}|`;
if (!mapper[path]) {
const o = { id };
mapper[path] = o; // set the new object with unique path
parent.children = parent.children || [];
parent.children.push(o)
}
return mapper[path];
}, root)
}
console.log(root.children)

You have to use recursion for that. Take a look here:
const arr = [
"parent1|child1|subChild1",
"parent1|child1|subChild2",
"parent|child2|subChild1",
"parent1|child2|subChild2",
"parent2|child1|subChild1",
"parent2|child1|subChild2",
"parent2|child2|subChild1"
];
function genTree(row) {
const [parent, ...children] = row.split('|');
if (!children || children.length === 0) {
return [{
id: parent,
children: []
}];
}
return [{
id: parent,
children: genTree(children.join('|'))
}];
};
function mergeDeep(children) {
const res = children.reduce((result, curr) => {
const entry = curr;
const existing = result.find((e) => e.id === entry.id);
if (existing) {
existing.children = [].concat(existing.children, entry.children);
} else {
result.push(entry);
}
return result;
}, []);
for (let i = 0; i < res.length; i++) {
const entry = res[i];
if (entry.children && entry.children.length > 0) {
entry.children = mergeDeep(entry.children);
}
};
return res;
}
const res = mergeDeep(arr.map(genTree).map(([e]) => e));
console.log(JSON.stringify(res, false, 2));
I used two helpers here: genTree(row) which recursively generates a simple tree from each row, and mergeDeep(children) which reduces the first-level trees in the result of arr.map(genTree).map(([e]) => e), and then iterates over the array and recursively does the same thing to all children of each entry.

Using array index variables instead of hard coded values

I have a following method, I want to use three variables declared in the 1st three lines instead of checking hard coded values using for loop and add it to res. I was trying following so that I only have to change the values inside successStates & failedStates
// if(successStates.find(x => x === filterVal)){
// filter1 = successStates[0];
// filter2 = successStates[1];
// }
getJobFilter() {
let successStates = ['ACCEPTED_STATE', 'ACTIVE_STATE'];
let failedStates = ['INACTIVE_STATE'];
let otherStates = ['UNKNOWN'];
let res = [];
let filter =
JSON.parse(sessionStorage.getItem('cdgFilter') || '{}');
for (let key in filter) {
if (key) {
if (key === 'collection_status') {
let filterVal: any;
let filter1, filter2;
if (filterVal === "SUCCESSFUL") {
filter1 = 'ACTIVE_STATE';
filter2 = 'ACCEPTED_STATE';
} else if (filterVal === "FAILED") {
filter1 = 'UNKNOWN_STATE';
filter2 = 'INACTIVE_STATE';
}
res.push({
'field': 'State',
'value': filter1
}, {
'field': 'State',
'value': filter2
});
} else {
res.push({
'field': key,
'value': filter[key].filter
});
}
}
}
return res;
}

The easiest way to do this is to use a map object:
const collectionStatusFilters = {
SUCCESSFUL: ['ACTIVE_STATE', 'ACCEPTED_STATE'],
FAILED: ['UNKNOWN_STATE', 'INACTIVE_STATE']
}
You can then replace your if statement thusly:
const filters = collectionStatusFilters[filterVal];
res = res.concat(
filters.map(filter => ({
field: 'State',
value: filter
}))
);