Related
How do I implement this properly?
const tree = buildTree(1, shuffleArray([
{ type: 'string', source_id: 1, name: 'foo', value: 'asdf' },
{ type: 'integer', source_id: 1, name: 'bar', value: 123 },
{ type: 'object', source_id: 1, name: 'nested', value: 2 },
{ type: 'object', source_id: 2, name: 'nested', value: 3, array: true },
{ type: 'boolean', source_id: 3, name: 'random', value: true },
{ type: 'string', source_id: 3, name: 'another', value: 'hello' },
{ type: 'object', source_id: 2, name: 'nested', value: 4, array: true },
{ type: 'boolean', source_id: 4, name: 'random', value: false },
{ type: 'string', source_id: 4, name: 'another', value: 'world' },
{ type: 'object', source_id: 2, name: 'nested', value: 5, array: true },
{ type: 'boolean', source_id: 5, name: 'random', value: true },
{ type: 'string', source_id: 5, name: 'another', value: 'awesome' },
]))
function buildTree(startId, array) {
const map = array.reduce((m, x) => {
m[x.source_id] = m[x.source_id] ?? {}
if (x.array) {
m[x.source_id][x.name] = m[x.source_id][x.name] ?? []
m[x.source_id][x.name].push({ id: x.value })
} else {
m[x.source_id][x.name] = x.value
}
return m
}, {})
// ??? getting lost...
}
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array
}
where the "expected tree" would be something like this:
const expectedTree = {
id: 1,
foo: 'asdf',
bar: 123,
nested: {
id: 2,
nested: [
{
id: 3,
random: true,
another: 'hello'
},
{
id: 4,
random: false,
another: 'world'
},
{
id: 5,
random: true,
another: 'awesome'
}
]
}
}
The shuffleArray is just to show that the records could be in any order, and the id (source_id) property is not necessarily in incremental order (actually in my case they are UUIDs with the hierarchy not really in any particular order). Each "record" in buildTree is a "property" record basically like this:
create table object_properties {
uuid id;
uuid source_id; // the object which has this property
string name; // the property name
uuid value; // the property value object
}
// ...and same for boolean, integer, etc. properties
create table string_properties {
uuid id;
uuid source_id; // the object which has this property
string name; // the property name
string value; // the property value string
}
In my buildTree I can kind of imagine creating a map from the source_id (the base object node which has property name), to the names, to the values. But then maybe iterating over the source IDs, looking for objects nested inside the name values, and converting them to objects instead of just IDs. But this is getting hard to comprehend and I'm sure there is an easier way somehow.
What is an algorithm to build an "object tree" from this flat list of records?
In my situation, I am fetching a bunch of deeply nested property objects, recursively, and need to stitch back together an object tree out of them.
It looks like the name "nested" plays a special role. When it occurs, the corresponding value property does not hold a literal value to assign to the named property (as is the case with other names), but is a reference to an existing source_id value.
This means your code needs to deal with that name specifically and then establish the parent-child relationship. This relationship is further influenced by the array property.
I would define buildTree as follows, making use of a Map, which is built first using its constructor argument:
function buildTree(startId, arr) {
const map = new Map(arr.map(({source_id}) => [source_id, { id: source_id }]));
for (const {source_id, name, value, array} of arr) {
if (name !== "nested") {
map.get(source_id)[name] = value;
} else if (array) {
(map.get(source_id).nested ??= []).push(map.get(value));
} else {
map.get(source_id).nested = map.get(value);
}
}
return map.get(startId);
}
// Code below has not changed
function shuffleArray(array) { for (var i = array.length - 1, j, temp; i > 0; i--) {j = Math.floor(Math.random() * (i + 1));temp = array[i];array[i] = array[j];array[j] = temp;} return array;}
const tree = buildTree(1, shuffleArray([{ type: 'string', source_id: 1, name: 'foo', value: 'asdf' },{ type: 'integer', source_id: 1, name: 'bar', value: 123 },{ type: 'object', source_id: 1, name: 'nested', value: 2 },{ type: 'object', source_id: 2, name: 'nested', value: 3, array: true },{ type: 'boolean', source_id: 3, name: 'random', value: true },{ type: 'string', source_id: 3, name: 'another', value: 'hello' },{ type: 'object', source_id: 2, name: 'nested', value: 4, array: true },{ type: 'boolean', source_id: 4, name: 'random', value: false },{ type: 'string', source_id: 4, name: 'another', value: 'world' },{ type: 'object', source_id: 2, name: 'nested', value: 5, array: true },{ type: 'boolean', source_id: 5, name: 'random', value: true },{ type: 'string', source_id: 5, name: 'another', value: 'awesome' },]))
console.log(tree);
Note that the order in which objects are pushed into arrays is defined by the original order of the objects. Since this input array is shuffled, the output may show arrays in different ordering on separate runs. Something similar holds for object keys (see Object property order)
You should try Array.prototype.group(). Please refer below document.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/group
const inventory = [
{ name: 'asparagus', type: 'vegetables', quantity: 5 },
{ name: 'bananas', type: 'fruit', quantity: 0 },
{ name: 'goat', type: 'meat', quantity: 23 },
{ name: 'cherries', type: 'fruit', quantity: 5 },
{ name: 'fish', type: 'meat', quantity: 22 }
];
const result = inventory.group(({ type }) => type);
/* Result is:
{
vegetables: [
{ name: 'asparagus', type: 'vegetables', quantity: 5 },
],
fruit: [
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "cherries", type: "fruit", quantity: 5 }
],
meat: [
{ name: "goat", type: "meat", quantity: 23 },
{ name: "fish", type: "meat", quantity: 22 }
]
}
*/
My array looks like, but includes 1000+ objects:
data = {
0: {
code: '3019476',
_id: '60033f61-8a4e-4622-9731-decd07bc44e1',
vendor: 'DKNY',
tags: [
{ type: 1, label: 'dsfs' },
{ type: 2, label: 'thisOne' },
{ type: 3, label: 'sdas' },
],
},
1: {
code: '3019475',
_id: '60033f61-8a4e-4622-9731-decd07bc44e0',
vendor: 'DKNY',
tags: [
{ type: 1, label: 'sdfsd' },
{ type: 2, label: 'anotherOne' },
{ type: 3, label: 'sdfsd' },
],
},
2: {
code: '3019474',
_id: '60033f61-8a4e-4622-9731-decd07bc44e9',
vendor: 'DKNY',
tags: [
{ type: 1, label: 'gregf' },
{ type: 2, label: 'thisOne' },
{ type: 3, label: 'gregf' },
],
},
};
I expect this as output:
0: {title: "thisOne", data: Array(2)"}
1: {title: "anotherOne", data: Array(1)"}
So I want to filter and count how many objects include different tag[1].label, saving full item data in 'data' inside result.
All my ideas failed, so I really need your help
I suspect that you are looking for groupBy with a property path iteratee shorthand:
import { groupBy } from 'underscore';
groupBy(data, ['tags', 1, 'label']);
// { thisOne: [Object, Object],
// anotherOne: [Object]
// }
This produces an object with the labels as keys and the groups as values. From here, it is easy to get it in the exact shape of the example output from your question, for example using chain and map:
import { chain } from 'underscore';
chain(data)
.groupBy(['tags', 1, 'label'])
.map((data, title) => ({data, title}))
.value();
// [ { title: 'thisOne', data: [Object, Object] },
// { title: 'anotherOne', data: [Object] }
// ]
There are a lot of syntax error in data, fix them and it should work. See the code snippet below.
NOTE: Key/Value pairs in an object should separated with commas and dsfs, thisOne sdas should be valid variables or strings.
data = {
0: {
code: '3019476',
_id: '60033f61-8a4e-4622-9731-decd07bc44e1',
vendor: 'DKNY',
tags: [
{ type: 1, label: 'dsfs' },
{ type: 2, label: 'thisOne' },
{ type: 3, label: 'sdas' },
],
},
1: {
code: '3019475',
_id: '60033f61-8a4e-4622-9731-decd07bc44e0',
vendor: 'DKNY',
tags: [
{ type: 1, label: 'sdfsd' },
{ type: 2, label: 'anotherOne' },
{ type: 3, label: 'sdfsd' },
],
},
2: {
code: '3019474',
_id: '60033f61-8a4e-4622-9731-decd07bc44e9',
vendor: 'DKNY',
tags: [
{ type: 1, label: 'gregf' },
{ type: 2, label: 'thisOne' },
{ type: 3, label: 'gregf' },
],
},
};
console.log(data[0].tags[1].label)
You don't need lodash for that. You can use plain javascript.
const data= [
{code: "3019476", _id: "60033f61-8a4e-4622-9731-decd07bc44e1", vendor: "DKNY", tags: [{type: 1, label: 'dsfs'},{type: 2, label: 'thisOne'},{type: 3, label: 'sdas'}]}, {code: "3019475", _id: "60033f61-8a4e-4622-9731-decd07bc44e0", vendor: "DKNY", tags: [{type: 1, label: 'sdfsd'},{type: 2, label: 'anotherOne'},{type: 3, label: 'sdfsd'}]}, {code: "3019474", _id: "60033f61-8a4e-4622-9731-decd07bc44e9", vendor: "DKNY", tags: [{type: 1, label: 'gregf'},{type: 2, label: 'thisOne'},{type: 3, label: 'gregf'}]}]
const newData = data.map(d => {
let result = {};
result.title = d.tags.find(tag => tag.type === 2).label;
result.data = d.tags.filter(tag => tag.type === 2);
return result;
});
console.log(newData);
P.S.: This snippet is considering that more than one tagType can be included into the data array and that the first found will be used as title.
If that is not what you want then the question should be clearer.
Given a flat level array of objects, what's the most efficient and modern way to nest them based on a parent and id property? The top level objects have no parentId, and there's no limit to nest levels.
[{
id: 'OS:MacOS',
type: 'OS',
value: 'MacOS'
}, {
parentId: 'OS:MacOS',
id: 'Version:Catalina',
type: 'Version',
value: 'Catalina'
}, {
parentId: 'Version:Catalina',
id: 'Browser:Chrome',
type: 'Browser',
value: 'Chrome'
}, {
id: 'OS:Windows',
type: 'OS',
value: 'Windows'
}, {
parentId: 'OS:Windows',
id: 'Version:7',
type: 'Version',
value: '7'
}, {
parentId: 'OS:MacOS',
id: 'Version:Mojave',
type: 'Version',
value: 'Mojave'
}, {
parentId: 'Version:Mojave',
id: 'Browser:Chrome',
type: 'Browser',
value: 'Chrome'
}, {
parentId: 'OS:Windows',
id: 'Version:XP',
type: 'Version',
value: 'XP'
}, {
parentId: 'Version:XP',
id: 'Browser:Chrome',
type: 'Browser',
value: 'Chrome'
}]
Where parentId matches up to a corresponding id field. Ideally transforming them to include a children array field along the lines of:
[{
id: 'OS:MacOS',
type: 'OS',
value: 'MacOS',
children: [
{
parentId: 'OS:MacOS',
id: 'Version:Catalina',
type: 'Version',
value: 'Catalina',
children: [
{
parentId: 'Version:Catalina',
id: 'Browser:Chrome',
type: 'Browser',
value: 'Chrome'
}
]
},
{
parentId: 'OS:MacOS',
id: 'Version:Mojave',
type: 'Version',
value: 'Mojave',
children: [
{
parentId: 'Version:Mojave',
id: 'Browser:Chrome',
type: 'Browser',
value: 'Chrome'
}
]
}
]
}, {
id: 'OS:Windows',
type: 'OS',
value: 'Windows',
children: [
{
parentId: 'OS:Windows',
id: 'Version:7',
type: 'Version',
value: '7'
},
{
parentId: 'OS:Windows',
id: 'Version:XP',
type: 'Version',
value: 'XP',
children: [
{
parentId: 'Version:XP',
id: 'Browser:Chrome',
type: 'Browser',
value: 'Chrome'
}
]
}
]
}]
Thoughts appreciated!
You could use reduce in recursive function that will pass down the current element id and compare it with parent id in nested calls.
const data = [{"id":"OS:MacOS","type":"OS","value":"MacOS"},{"parentId":"OS:MacOS","id":"Version:Catalina","type":"Version","value":"Catalina"},{"parentId":"Version:Catalina","id":"Browser:Chrome","type":"Browser","value":"Chrome"},{"id":"OS:Windows","type":"OS","value":"Windows"},{"parentId":"OS:Windows","id":"Version:7","type":"Version","value":"7"},{"parentId":"OS:MacOS","id":"Version:Mojave","type":"Version","value":"Mojave"},{"parentId":"Version:Mojave","id":"Browser:Chrome","type":"Browser","value":"Chrome"},{"parentId":"OS:Windows","id":"Version:XP","type":"Version","value":"XP"},{"parentId":"Version:XP","id":"Browser:Chrome","type":"Browser","value":"Chrome"}]
function nested(data, pid = undefined) {
return data.reduce((r, e) => {
if (e.parentId == pid) {
const obj = { ...e }
const children = nested(data, e.id);
if (children.length) obj.children = children;
r.push(obj)
}
return r;
}, [])
}
const result = nested(data);
console.log(result)
The reducer approach by Nenad works, but is pretty inefficient as it iterates through the data list n^2 times. Here is an O(n) solution:
function buildTree(data) {
const store = new Map(); // stores data indexed by it's id
const rels = new Map(); // stores array of children associated with id
const roots = []; // stores root nodes
data.forEach(d => {
store.set(d.id, d);
!rels.get(d.id) ? rels.set(d.id, []) : undefined; // noOp.;
if (!d.parentId) {
roots.push(d.id)
return;
}
const parent = rels.get(d.parentId) || [];
parent.push(d.id);
rels.set(d.parentId, parent);
});
function build(id) {
const data = store.get(id);
const children = rels.get(id);
if (children.length === 0) {
return {...data}
}
return {...data, children: children.map(c => build(c)) };
}
return roots.map(r => build(r));
}
const data = [{"id":"OS:MacOS","type":"OS","value":"MacOS"},{"parentId":"OS:MacOS","id":"Version:Catalina","type":"Version","value":"Catalina"},{"parentId":"Version:Catalina","id":"Browser:Chrome","type":"Browser","value":"Chrome"},{"id":"OS:Windows","type":"OS","value":"Windows"},{"parentId":"OS:Windows","id":"Version:7","type":"Version","value":"7"},{"parentId":"OS:MacOS","id":"Version:Mojave","type":"Version","value":"Mojave"},{"parentId":"Version:Mojave","id":"Browser:Chrome","type":"Browser","value":"Chrome"},{"parentId":"OS:Windows","id":"Version:XP","type":"Version","value":"XP"},{"parentId":"Version:XP","id":"Browser:Chrome","type":"Browser","value":"Chrome"}]
console.log(JSON.stringify(buildTree(data), null, 2))
Edit Note:
Earlier answer was class based. Removed that for simplicity. You can further optimize the space storage by changing store to be index based.
This question already has answers here:
Build tree array from flat array in javascript
(34 answers)
Closed 4 years ago.
I currently have a flat array of objects which I am trying to convert to a nested array of objects. I would like to reuse this function throughout my application - whatever the final depth of the array - so I believe a recursive function would be more appropriate.
My attemps so far I have been a combination of sort + reduce with no success.
It would be much appreciated if you could help me write a clean function for my app !
Initial Array - Flat list of objects
const data = [
{ index: 0, parentKey: '-LLnMWy69vACjys0QIGH', type: 'options', name: 'OPTION_1', key: '-LLnOxg5hsDYR-PcfjBT' },
{ index: 1, parentKey: '-LLnMWy69vACjys0QIGH', type: 'options', name: 'OPTION_2', key: '-LLnP-O6TyHxIpPk9bCU' },
{ index: 0, parentKey: '-LLnLuLt6cn-vBpMWv-u', type: 'collections', name: 'COLLECTION_1', key: '-LLnMWy69vACjys0QIGH' },
{ index: 1, parentKey: '-LLnLuLt6cn-vBpMWv-u', type: 'collections', name: 'COLLECTION_2', key: '-LLnMYNyJmhSCPB-8lL1' },
{ index: 0, name: 'CONFIGURATOR_1', key: '-LLnLuLt6cn-vBpMWv-u' },
{ index: 1, name: 'CONFIGURATOR_2', key: '-LLnLtLs7PjXSAW0PWCQ' },
];
Desired outcome - Nested arrays of objects
const data = [
{
key: '-LLnLuLt6cn-vBpMWv-u',
name: 'CONFIGURATOR_1',
collections: [
{
key: '-LLnMWy69vACjys0QIGH',
name: 'COLLECTION_1',
options: [
{
key: '-LLnOxg5hsDYR-PcfjBT',
name: 'OPTION_1',
},
{
key: '-LLnP-O6TyHxIpPk9bCU',
name: 'OPTION_2',
},
],
},
{
key: '-LLnMYNyJmhSCPB-8lL1',
name: 'COLLECTION_2',
},
],
},
{ key: '-LLnLtLs7PjXSAW0PWCQ',
name: 'CONFIGURATOR_2',
}]
As usual for this problem, one of the simplest method is to index all object by key with a map M.
then, go through the map M, if the current keyed element has a parent, then add it to the keyed parent in the Map M then map all these elements to an array A. Since all objects in javascript are references, the tree structure would be reconstructed automatically.
The last step would be to filter out all elements in A that have a parent.
const data = [
{ index: 0, parentKey: '-LLnMWy69vACjys0QIGH', type: 'options', name: 'OPTION_1', key: '-LLnOxg5hsDYR-PcfjBT' },
{ index: 1, parentKey: '-LLnMWy69vACjys0QIGH', type: 'options', name: 'OPTION_2', key: '-LLnP-O6TyHxIpPk9bCU' },
{ index: 0, parentKey: '-LLnLuLt6cn-vBpMWv-u', type: 'collections', name: 'COLLECTION_1', key: '-LLnMWy69vACjys0QIGH' },
{ index: 1, parentKey: '-LLnLuLt6cn-vBpMWv-u', type: 'collections', name: 'COLLECTION_2', key: '-LLnMYNyJmhSCPB-8lL1' },
{ index: 0, name: 'CONFIGURATOR_1', key: '-LLnLuLt6cn-vBpMWv-u' },
{ index: 1, name: 'CONFIGURATOR_2', key: '-LLnLtLs7PjXSAW0PWCQ' },
];
const M = data.reduce(function (result, el) {
result[el.key] = el
return result;
}, {});
const A = Object.keys(M).map(key => {
const el = M[key]
if (M[el.parentKey]) {
if (!M[el.parentKey].collections) {
M[el.parentKey].collections = []
}
M[el.parentKey].collections.push(el)
}
return el
}).filter(el => {
return !el.parentKey
})
console.log(JSON.stringify(A, null, '\t'))
I have found my issue using the following function. I am sure there is other ways more efficient ways to do it but it is the cleanest option i have found!
const objectNest = (array, parentKey) => {
const output = [];
array.forEach((object) => {
if (object.parentKey === parentKey) {
const children = objectNest(array, object.key);
if (children.length) { object[children[0].type] = children; }
const { index, parentKey, ...content } = object;
output.push(content);
}
});
return output;
};
I have the following object:
options.getOrderBy = function (type) {
var OrderBy = [
{ type: 'x', id: 0, label: 'xx1', key: 'yy1' },
{ type: 'x', id: 1, label: 'xx2', key: [1,2] },
{ type: 'x', id: 9, label: 'xx2', key: ['a','b'] },
{ type: 'y', id: 0, label: 'xx44', key: 'yya' },
{ type: 'y', id: 1, label: 'xx45', key: 'yyb' },
{ type: 'y', id: 2, label: 'xx46', key: 'yyc' },
];
return OrderBy;
};
What I need is that when the function is called with a type of ('x') then I want it to return something like:
[
{ id: 0, label: 'xx1', key: [1.2] },
{ id: 1, label: 'xx2', key: 'yy2' },
{ id: 9, label: 'xx2', key: ['a','b'] }
]
Can someone explain to me how I can filter an array based on the value of the type field and then just return an array of objects containing id, label and key?
Note that I have _lodash and I would like to use that if it makes it easier. Also my solution would be for browsers greater than IE9
options.getOrderBy = function (type) {
var OrderBy = [
{ type: 'x', id: 0, label: 'xx1', key: 'yy1' },
{ type: 'x', id: 1, label: 'xx2', key: 'yy2' },
{ type: 'y', id: 0, label: 'xx44', key: 'yya' },
{ type: 'y', id: 1, label: 'xx45', key: 'yyb' },
{ type: 'y', id: 2, label: 'xx46', key: 'yyc' },
];
return OrderBy.filter(function(e) {
return e.type === type;
}).map(function(e) {
delete e.type;
return e;
});
};
If you could change the OrderBy structure to an object, it will be much simpler:
options.getOrderBy = function (type) {
var OrderBy = {
x:[
{ id: 0, label: 'xx1', key: 'yy1' },
{ id: 1, label: 'xx2', key: 'yy2' }
],
y:[
{ id: 0, label: 'xx44', key: 'yya' },
{ id: 1, label: 'xx45', key: 'yyb' },
{ id: 2, label: 'xx46', key: 'yyc' }
]
};
return OrderBy[type];
};
My solution exploits Lodash's map and omit functions. See it here
var filter = function(collection, filterKey) {
return _.map(collection, function(elem) {
return _.omit(elem, filterKey);
})
}
Use it as:
var filtered = filter(OrderBy, 'type');
EDIT: taking into consideration also the value for filterKey
var filter = function(collection, filterKey, filterValue) {
return _.compact(_.map(collection, function(elem) {
if(elem[filterKey] === filterValue)
return _.omit(elem, filterKey);
}))
}
Use it as:
var filtered = filter(OrderBy, 'type', 'x');
SECOND EDIT: clearer version
var filterV2 = function(collection, filter) {
return _(collection)
.map(function (elem) { if(elem[filter.key] == filter.value) return _.omit(elem, filter.key) })
.compact()
.value()
}
Use it as:
var filtered = filterV2(OrderBy, { key: 'type', value: 'x' });
You can filter the order options like this:
var newOrderBy = [];
for(var i = 0, l = OrderBy.length; i < l; i++) {
if(OrderBy[i].type == type) {
newOrderBy.push({
id: OrderBy[i].id,
label: OrderBy[i].label,
key: OrderBy[i].key
});
}
}
Using underscore.js _.filter():-
options.getOrderBy = function (type) {
var OrderBy = [
{ type: 'x', id: 0, label: 'xx1', key: 'yy1' },
{ type: 'x', id: 1, label: 'xx2', key: [1,2] },
{ type: 'x', id: 9, label: 'xx2', key: ['a','b'] },
{ type: 'y', id: 0, label: 'xx44', key: 'yya' },
{ type: 'y', id: 1, label: 'xx45', key: 'yyb' },
{ type: 'y', id: 2, label: 'xx46', key: 'yyc' },
];
var filteredOrderBy = _.filter(OrderBy, function (order) {
if (order.type === type) {
return true;
} else return false;
});
return filteredOrderBy ;
};