How to group keys from a nested object? - javascript

Hya 👋
Suppose we have a dynamic object like so:
[
{
"object": "block",
"id": "089cd0d8-ccbf-4e9e-97a6",
"parent": {
"type": "page_id",
"page_id": "d4b96daf-47a3-4a04-b200"
},
"type": "child_database",
"child_database": {
"title": "Hero"
}
},
{
"object": "page",
"id": "d3022361-96d2-4e15-999e",
"parent": {
"type": "database_id",
"database_id": "089cd0d8-ccbf-4e9e-97a6"
},
},
{
"object": "block",
"id": "a0cba166-1787-4e30-8cc3",
"parent": {
"type": "page_id",
"page_id": "d3022361-96d2-4e15-999e"
},
"type": "heading_1",
"heading_1": {
"rich_text": [
{
"type": "text",
"text": {
"content": "Introduction",
"link": null
},
"plain_text": "Introduction",
"href": null
}
],
}
},
{
"object": "block",
"id": "dbfdd892-8c04-4de3-bf0e",
"parent": {
"type": "page_id",
"page_id": "d3022361-96d2-4e15-999e"
},
"type": "heading_2",
"heading_2": {
"rich_text": [
{
"type": "text",
"text": {
"content": "This is introduction section",
"link": null
},
"plain_text": "This is introduction section",
"href": null
}
],
}
}
]
I would like to reconstruct this object by grouping them based on parent-child like relationship. Since every object has "parent" prop.
The desired result should be like so, where the elements that share the same parent are grouped under child array.
{
"d4b96daf-47a3-4a04-b200": {
"object": "block",
"id": "089cd0d8-ccbf-4e9e-97a6",
"type": "child_database",
"child": [{
"d3022361-96d2-4e15-999e": {
"object": "page",
"child": [{
"a0cba166-1787-4e30-8cc3": {
"object": "block",
"type": "heading_1",
"heading_1": {
"rich_text": [{
"type": "text",
"text": {
"content": "Introduction",
"link": null
},
"plain_text": "Introduction",
"href": null
}]
}
}
},
{
"dbfdd892-8c04-4de3-bf0e": {
"object": "block",
"type": "heading_1",
"heading_2": {
"rich_text": [{
"type": "text",
"text": {
"content": "This is introduction section",
"link": null
},
"plain_text": "This is introduction section",
"href": null
}]
}
}
}
]
}
}]
}
}
Current workaround
/**
* Generator that traverses through nested object
*/
function* traverse(xs: any[] = []): any {
for (let x of xs) {
yield x
yield* traverse(x.child || [])
}
}
/**
* If the property exists in the nested object, then return node
*/
const deepFind = (block: any, pred: any) => (obj: any) => {
for (let node of traverse([obj])) {
if (pred(node)) {
return node
}
}
}
const findById = (block: any) => (obj: any) => deepFind(block, (o: any) => o[block.id])(obj)
export default async function group(pages: Page[]) {
// stuck here 🙏
}

You can do this linearly: create a Map id=>object, iterate the list, if the parent is already on the map, add your object to the parent.child, otherwise create a placeholder object with the parent's id.
let m = new Map()
for (let obj of data) {
let dummy = {id: 'dummy', child: []}
let oid = obj.id
m.set(oid, {...dummy, ...obj, ...m.get(oid)})
let pid = obj.parent.page_id // or whatever depending on type
m.set(pid, m.get(pid) ?? dummy)
m.get(pid).child.push(obj)
}
In the end, the m.values() will contain a flat list of objects with child arrays properly populated.

Related

Get all its parent nodes path for each child nodes

