Develop Reference

RXJS, add new key:value to nested observable

I'm new with rxjs and i can't see how can i do what i need. I need to add a pair active:true recursively.
I have this data structure coming from api as observable:
var data = [
{
name: "hom",
subcategories: [
{ name: "reb" },
{ name: "nov" },
{ name: "otr" }
]
},
{
name: "muj",
subcategories: [
{ name: "REB" },
{ name: "NOV" },
{ name: "OT" }
]
},
{
name: "ni",
subcategories: [
{ name: "REB", subcategories: [
{name: "rebanis"},
{name: "rebawos"}] },
{ name: "NOV", subcategories: [
{name: "novebanis"},
{name: "novrebawos"}] },
{ name: "OT", subcategories: [
{name: "otrebanis"},
{name: "otrebawos"}]
}
]
}
];
And what i want is to add a active:true on every level that have subcategories, and i don't know how many nested subcategories could be.
This is the result that i want:
var data = [
{
active: true,
name: "hom",
subcategories: [
{ name: "reb" },
{ name: "nov" },
{ name: "otr" }
]
},
{
active: true,
name: "muj",
subcategories: [
{ name: "REB" },
{ name: "NOV" },
{ name: "OT" }
]
},
{
name: "ni",
active: true,
subcategories: [
{ name: "REB", active: true, subcategories: [
{name: "rebanis"},
{name: "rebawos"}] },
{ name: "NOV", active: true, subcategories: [
{name: "novebanis"},
{name: "novrebawos"}] },
{ name: "OT", active: true, subcategories: [
{name: "otrebanis"},
{name: "otrebawos"}]
}
]
}
];
I tried something like this:
const req = of(data)
.pipe(
map(data => {
const transformedData = Object.keys(data).map(key =>
Object.assign(data[key], { active: true })
);
return transformedData;
})
)
.subscribe(output => console.log(output));
But the result is not clear and it only affects on first level not on nested.

You can use map inside recursive function:
const data = [ { name: "hom", subcategories: [ { name: "reb" }, { name: "nov" }, { name: "otr" } ] }, { name: "muj", subcategories: [ { name: "REB" }, { name: "NOV" }, { name: "OT" } ] }, { name: "ni", subcategories: [ { name: "REB", subcategories: [ {name: "rebanis"}, {name: "rebawos"}] }, { name: "NOV", subcategories: [ {name: "novebanis"}, {name: "novrebawos"}] }, { name: "OT", subcategories: [ {name: "otrebanis"}, {name: "otrebawos"}] } ] } ];
const addNewProp=data=>data.map(o=>o.subcategories ? ({...o, active:true, subcategories: addNewProp(o.subcategories)}) : o);
console.log(addNewProp(data));

The question has nothing to do with rxJs and Observable, it is a problem of transformation of an Array.
I would try something like this
data.map(el => {
if(el.subcategories && el.subcategories.lenght > 0) {
const newEl = {...el};
newEl.active = true;
return newEl;
}
return {...el}
})
Notice that here I am using some sort of immutability and hence I create new elements within the loop. If this is not required in your case, you can simplify the code like this
data.map(el => {
if(el.subcategories && el.subcategories.lenght > 0) {
el.active = true;
}
return el
})

Sort array of nested objects into separate array of arrays

