What is the best way to organize and rearrange the JSON object within Angular8?

Question

What is the best way to organize and rearrange the JSON object within Angular8?

I received the following response and I need to reorganize all the data and its children based on the buSubRegion that is currently nested within the children. Additionally, I need to add the buSubRegion outside of the children.

For example: In the response below, 1UL Africa belongs to the Africa object and is also present within the Europe object, so I want to merge the children of all objects related to 1UL Africa into one array of objects.

If a buSubRegion has the same value and is present in multiple objects, then I need to find all those objects and merge them into one.

Also, Agbara - Savoury does not have a BU sub-region so I do not want to include this object.

Can someone please help me achieve this?

const data = [
    ...
];

Below is the expected output:

[
    ...
];

javascript json typescript

Answer 1

Answer №1

To effectively group the data by buSubRegion, you can utilize the reduce method along with looping through the children property.

const data = [{"name":"Africa","id":1,"children":[{"name":"Agbara - Laundry","buSubRegion":"1UL Africa","children":[{"lineId":"R_D005_TPKDST02"}]},{"name":"Agbara - Savoury","children":[{"lineId":"R_D005_TPKDST02"}]}]},{"name":"Europe","id":2,"children":[{"name":"Europe1","buSubRegion":"1UL Africa","children":[{"lineId":"R_D005_TPKDST02"}]},{"name":"Europe2","buSubRegion":"Test Europe","children":[{"lineId":"R_D005_TPKDST02"}]}]},{"name":"Latem","id":3,"children":[{"name":"test1","buSubRegion":"latem1","children":[{"lineId":"R_D005_TPKDST02"}]}]}];

const result = data.reduce((a,{children, ...rest})=>{
    children.forEach(({buSubRegion,...others})=>{
        if(buSubRegion){
            a[buSubRegion] ??= {buSubRegion, ...rest, children:[]};
            a[buSubRegion].children.push({buSubRegion, ...others})
        }
    });
    return a;
},{});
console.log(Object.values(result));

Answer 2

To effectively group the data by buSubRegion, you can utilize the reduce method along with looping through the children property.

const data = [{"name":"Africa","id":1,"children":[{"name":"Agbara - Laundry","buSubRegion":"1UL Africa","children":[{"lineId":"R_D005_TPKDST02"}]},{"name":"Agbara - Savoury","children":[{"lineId":"R_D005_TPKDST02"}]}]},{"name":"Europe","id":2,"children":[{"name":"Europe1","buSubRegion":"1UL Africa","children":[{"lineId":"R_D005_TPKDST02"}]},{"name":"Europe2","buSubRegion":"Test Europe","children":[{"lineId":"R_D005_TPKDST02"}]}]},{"name":"Latem","id":3,"children":[{"name":"test1","buSubRegion":"latem1","children":[{"lineId":"R_D005_TPKDST02"}]}]}];

const result = data.reduce((a,{children, ...rest})=>{
    children.forEach(({buSubRegion,...others})=>{
        if(buSubRegion){
            a[buSubRegion] ??= {buSubRegion, ...rest, children:[]};
            a[buSubRegion].children.push({buSubRegion, ...others})
        }
    });
    return a;
},{});
console.log(Object.values(result));

What is the best way to organize and rearrange the JSON object within Angular8?

Answer №1

Similar questions

From JSON/RSS format to an NSDictionary

Preventing functionality with Jquery hashtag in the URL

Grunt Task Unable to Run Modules Referenced with Require in Node Code

Upon clicking a button on a JSP page, it triggers the ready function in JavaScript. This action may lead to

Tips for forming JSON object within an array with the help of jQuery

Turn on the text field when the enter key is pressed

Finding it challenging to maintain the alignment of the Drop Down Menu in the center while adjusting the

How can I correctly rotate an object around a specific point using three.js?

Encountered an issue while attempting to retrieve the value using Go lang

My navbar list elements are not functioning properly due to an issue with JS. Does anyone have a solution to resolve this issue

Using PHP and JQuery to disable a button after the letter "U" is typed

Troubles arise with Angular's foreach method when attempting to add new elements

Failure to build using the spread operator is unique to the Travis CI environment

Recalling the layout following the user's computer restart

Add Material UI Snackbar to the document's body

What steps can be taken to optimize and streamline this update API, eliminating redundancy and improving efficiency?

Searching by element within a JSON array

Generating a personalized array by matching an array with an object using JavaScript / Node.js

How can I populate an array to use in a datatable when rendering?

React.js Form Validation issue: When using input type "number", the text field remains a single value even after attempting to delete characters with the backspace key