Hi I have below code running, but I would like to add one more property called path which should consist all its parent node path
Expected output I need something as I have shown for cardTtile, so I need same for each node.
[
{
"id": "cardShop",
"key": "cardShop",
"title": "cardShop",
"selectable": false,
"path":cardShop"
"children": [
{
"id": "cardData",
"key": "cardData",
"title": "cardData",
"parentId": "cardShop",
"path":cardShop.cardData"
"selectable": false,
"children": [
{
"id": "cardTitle",
"key": "cardTitle",
"title": "cardTitle",
"parentId": "cardData",
"path":cardShop.cardData.cardTitle"
"isLeaf": true
},
{
"id": "cardType",
"key": "cardType",
"title": "cardType",
"parentId": "cardData",
"isLeaf": true
},
{
"id": "dtmProductName",
"key": "dtmProductName",
"title": "dtmProductName",
"parentId": "cardData",
"isLeaf": true
},
{
"id": "viewAllCards",
"key": "viewAllCards",
"title": "viewAllCards",
"parentId": "cardData",
"selectable": false,
"children": [
{
"id": "url",
"key": "url",
"title": "url",
"parentId": "viewAllCards",
"isLeaf": true
},
{
"id": "text",
"key": "text",
"title": "text",
"parentId": "viewAllCards",
"isLeaf": true
}
]
}
]
},
{
"id": "eligibilityChecker",
"key": "eligibilityChecker",
"title": "eligibilityChecker",
"parentId": "cardShop",
"selectable": false,
"children": [
{
"id": "header",
"key": "header",
"title": "header",
"parentId": "eligibilityChecker",
"isLeaf": true
},
{
"id": "subHeader",
"key": "subHeader",
"title": "subHeader",
"parentId": "eligibilityChecker",
"isLeaf": true
},
{
"id": "bulletPoints",
"key": "bulletPoints",
"title": "bulletPoints",
"parentId": "eligibilityChecker",
"isLeaf": true
}
]
}
]
}
]
I have below running code example here. I tried to persist parentKey recursively but its not giving me expected output.
const transform = data => {
const loop = (data, parent) => Object.entries(data).map(([key, value]) => {
let additional = parent? {
parentId: parent
}:{}
if(typeof value === 'object' && !Array.isArray(value)){
additional = {
...additional,
selectable: false,
children: loop(value, key)
}
}else{
additional.isLeaf = true
}
return {
id: key,
key,
title: key,
...additional
}
})
return loop(data)
}
let jsonObj = {
"data": {
"cardShop": {
"cardData": {
"cardTitle": "The Platinum Card<sup>®</sup>",
"cardType": "credit-cards",
"dtmProductName": "PlatinumCard",
"viewAllCards": {
"url": "credit-cards/all-cards",
"text": "All Cards"
}
},
"eligibilityChecker": {
"header": "Check your eligibility",
"subHeader": "The Platinum Card®",
"bulletPoints": [
"Only takes a couple of minutes to complete",
"Will not impact your credit rating",
"Allows you to apply with confidence"
]
}
}
}
}
console.log(transform(jsonObj.data))
]
You suggestion would be appreciated
Thanks
You could take another variable for path and add the actual key to it.
const transform = data => {
const loop = (data, parentId, previousPath = '') => Object
.entries(data)
.map(([key, value]) => {
const
additional = parentId ? { parentId } : {},
path = previousPath + (previousPath && '.') + key;
Object.assign(
additional,
value && typeof value === 'object' && !Array.isArray(value)
? { selectable: false, children: loop(value, key, path) }
: { isLeaf: true }
);
return { id: key, key, title: key, path, ...additional };
});
return loop(data);
}
const data = { cardShop: { cardData: { cardTitle: "The Platinum Card<sup>®</sup>", cardType: "credit-cards", dtmProductName: "PlatinumCard", viewAllCards: { url: "credit-cards/all-cards", text: "All Cards" } }, eligibilityChecker: { header: "Check your eligibility", subHeader: "The Platinum Card®", bulletPoints: ["Only takes a couple of minutes to complete", "Will not impact your credit rating", "Allows you to apply with confidence"] } } };
console.log(transform(data));
.as-console-wrapper { max-height: 100% !important; top: 0; }

How to update deeply nested array of objects JavaScript