I have an array:
[
{ id: 1,
name: "parent1",
children: [
{ id: 10,
name: "first_child_of_id_1",
children: [
{ id: 100, name: "child_of_id_10", children: []},
{ id: 141, name: "child_of_id_10", children: []},
{ id: 155, name: "child_of_id_10", children: []}
]
},
{ id: 42,
name: "second_child_of_id_1",
children: [
{ id: 122, name: "child_of_id_42", children: []},
{ id: 133, name: "child_of_id_42", children: []},
{ id: 177, name: "child_of_id_42", children: []}
]
}
]
},
{ id: 7,
name: "parent7",
children: [
{ id: 74,
name: "first_child_of_id_7",
children: [
{ id: 700, name: "child_of_id_74", children: []},
{ id: 732, name: "child_of_id_74", children: []},
{ id: 755, name: "child_of_id_74", children: []}
]
},
{ id: 80,
name: "second_child_of_id_7",
children: [
{ id: 22, name: "child_of_id_80", children: []},
{ id: 33, name: "child_of_id_80", children: []},
{ id: 77, name: "child_of_id_80", children: []}
]
}
]
}
]
What I need is an array of arrays like this:
[
[ "id", "name", "parent_id", "parent_name" ],
[ 1, "parent1", null, "" ],
[ 10, "first_child_of_id_1", 1, "parent1"],
[ 42, "second_child_of_id_1", 1, "parent1"],
[100, "child_of_id_10", 10, "first_child_of_id_1"]
]
and so on for all nested objects for me to convert them into CSV rows. I've checked many answers and found a similar problem here: How to convert array of nested objects to CSV?
But it produces too long rows for many nested objects and I am not experienced enough with JavaScript to modify map function.
const categories = [
{ id: 1,
name: "parent1",
children: [
{ id: 10,
name: "first_child_of_id_1",
children: [
{ id: 100, name: "child_of_id_10", children: []},
{ id: 141, name: "child_of_id_10", children: []},
{ id: 155, name: "child_of_id_10", children: []}
]
},
{ id: 42,
name: "second_child_of_id_1",
children: [
{ id: 122, name: "child_of_id_42", children: []},
{ id: 133, name: "child_of_id_42", children: []},
{ id: 177, name: "child_of_id_42", children: []}
]
}
]
},
{ id: 7,
name: "parent7",
children: [
{ id: 74,
name: "first_child_of_id_7",
children: [
{ id: 700, name: "child_of_id_74", children: []},
{ id: 732, name: "child_of_id_74", children: []},
{ id: 755, name: "child_of_id_74", children: []}
]
},
{ id: 80,
name: "second_child_of_id_7",
children: [
{ id: 22, name: "child_of_id_80", children: []},
{ id: 33, name: "child_of_id_80", children: []},
{ id: 77, name: "child_of_id_80", children: []}
]
}
]
}
]
function pivot(arr) {
var mp = new Map();
function setValue(a, path, val) {
if (Object(val) !== val) { // primitive value
var pathStr = path.join('.');
var i = (mp.has(pathStr) ? mp : mp.set(pathStr, mp.size)).get(pathStr);
a[i] = val;
} else {
for (var key in val) {
setValue(a, key == '0' ? path : path.concat(key), val[key]);
}
}
return a;
}
var result = arr.map(obj => setValue([], [], obj));
return [[...mp.keys()], ...result];
}
function toCsv(arr) {
return arr.map(row =>
row.map(val => isNaN(val) ? JSON.stringify(val) : +val).join(',')
).join('\n');
}
<button onclick="console.log(toCsv(pivot(categories)))">Output</button>

Simple DFS or BFS algorithm should do the job here.
The difference is the order of created "rows". If you want to have all children of given node listed immediately after their parent, then you need to use BFS.
Example with DFS and BFS:
const input = [{
id: 1,
name: "parent1",
children: [{
id: 10,
name: "first_child_of_id_1",
children: [{
id: 100,
name: "child_of_id_10",
children: []
},
{
id: 141,
name: "child_of_id_10",
children: []
},
{
id: 155,
name: "child_of_id_10",
children: []
}
]
},
{
id: 42,
name: "second_child_of_id_1",
children: [{
id: 122,
name: "child_of_id_42",
children: []
},
{
id: 133,
name: "child_of_id_42",
children: []
},
{
id: 177,
name: "child_of_id_42",
children: []
}
]
}
]
},
{
id: 7,
name: "parent7",
children: [{
id: 74,
name: "first_child_of_id_7",
children: [{
id: 700,
name: "child_of_id_74",
children: []
},
{
id: 732,
name: "child_of_id_74",
children: []
},
{
id: 755,
name: "child_of_id_74",
children: []
}
]
},
{
id: 80,
name: "second_child_of_id_1",
children: [{
id: 22,
name: "child_of_id_80",
children: []
},
{
id: 33,
name: "child_of_id_80",
children: []
},
{
id: 77,
name: "child_of_id_80",
children: []
}
]
}
]
}
]
//DFS
function deepWalk(node, parent, output = []) {
if (!node || typeof node !== 'object' || !node.id) return;
output.push([node.id, node.name, parent ? parent.id : null, parent ? parent.name : ""])
if (node.children) {
for (const child of node.children) {
deepWalk(child, node, output);
}
}
return output;
}
//BFS
function broadWalk(root) {
const output = []
const queue = [];
queue.push({
node: root,
parent: null
});
while (queue.length) {
const {
node,
parent
} = queue.shift();
output.push([node.id, node.name, parent ? parent.id : null, parent ? parent.name : ""])
if (node.children) {
for (const child of node.children) {
queue.push({
node: child,
parent: node
});
}
}
}
return output;
}
let rowsDfs = [
["id", "name", "parent_id", "parent_name"]
];
let rowsBfs = [
["id", "name", "parent_id", "parent_name"]
];
for (const node of input) {
rowsDfs = [...rowsDfs, ...deepWalk(node)];
rowsBfs = [...rowsBfs, ...broadWalk(node)];
}
console.log("rows DFS: ", rowsDfs)
console.log("rows BFS: ", rowsBfs)

