I have an array of objects with children. The goal is to remove every item from items arrays.
Is it possible to do without using forEach and map loops? How to use reduce in this case?
The problem is some arrays have items on one level and others have children array with items inside. Sample here:
{
"label": "child1",
"children": [
{
"label": "child2",
"items": [
"item1",
"item2"
]
},
{
"label": "child3",
"items": [
"item1",
"item2",
"item3"
]
}
]
}
As a result, I want to see a mutated array of objects with empty items arrays.
Here`s an object to be mutated:
[
{
"label": "parent",
"children": [
{
"label": "child1",
"children": [
{
"label": "child2",
"items": [
"item1",
"item2"
]
},
{
"label": "child3",
"items": [
"item1",
"item2",
"item3"
]
}
]
},
{
"label": "child4",
"items": []
},
{
"label": "child5",
"items": ["item1","item2"]
}
]
}
]
And here is my incomplete solution:
function flattenDeep(arr) {
return arr.reduce(
(acc, val) =>
Array.isArray(val)
? acc.concat(flattenDeep(val.children))
: acc.concat(val.children),
[]
);
}
Here's a way to empty all items arrays.
The idea is to use a predefined reducer method that can you can use recursively.
const reducer = (reduced, element) => {
// empty items array
if (element.items) {
element.items.length = 0;
}
// if element has children, recursively empty items array from it
if (element.children) {
element.children = element.children.reduce(reducer, []);
}
return reduced.concat(element); // or: [...reduced, element]
};
document.querySelector("pre").textContent =
JSON.stringify(getObj().reduce(reducer, []), null, " ");
// to keep relevant code on top of the snippet
function getObj() {
return [
{
"label": "parent",
"children": [
{
"label": "child1",
"children": [
{
"label": "child2",
"items": [
"item1",
"item2"
]
},
{
"label": "child3",
"items": [
"item1",
"item2",
"item3"
]
}
]
},
{
"label": "child4",
"items": []
},
{
"label": "child5",
"items": ["item1","item2"]
}
]
}
];
}
<pre></pre>
Related
I am trying to reformat some relatively unstructured json to fit my needs, where I want each object to have a 'name' attribute as well as a 'children' array for sub-objects. I have a json file that looks like below:
{
"varA":true,
"varB":false,
"varC": {
"time":"15:00:00",
"date":"Jul 10",
"items":["apple", banana"]
}
}
I would like to format it to be something like this:
{
"name": "data",
"children": [
{
"name": "varA",
"children": [
{"name": "true"}
]
},
{
"name": "varB",
"children": [
{"name": "false"}
]
},
{
"name": "varC",
"children": [
{
"name": "time",
"children": [
{"name": "15:00:00"}
]
},
{
"name": "date",
"children": [
{"name": "Jul 10"}
]
},
{
"name": "items",
"children": [
{"name": "apple"},
{"name": "banana"}
]
}
]
}
]
}
How would I be able to do this recursively using pure js, in the case that objects can have a different depths of subobjects? Or is it still possible to do it iteratively?
Thanks in advance!!!
const data = {
"varA":true,
"varB":false,
"varC": {
"time":"15:00:00",
"date":"Jul 10",
"items":["apple", "banana"]
}
}
function parse(key, val) {
if (val === undefined) return { name: key };
if (typeof val !== "object") {
return {
name: key,
children: [
parse(val)
]
}
}
return {
name: key,
children: Object.entries(val).map(([newKey, newVal]) => parse(newKey, newVal))
}
}
const parsedData = parse("data", data)
I have a list of elements like the following data
[
{
"title": "First",
"catalogCategories": [ "sport", "economy" ]
},
{
"title": "Second",
"catalogCategories": [ "politics", "tourism" ]
},
{
"title": "Third",
"catalogCategories": [ "sport", "universe" ]
},
{
"title": "Fourth",
"catalogCategories": [ "economy", "politics" ]
}
]
I am checking for each element of the list if the catalogCategories array exists and if it does i push in a catalogData array the category of any element only once, because it happens that the category for any element can be the same, i am filtering in the catalogData array all the categories of the elements in catalogCategories
This is the following code
let categoryData = [];
let isCategory = false
for (let product of list) {
if (product.catalogCategories[0].length > 0) {
isCategory = true
let isFound = false
for (let i = 0; i < categoryData.length; i++) {
if (categoryData[i].value === product.catalogCategories[0] ||
categoryData[i].value === product.catalogCategories[1] ) {
isFound = true;
}
}
if (!isFound) {
categoryData.push({"name": "catalogCategories", "label": product.catalogCategories[0], "selected": false, "value": product.catalogCategories[0]})
}
}
My problem is here
if (!isFound) {
categoryData.push({"name": "catalogCategories", "label": product.catalogCategories[0], "selected": false, "value": product.catalogCategories[0]})
}
As you can see i always only push the first element of the catalogCategories after all these checks, how can i write down that dynamically i can push the first and / or the second ?
"value": product.catalogCategories[0]
"label": product.catalogCategories[0]
You need first check for the entire catalogCategories not only the first element product.catalogCategories[0] by using a map and use new Map to keep track of not duplicate categories.
const list = [
{
"title": "First",
"catalogCategories": [ "sport", "economy" ]
},
{
"title": "Second",
"catalogCategories": [ "politics", "tourism" ]
},
{
"title": "Third",
"catalogCategories": [ "sport", "universe" ]
},
{
"title": "Fourth",
"catalogCategories": [ "economy", "politics" ]
}
]
let categoryDataMap = new Map();
for (let product of list) {
if (product.catalogCategories.length > 0) {
product.catalogCategories.map(catalog=>{
if(!categoryDataMap.has(catalog)){
categoryDataMap.set(catalog,{"name": "catalogCategories", "label": catalog, "selected": false, "value": catalog})
}
})
}
}
const categoryData = Array.from(categoryDataMap.values())
console.log(categoryData)
As an example - I've included a one element array that contains an object that has a Children key, which is an array of objects and each object also has its' own Children key that contains another array.
[
{
"Id": "1",
"Children": [
{
"Id": "2",
"Children": [
{
"Id": "10",
"DisplayName": "3-4",
},
{
"Id": "1000",
"DisplayName": "5-6",
},
{
"Id": "100",
"DisplayName": "1-2",
},
]
}
]
}
]
There is a second array of objects that I would like to compare the first array of objects to, with the intention of making sure that the first array is in the same order as the second array of objects, and if it is not - then sort until it is.
Here is the second array:
[
{
"Id": "1",
"Children": [
{
"Id": "2",
"Children": [
{
"Id": "100",
"DisplayName": "1-2",
},
{
"Id": "10",
"DisplayName": "3-4",
},
{
"Id": "1000",
"DisplayName": "5-6",
},
]
}
]
}
]
The data that this will run on can be up in the tens of thousands - so performance is paramount.
What I'm currently attempting is using a utility method to convert each element of the second array into a keyed object of objects e.g.
{
1: {
"Id": "1",
"Children": [
{
"Id": "2",
"Children": [
{
"Id": "4",
"DisplayName": "3-4",
},
{
"Id": "3",
"DisplayName": "1-2",
},
]
}
]
}
}
This allows fast look up from the top level. I'm wondering if I should continue doing this all the way down or if there is an idiomatic way to accomplish this. I considered recursion as well.
The order of the already sorted array is not based on Id - it is arbitrary. So the order needs to be preserved regardless.
Assuming same depth and all Id's exist in each level of each object use a recursive function that matches using Array#findIndex() in sort callback
function sortChildren(main, other) {
other.forEach((o, i) => {
if (o.children) {
const mChilds = main[i].children, oChilds = o.children;
oChilds.sort((a, b) => {
return mChilds.findIndex(main => main.Id === a.Id) - mChilds.findIndex(main => main.Id === b.Id)
});
// call function again on this level passing appropriate children arrays in
sortChildren(mChilds, oChilds)
}
})
}
sortChildren(data, newData);
console.log(JSON.stringify(newData, null, ' '))
<script>
var data = [{
"Id": "1",
"Children": [{
"Id": "2",
"Children": [{
"Id": "3",
"DisplayName": "1-2",
},
{
"Id": "4",
"DisplayName": "3-4",
},
]
}]
}]
var newData = [{
"Id": "1",
"Children": [{
"Id": "2",
"Children": [{
"Id": "4",
"DisplayName": "3-4",
},
{
"Id": "3",
"DisplayName": "1-2",
},
]
}]
}]
</script>
I have a json data in this format and I would like to load data in an array which is an object, without hard coding the object keys. I would like to get items and labels in each category and each category has it name for object key. At the moment I get the data by
...myData.labels.name; or ...items.name; which is not effective because
the name changes depending on the category.
[
[
{
"key": "mykey",
"category": "myCategoryKey",
"category_label": "myCategoryLabel",
"field": "filter",
"items": {
"name": [
"item1",
"item2"
]
},
"labels": {
"name": [
"Item1",
"Item2"
]
}
},
{
"key": "mykey2",
"category": "myCategoryKey2",
"category_label": "myCategoryLabel2",
"field": "filter",
"items": {
"name2": [
"item1",
"item2"
]
},
"labels": {
"name3": [
"Item1",
"Item2"
]
}
}
]
]
Use Object.keys() to get Keys for items present if values change dynamically.
And then use the keys to get corresponding values.
var data = {
"key": "mykey2",
"category": "myCategoryKey2",
"category_label": "myCategoryLabel2",
"field": "filter",
"items": {
"name2": [
"item1",
"item2"
]
},
"labels": {
"name3": [
"Item1",
"Item2"
]
} }
var labelsPresent = Object.keys(data.labels);
console.log(labelsPresent);
var labelValues= labelsPresent[0];
console.log(data.labels[labelValues]);
I have a nested array of objects that I am parsing in JavaScript, but I'm having difficulty creating the target array.
Here's the properly-rendered Kendo UI treeview with a sample array attached to it (i.e. the way the final dataSource array should look like):
http://plnkr.co/edit/YpuXJyWgGI7h1bWR0g70?p=preview
Kendo UI treeview widget
My source array has nested "children" arrays, where the leaf node is the "drms" array.
As I parse the nested children, I am trying to do the following :
the non-empty "children" array needs to be renamed to "drms"
the empty "children" array needs to be deleted
Here is a sample source array:
[ /* SOURCE ARRAY */
{
"category": "Market Risk",
"sysid": 1,
"children": [
{
"category": "General",
"sysid": 2,
"children": [],
"drms": [
{
"name": "1 Day VaR (99%)"
},
{
"name": "10 Day VaR (99%)"
}
]
},
{
"category": "Decomposition",
"sysid": 3,
"children": [],
"drms": [
{
"name": "1D VaR Credit"
},
{
"name": "1D VaR Equity"
}
]
},
{
"category": "Sensitivities",
"sysid": 4,
"children": [
{
"category": "Currency Pairs",
"sysid": 11,
"children": [
{
"category": "EUR/USD",
"sysid": 12,
"children": [],
"drms": [
{
"name": "Spot"
},
{
"name": "Spot - 0.01"
}
]
}
],
"drms": []
}
],
"drms": []
}
],
"drms": []
},
{
"category": "CCR",
"sysid": 6,
"children": [
{
"category": "General (CCR)",
"sysid": 7,
"children": [],
"drms": [
{
"name": "MTM"
},
{
"name": "PFE"
}
]
}
],
"drms": []
}
]
and the target array which I've modified manually in order to render the Kendo TreeView :
[
{
"category": "Market Risk",
"sysid": 1,
"drms": [
{
"category": "General",
"sysid": 2,
"drms": [
{
"name": "1 Day VaR (99%)",
"riskMeasure": "-PERCENTILE(SUM([99_HSVaR]:[1D]),1)",
"cubeVector": "[99_HSVaR]:[1D]"
},
{
"name": "10 Day VaR (99%)",
"riskMeasure": "-PERCENTILE(SUM([99_HSVaR]:[2W]),1)",
"cubeVector": "[99_HSVaR]:[2W]"
},
{
"name": "Day over Day VaR",
"riskMeasure": "-PERCENTILE(SUM(today),1)+PERCENTILE(SUM(yesterday),1)",
"cubeVector": "[BASELINE]:[99_HSVaR]:[2W] as today, [BASELINE-1]:[99_HSVaR]:[2W] as yesterday"
}
]
},
{
"category": "Decomposition",
"sysid": 3,
"drms": [
{
"name": "1D VaR Credit",
"riskMeasure": "SUM([99_HSVaR]:[1D CR])",
"cubeVector": "[99_HSVaR]:[1D CR]"
},
{
"name": "1D VaR Equity",
"riskMeasure": "SUM([99_HSVaR]:[1D EQ])",
"cubeVector": "[99_HSVaR]:[1D EQ]"
}
]
},
{
"category": "Sensitivities",
"sysid": 4,
"drms": [
{
"category": "Currency Pairs",
"sysid": 11,
"drms": [
{
"category": "EUR/USD",
"sysid": 12,
"children": [],
"drms": [
{
"name": "Spot",
"riskMeasure": "SUM([EUR_USD by EUR]:[Spot - 0.00])",
"cubeVector": "[EUR_USD by EUR]:[Spot - 0.00]"
},
{
"name": "Spot - 0.01",
"riskMeasure": "SUM([EUR_USD by EUR]:[Spot - 0.01])",
"cubeVector": "[EUR_USD by EUR]:[Spot - 0.01]"
}
]
}
],
}
]
}
],
},
{
"category": "CCR",
"sysid": 6,
"drms": [
{
"category": "General (CCR)",
"sysid": 7,
"drms": [
{
"name": "MTM",
"riskMeasure": "SUM(MTM:MTM)",
"cubeVector": "MTM:MTM"
},
{
"name": "PFE",
"riskMeasure": "PERCENTILE(SUM(x),95)",
"cubeVector": "[Simulated]:[MCS] IF value > 0 as x"
}
]
}
]
}
]
and my JavaScript routine which is not quite working yet. A bit of confusion while parsing the nested children:
function create_TempDrmTree() {
// convert raw def risk measures (drm) data into a tree format for the Kendo treeview widget.
var data = getTestDrmTree();
var drmsJson = [];
var i = 0;
_.each(data, function (item) {
drmsJson.push({ "category": item.category, drms: [] });
if (item.children.length > 0) {
pushDrms(item.children);
}
i++;
});
function pushDrms(children) {
_.each(children, function (item) {
if (item.children.length > 0) {
pushDrms(item.children);
}
else {
// no more children, so get the DRMs from item
// leaving tempty children[] causes an issue on Kendo treeview
delete item.children;
drmsJson[i]["drms"] = item;
}
});
}
return drmsJson;
}
Based on your original idea, I modified it slightly. This works perfectly for my scenario.
EDITED: from What is the most efficient way to clone an object?, we can easily create a brand new array and keep original one untouched.
function parseDrmTree(items, isCloned) {
if (isCloned !== true) {
// Create json string from original item, and then parse it.
// And only do this at the root.
items = JSON.parse(JSON.stringify(items));
isCloned = true;
}
// reparse the DRM source tree, renaming "children" array to "drms".
items.forEach(function (item, index) {
if (item.children.length > 0) {
// copy children[] to drms[]
item.drms = parseDrmTree(item.children, isCloned);
}
// children[] is empty; drms[] exist at this level
delete item.children;
}, this);
return items;
}
You don't have to give an isCloned value, just input the target array, the function will create a brand new array, and use it to create the desired structure, and the origin one is untouched.