I have the following Array of object using this information I want to update array of object with value:a without mutating it directly (I am able to solve it using index but I don't want to update it using index) below is the code that I have tried so far
ccategory.map((item) =>
item.id === payload.id
? {
...item,
categoryItems: item.categoryItems.map(
(catItem) => catItem.categoryItemID === payload.categoryItemID
// stuck here how should I update categorySubItems?
),
}
: item
),
const payload={
"id": "4476c379-2c4f-4454-b59e-cae2f62fdfe2",
"categorySubItemsID": "c2cba4d6-5635-4b5c-acf3-b93b4d435aa9",
"categoryItemID": "fdb0e86b-a2d9-4029-8988-9f50121794d3",
"value": "a"
}
MyJSON looks like this
const category=[
{
"id": "4476c379-2c4f-4454-b59e-cae2f62fdfe2",
"categoryName": "Car",
"categoryFields": [
{
"name": "Car Name",
"type": "text",
"categoryID": "e9da78fb-d349-4b03-9b77-e3cc0dc57d25"
},
{
"name": "Price",
"type": "number",
"categoryID": "c9e147a6-b5d1-424b-99bf-a973ce189322"
}
],
"categoryItems": [
{
"categoryItemID": "fdb0e86b-a2d9-4029-8988-9f50121794d3",
"categorySubItems": [
{
"categorySubItemsID": "c2cba4d6-5635-4b5c-acf3-b93b4d435aa9",
"value": "",
"label": "Car Name",
"type": "text",
"categoryLinkID": "e9da78fb-d349-4b03-9b77-e3cc0dc57d25"
},
{
"categorySubItemsID": "01d5e1e7-3927-42a6-ad05-7399a5895096",
"value": "",
"label": "Price",
"type": "number",
"categoryLinkID": "c9e147a6-b5d1-424b-99bf-a973ce189322"
}
]
},
{
"categoryItemID": "f13237d7-abfd-40d3-ae35-0b59ddf5734e",
"categorySubItems": [
{
"categorySubItemsID": "2af389b9-03bc-41d3-86bb-8bf324ca3cb3",
"value": "",
"label": "Car Name",
"type": "text",
"categoryLinkID": "e9da78fb-d349-4b03-9b77-e3cc0dc57d25"
},
{
"categorySubItemsID": "934ef505-72bb-4d64-adf1-2aa5e928a539",
"value": "",
"label": "Price",
"type": "number",
"categoryLinkID": "c9e147a6-b5d1-424b-99bf-a973ce189322"
}
]
}
]
},
{
"id": "9882b210-2d99-43a3-8aea-9f7d7c88eeda",
"categoryName": "Bike",
"categoryFields": [
{
"name": "Bike Name",
"type": "text",
"categoryID": "73bee24c-ef64-4798-bc37-5fe90cbc8de7"
}
],
"categoryItems": []
}
]
In your inner .map(), if catItem.categoryItemID === payload.categoryItemID matches, you can return a new object that has an updated categorySubItems, which you can update by creating a new array by mapping catItem.categorySubItems. When mapping the sub category items, if your categorySubItemsID matches the one from the payload object, you can return a new updated object with a new value set to that of payload.value, otherwise, you can keep the original item, eg:
ccategory.map((item) =>
item.id === payload.id
? {
...item,
categoryItems: item.categoryItems.map((catItem) =>
catItem.categoryItemID === payload.categoryItemID
? {
...catItem,
categorySubItems: catItem.categorySubItems.map(subCatItem =>
subCatItem.categorySubItemsID === payload.categorySubItemsID
? {...subCatItem, value: payload.value}
: subCatItem
)
}
: catItem
),
}
: item
),
As you can see, this can get quite unwieldy. That's why it's often useful to use something like useImmer(), which allows you to directly modify a "draft" state value in an immutable way while keeping your state updates mutable.

How to sort an array with parents and children objects with JavaScript?

I have an array with object, which I need to sort in a such way that first the parent object should appear, and then its children objects, and so on. However, when I try to find index of a parent object in array in order to push the children object after it, the findIndex() method returns -1. Can somebody point to the root of this problem, as I cannot clearly see why it does that.
The code and data array that I'm using is written below.
const data = [
{
"_id": "0",
"parent": null,
"title": "All"
}, {
"_id": "61c0a9cb8f67e811d55abb2d",
"parent": null,
"title": "Electronics"
}, {
"_id": "61c0a9cb8f67e811d55abb2e",
"parent": { "_id": "61c0a9cb8f67e811d55abb2d" },
"title": "Phones"
}, {
"_id": "61c0a9cb8f67e811d55abb2f",
"parent": { "_id": "61c0a9cb8f67e811d55abb2d" },
"title": "Laptops"
}, {
"_id": "61c0a9cb8f67e811d55abb30",
"parent": { "_id": "61c0a9cb8f67e811d55abb2d" },
"title": "TVs"
}, {
"_id": "61c0a9cb8f67e811d55abb31",
"parent": null,
"title": "Literature"
}, {
"_id": "61c0a9cb8f67e811d55abb32",
"parent": { "_id": "61c0a9cb8f67e811d55abb31"},
"title": "Study Literature"
}, {
"_id": "61c0a9cb8f67e811d55abb33",
"parent": { "_id": "61c0a9cb8f67e811d55abb31" },
"title": "Fictional Literature"
}, {
"_id": "61c0a9cb8f67e811d55abb34",
"parent": { "_id": "61c0a9cb8f67e811d55abb31" },
"title": "Comic books"
}, {
"_id": "61c0a9cb8f67e811d55abb35",
"parent": { "_id": "61c0a9cb8f67e811d55abb2e" },
"title": "Smartphones"
}, {
"_id": "61c0a9cb8f67e811d55abb36",
"parent": { "_id": "61c0a9cb8f67e811d55abb35" },
"title": "Accessories"
}
];
let parents = [];
data.forEach( element => {
if( element.parent == null ) {
parents.push(element);
}
else {
let parentId = element.parent._id;
let index = parents.findIndex(item => {
item._id == parentId;
});
console.log(index);
parents.splice(index+1, 0, element);
}
});
Using item => {parentId == item._id;} does require a 'return' to be used: item => {return parentId == item._id;} without the return the function is basically item => null; which is than seen as false by .findIndex() resulting in a -1
If you use the arrow function without the curly braces a return is implied (But limits you to single line expressions as a trade-off): item => parentId == item._id
Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Push object into an array of objects nested within an array of objects

I am trying to push the values "label" and "link" into an object within "data" where the target is the object with an id that is equal to the "parent" value of another object. These values should be pushed into the "children" property of the matching target object. This does not appear to be working. Any pointers?
var data = [
{
"id": 0,
"label": "example page0",
"link": "/apx/...",
"icon": "..",
"parent": null
"children": null
},
{
"id": 1,
"label": "example page1",
"link": "/apx/...",
"icon": "notes",
"parent": null
"children": null
},
{
"id": 2,
"label": "example page2",
"link": "/apx/....",
"icon": "...",
"parent": null
"children": null
},
{
"id": 3,
"label": "example subpage3",
"link": "/apx/....",
"icon": "...",
"parent": 2
"children": null
},
{
"id": 4,
"label": "example subpage4",
"link": "/apx/....",
"icon": "...",
"parent": 2
"children": null
}]
for (let entry of data) {
if (entry.parent > 0) {
var index = data.findIndex(x => x.id == entry.parent);
data[index].children.push({ label: entry.label, link: entry.link })
}
}
Expected output:
[
{
"id": 0,
"label": "example page0",
"link": "/apx/...",
"icon": "..",
"parent": null
"children": null
},
{
"id": 1,
"label": "example page1",
"link": "/apx/...",
"icon": "notes",
"parent": null
"children": null
},
{
"id": 2,
"label": "example page2",
"link": "/apx/....",
"icon": "...",
"parent": null
"children": [
{ "label": "example subpage3", "link": "/apx/...." },
{ "label": "example subpage4", "link": "/apx/...." }
]
}
]
You can implement it by using Array.prototype.reduce. The reduce will iterate over the data array and find elements having the parent property which are not null and find its parent from the data array by searching with the id property.
Now you need to check whether the children property is existing or not, if not you need to create a new array object and assign to the children property, else just append to existing children array:
const data = [{"id":0,"label":"example page0","link":"/apx/...","icon":"..","parent":null,"children":null},{"id":1,"label":"example page1","link":"/apx/...","icon":"notes","parent":null,"children":null},{"id":2,"label":"example page2","link":"/apx/....","icon":"...","parent":null,"children":null},{"id":3,"label":"example subpage3","link":"/apx/....","icon":"...","parent":2,"children":null},{"id":4,"label":"example subpage4","link":"/apx/....","icon":"...","parent":2,"children":null}]
const res = data.reduce((acc, entry, idx, data) => {
if (entry.parent > 0) {
const matchingParent = data.find(e => e.id === entry.parent);
if (matchingParent) {
const child = {
label: entry.label,
link: entry.link
};
if (matchingParent.children) {
matchingParent.children.push(child)
} else {
matchingParent.children = [child];
}
}
} else {
acc.push(entry);
}
return acc;
}, []);
console.log(res);
You can also do it using a for..of loop also:
const data = [{"id":0,"label":"example page0","link":"/apx/...","icon":"..","parent":null,"children":null},{"id":1,"label":"example page1","link":"/apx/...","icon":"notes","parent":null,"children":null},{"id":2,"label":"example page2","link":"/apx/....","icon":"...","parent":null,"children":null},{"id":3,"label":"example subpage3","link":"/apx/....","icon":"...","parent":2,"children":null},{"id":4,"label":"example subpage4","link":"/apx/....","icon":"...","parent":2,"children":null}];
const acc = [];
for (let entry of data) {
if (entry.parent > 0) {
const matchingParent = data.find(e => e.id === entry.parent);
if (matchingParent) {
const child = {
label: entry.label,
link: entry.link
};
if (matchingParent.children) {
matchingParent.children.push(child)
} else {
matchingParent.children = [child];
}
}
} else {
acc.push(entry);
}
}
console.log(acc);
This is when processing needs to happen in-place. In that case we find elements with non-null parents we can add those as children to the parent element and remove those from the data array using splice.
Iterating backwards as the splice will change the length property of the data array:
const data = [{"id":0,"label":"example page0","link":"/apx/...","icon":"..","parent":null,"children":null},{"id":1,"label":"example page1","link":"/apx/...","icon":"notes","parent":null,"children":null},{"id":2,"label":"example page2","link":"/apx/....","icon":"...","parent":null,"children":null},{"id":3,"label":"example subpage3","link":"/apx/....","icon":"...","parent":2,"children":null},{"id":4,"label":"example subpage4","link":"/apx/....","icon":"...","parent":2,"children":null}];
for (let i = data.length - 1; i>= 0; i--) {
const entry = data[i];
if (entry.parent > 0) {
const matchingParent = data.find(e => e.id === entry.parent);
if (matchingParent) {
const child = {
label: entry.label,
link: entry.link
};
if (matchingParent.children) {
matchingParent.children.push(child)
} else {
matchingParent.children = [child];
}
data.splice(i, 1);
}
}
}
console.log(data);

Convert one Multidimensional JSON array to another

I have the following input object
{
"id": 1,
"isLeaf": false,
"name": "New rule",
"pid": 0,
"dragDisabled": true,
"children": [
{
"id": "new1",
"value": "data1",
"then": false,
"type": "set",
"forEach": false,
"pid": 1
},
{
"id": "new2",
"value": "data2",
"then": true,
"type": "if",
"forEach": false,
"pid": 1,
"children": [
{
"id": "new3",
"type": "Then",
"enableElse": true,
"pid": "new2",
"children": [
{
"id": "new5",
"value": "data3",
"then": false,
"type": "fuzzy_search",
"forEach": false,
"pid": "new3"
}
]
},
{
"id": "new4",
"type": "Else",
"enableElse": true,
"pid": "new2",
"children": [
{
"id": "new6",
"value": "data4",
"then": false,
"type": "return",
"forEach": false,
"pid": "new4"
}
]
}
]
}
]
}
I need to convert it into the following json
[
{
"id": "new1",
"condition": "data1"
},
{
"id": "new2",
"condition": "data2",
"then": [{
"id": "new5",
"condition": "data3"
}],
"else": [{
"id": "new6",
"condition": "data4"
}]
}
]
I have to recursively iterate through all existing inner child array of the input json array to formulate the output.
Following is the partially implemented code for the functionality.
ruleJSONFormatter = (request, parentItem, innerJSON) => {
try {
var outerObject = request;
if (outerObject.children && outerObject.children.length) {
var innerArray = outerObject.children;
// second iteration with inner children
innerArray.forEach((innerItem, index) => {
let parentObj = {};
let recursiveObj = {}; let thenArray = [];
recursiveObj['condition'] = innerItem.value && innerItem.value != undefined ? innerItem.value.formatedData : {};
recursiveObj['type'] = innerItem.type;
recursiveObj['id'] = innerItem.id;
recursiveObj['pid'] = innerItem.pid;
if (innerItem.children && innerItem.children != undefined && innerItem.children.length) {
switch (innerItem.type) {
case 'if':
recursiveObj['then'] = [];
recursiveObj['else'] = [];
}
if (Object.keys(parentObj).length == 0) {
parentObj = recursiveObj;
} else {
}
ruleJSONFormatter(innerItem, parentItem, parentObj)
} else {
if (Object.keys(parentObj).length == 0)
responseArray.push(innerJSON);
}
});
}
else {
console.log("No Values Inside the Formated Data ")
}
console.log("output-----------");
console.log(JSON.stringify(responseArray));
return responseArray
} catch (error) {
console.log('((((((((((((((((((((((((((', error)
}
}
final output array has a condition key which binds the value key from the input json and 'then' key which contains the multiple successive inner children array which is the success condition for type 'if' object. similar is the case for 'else' key in output
I find it hard to recursively call the same function to generate the desired output. the problem arises when there are deep nesting in the children array.Any help is appreciated.Thanks.

Categories

Resources