How do I map through a variable in React JS

I was using react-tree-graph and I was creating a data object but I want to use my backend api to fill in the properties of the data object. I tried using the .map method to loop through my api but I couldnt figure out how to get it to work. Here's the data object and below is my object from my api.
let data = {
name: 'Water',
children: [
{
name: 'Earth',
children: [
{
name: 'Air',
children: [
{
name: 'Fire',
children: [],
},
{
name: 'Fire2',
children: [],
},
],
},
{
name: 'Air2',
children: [
{
name: 'Fire3',
children: [],
},
{
name: 'Fire4',
children: [],
},
],
},
],
},
{
name: 'Earth2',
children: [
{
name: 'Air3',
children: [
{
name: 'Fire5',
children: [],
},
{
name: 'Fire6',
children: [],
},
],
},
{
name: 'Air4',
children: [
{
name: 'Fire7',
children: [],
},
{
name: 'Fire8',
children: [],
},
],
},
],
},
],
};
Instead of the strings I want to map through this variable and fill it in with object as such
flower= {water: "name1",air: "name2",air2: "name3",air3: "name4",air4: "name5",earth: "name6",earth2: "name7",fire: "name8",fire2: "name9",fire3: "name10",fire4: "name11",fire5: "name12",fire6: "name13",fire7: "name14",fire8: "name15"}
I just wanted to know how I could use this object and map through it to fill in the different properties inside the data object

Here is a solution for you question, Ive worked with recursive.
let data = {
name: 'Water',
children: [
{
name: 'Earth',
children: [
{
name: 'Air',
children: [
{
name: 'Fire',
children: [],
},
{
name: 'Fire2',
children: [],
},
],
},
{
name: 'Air2',
children: [
{
name: 'Fire3',
children: [],
},
{
name: 'Fire4',
children: [],
},
],
},
],
},
{
name: 'Earth2',
children: [
{
name: 'Air3',
children: [
{
name: 'Fire5',
children: [],
},
{
name: 'Fire6',
children: [],
},
],
},
{
name: 'Air4',
children: [
{
name: 'Fire7',
children: [],
},
{
name: 'Fire8',
children: [],
},
],
},
],
},
],
};
let counter = 1;
function recursiveNaming(data) {
return data.children.reduce((acc, curr) => {
let obj;
let currentObj = {...acc, [curr.name]:`name${counter++}`};
if(curr.children.length) {
obj = recursiveNaming(curr);
}
return {...currentObj, ...obj };
},{})
};
console.log(recursiveNaming(data))
Hope it worth it....

How to flat tree, auto generation parent?

I want to keep the parent-child relationship of the tree node.
I have a JSON tree, like this
{
id: null,
children: [
{
id: 1,
children: [
{
id: 11,
children: [
{
id: 111
children: []
}
]
},
{
id: '12',
children: []
},
]
},
{
id: '2',
children: [
{
id: '21',
children: []
},
{
id: '22',
children: [
{
id: '221',
children: []
}
]
},
]
},
]
}
I want flat the tree, like this
[
{ id: 1, parent: null,},
{ id: 11, parent: 1, },
{ id: 111, parent: 11, },
{ id: 2, parent: null, },
{ id: 21, parent: 2, },
...
]
parent automatic generated
Is there any good way?

You could use flatMap method and create recursive function that will return 1D array as a result.
const data = {"id":null,"children":[{"id":1,"children":[{"id":11,"children":[{"id":111,"children":[]}]},{"id":"12","children":[]}]},{"id":"2","children":[{"id":"21","children":[]},{"id":"22","children":[{"id":"221","children":[]}]}]}]}
const flatten = (data, parent = null) =>
data.flatMap(({ id, children }) => ([
{ id, parent },
...flatten(children, id)
]))
const result = flatten(data.children);
console.log(result)

You could get the object and return an array of the flat children.
const
getFlat = ({ id, children = [] }) =>
children.flatMap(o => [{ id: o.id, parent: id }, ...getFlat(o)]);
var data = { id: null, children: [{ id: 1, children: [{ id: 11, children: [{ id: 111, children: [] }] }, { id: '12', children: [] }] }, { id: '2', children: [{ id: '21', children: [] }, { id: '22', children: [{ id: '221', children: [] }] }] }] },
flat = getFlat(data);
console.log(flat);
.as-console-wrapper { max-height: 100% !important; top: 0; }

If compatbility with Internet Explorer is important, then the following approach which avoids the need for Array#flatMap might suit:
const input={id:null,children:[{id:'1',children:[{id:'11',children:[{id:'111',children:[]}]},{id:'12',children:[]}]},{id:'2',children:[{id:'21',children:[]},{id:'22',children:[{id:'221',children:[]}]}]}]};
const result = [];
// Define recursive function to walk through the data tree
// and produce a flat array of required data
const recurse = (item, parent) => {
// Only add item to result if it has valid id
if (item.id) {
result.push({
id: item.id,
parent: parent ? parent.id : null
});
}
// Iterate the children of this item, traversing and
// processing them in the same way
item.children.forEach(child => recurse(child, item))
}
recurse(input);
console.log(result);

You can use a simple recursion to achieve this
let data = {
id: 1,
name: 'a1',
children: [{
id: 2,
name: 'a2',
children: [{
id: 3,
name: 'b1',
children: []
},
{
id: 4,
name: 'b2',
children: []
}
]
}]
}
function flatten(data){
output = [];
return (function indentHandler(data, level, parent){
output.push({id: data['id'], parent: parent})
if (data['children'].length === 0){
return output;
}
level += 1;
data['children'].forEach(function(child){
return indentHandler(child, level, data.name);
});
return output;
})(data, 0, null);
}
flatten(data);

use recursion
var tree = {
id: null,
children: [{
id: 1,
children: [{
id: 11,
children: [{
id: 111,
children: []
}]
},
{
id: '12',
children: []
},
]
},
{
id: '2',
children: [{
id: '21',
children: []
},
{
id: '22',
children: [{
id: '221',
children: []
}]
},
]
}
]
};
var flat = [];
function flatArray(arr, parentId) {
arr.forEach(function(el) {
flat.push({
id: el.id,
parent: parentId || null
});
if (el.children)
flatArray(el.children, el.id);
});
}
flatArray(tree.children, 0)
console.log(flat);

Return a set of documents with all sub-arrays containing a given value in loopback or nodejs

How do I return a set of documents that has sub-arrays that matches common values. To better explain, consider the following data:
[
{
Category: 1,
Products: [
{
Name: 'ABC',
ColorCode:[1,2,3,4,5]
},
{
Name: 'DEF',
ColorCode:[1,2,3,4,5,6]
},
{
Name: 'GHI',
ColorCode:[1,2,3,4,6,7]
}
]
},
{
Category: 2,
Products: [
{
Name: 'JKL',
ColorCode:[4,6,7,]
},
{
Name: 'MNO',
ColorCode:[4,5,6,9,]
}
]
},
{
Category: 3,
Products: [
{
Name: 'OPQ',
ColorCode:[3,4,5,6,9,10]
},
{
Name: 'RST',
ColorCode:[2,3,5,6,9,10]
}
]
}]
The task is,
Get all the Categories with all the products containing a specific color code:
For example,
For ColorCode = 6,
Result should be:
[
{
Category: 2,
Products: [
{
Name: 'JKL',
ColorCode:[4,6,7,]
},
{
Name: 'MNO',
ColorCode:[5,6,9,]
}
]
},
{
Category: 3,
Products: [
{
Name: 'OPQ',
ColorCode:[3,4,5,6,9,10]
},
{
Name: 'RST',
ColorCode:[2,3,5,6,9,10]
}
]
}]
For ColorCode = 4,
Result should be:
[
{
Category: 1,
Products: [
{
Name: 'ABC',
ColorCode:[1,2,3,4,5]
},
{
Name: 'DEF',
ColorCode:[1,2,3,4,5,6]
},
{
Name: 'GHI',
ColorCode:[1,2,3,4,6,7]
}
]
},
{
Category: 2,
Products: [
{
Name: 'JKL',
ColorCode:[4,6,7,]
},
{
Name: 'MNO',
ColorCode:[4,5,6,9,]
}
]
}]
For ColorCode = 7,
Result should be an empty array:
[]
Thanks in advance.

You're looking for Array.prototype.filter.
// filter out categories that don't contain color code 4
categories.filter(function(category) {
return category.products.filter(containsColor(4)) > 0;
});
function containsColor(colorCode) {
return function(product) {
return product.ColorCode.indexOf(colorCode) >= 0;
};
}