Convert JSON data into the desired format

Question

Convert JSON data into the desired format

My JSON input is as follows:

  [
        {
            "date": {
                "value": "2022-05-01"
            },
            "parent": {
                "value": "Choclate"
            },
            "child": {
                "value": null,
                "filterable_value": "EMPTY"
            },
            "qty": {
                "value": 21052631.657999996,
                "rendered": "21.05M"
            }
        },
        ...
]

I am looking to transform the JSON data based on parent categories and format the child elements under each parent in a specific way. The transformation should be dynamic without hardcoding any comparisons with strings.

The desired output format of the JSON should resemble the following:

[
  {
    "Choclate": [
     {
          null: [
        {
            "2022-05-01": {
              "value": 21052631.657999996
            }
          }
        ]
      },
      {
          "ABC": [
        {
            "2022-05-01": {
              "value": 505567
            }
          }
          
        ]
      },
      ...
      
      ]
  },
  {
    "Drink":[
{
          "ABC": [
        {
            "2022-05-01": {
              "value": 882010439.286
            }
          }
          
        ]
      },
      ...
]   
  }
  ]

I have attempted to separate the parents and child values into arrays, but I've been unsuccessful so far. Please provide suggestions on how to achieve the transformation from the input JSON to the desired output JSON format.

const data =[
        {
            "date": {
                "value": "2022-05-01"
            },
            "parent": {
                "value": "Choclate"
            },
            "child": {
                "value": null,
                "filterable_value": "EMPTY"
            },
            "qty": {
                "value": 21052631.657999996,
                "rendered": "21.05M"
            }
        },
        ...
];

let uniqueparent = [...new Set(data.map(item => item['parent']['value']))];
let uniquechild = [...new Set(data.map(item => item['child']['value']))];

console.log(uniqueparent);
console.log(uniquechild);

From this point, I'm uncertain how to proceed with transforming my data into the desired JSON format.

javascript json for-loop javascript-objects

Answer 1

Answer №1

This works perfectly for my needs:

const data = [
        {
            "date": {
                "value": "2022-05-01"
            },
            "parent": {
                "value": "Chocolate"
            },
            "child": {
                "value": null,
                "filterable_value": "EMPTY"
            },
            "qty": {
                "value": 21052631.657999996,
                "rendered": "21.05M"
            }
        },
        ...
];

const formattedData = data.reduce((result, el) => {
    const parentName = el.parent.value;
    const childName = el.child.value;
    const dateValue = el.date.value;
    
    if (!result[parentName]) result[parentName] = {};
    
    const parent = result[parentName];
    
    if (!parent[childName]) parent[childName] = {};
    
    const child = parent[childName];
    
    if (!child[dateValue]) child[dateValue] = el.qty.value;
    
    return result;
}, {});

console.log(formattedData);

If you specifically need an object in the "date" property:

const data = [
        {
           ...
];

const formattedData = data.reduce((resultTypes, el) => {
    const resultMap = resultTypes.resultMap;
    const resultArr = resultTypes.resultArr;
    
    const parentName = el.parent.value;
    const childName = el.child.value;
    const dateValue = el.date.value;
    
    if (!resultMap[parentName]) {
        ...
    
    return resultTypes;
}, {resultMap: {}, resultArr: []}).resultArr;

console.log(formattedData);

Answer 2

This works perfectly for my needs:

const data = [
        {
            "date": {
                "value": "2022-05-01"
            },
            "parent": {
                "value": "Chocolate"
            },
            "child": {
                "value": null,
                "filterable_value": "EMPTY"
            },
            "qty": {
                "value": 21052631.657999996,
                "rendered": "21.05M"
            }
        },
        ...
];

const formattedData = data.reduce((result, el) => {
    const parentName = el.parent.value;
    const childName = el.child.value;
    const dateValue = el.date.value;
    
    if (!result[parentName]) result[parentName] = {};
    
    const parent = result[parentName];
    
    if (!parent[childName]) parent[childName] = {};
    
    const child = parent[childName];
    
    if (!child[dateValue]) child[dateValue] = el.qty.value;
    
    return result;
}, {});

console.log(formattedData);

If you specifically need an object in the "date" property:

const data = [
        {
           ...
];

const formattedData = data.reduce((resultTypes, el) => {
    const resultMap = resultTypes.resultMap;
    const resultArr = resultTypes.resultArr;
    
    const parentName = el.parent.value;
    const childName = el.child.value;
    const dateValue = el.date.value;
    
    if (!resultMap[parentName]) {
        ...
    
    return resultTypes;
}, {resultMap: {}, resultArr: []}).resultArr;

console.log(formattedData);

Answer 3

Answer №2

If you're looking to organize your data in a more hierarchical way, building a tree structure might be what you need. An easy example using arrays can be found here:

To enhance the functionality of this structure, consider creating a Node class with "data", "children", and "parent" variables. Then, implement a Tree class or functionality that can efficiently work with Nodes to manage elements, track them, display them in a specific format, and more.

Answer 4

If you're looking to organize your data in a more hierarchical way, building a tree structure might be what you need. An easy example using arrays can be found here:

To enhance the functionality of this structure, consider creating a Node class with "data", "children", and "parent" variables. Then, implement a Tree class or functionality that can efficiently work with Nodes to manage elements, track them, display them in a specific format, and more.

Convert JSON data into the desired format

Answer №1

Answer №2

Similar questions

Issues with posting form data in AngularJS are occurring

Ways to connect the value of one variable to multiple others

Minimize the length of the styled-component class name in the upcoming iteration

Encountering difficulty in adding content to a table using JavaScript. An error message appears stating that assignment to a function

Struggling to eliminate placeholders using regular expressions in JavaScript

Utilize the asynchronous power of Morgan to quickly display your

When utilizing jQuery lightbox to pull data from a database using PHP/Ajax, it may require a double click the

Ways to retrieve the data type of individual elements from a JSONix mapping file in JavaScript

The call to Contentful's getAsset function resulted in an undefined value being

Receive JSON Object from AWS SQS Event

`Generate JSON list`

A step-by-step guide on converting JSON data from JavaScript to C# variables

Adding a new attribute-value pair to an existing json11 object in C++ - some useful tips!

What is the best way to transfer an array made in JavaScript to a different JSP and subsequently utilize that array in a Java function within that JSP?

Scrolling seamlessly within a container that is fixed in position

The toggle class feature of jQuery is malfunctioning when placed inside a different div

Leverage information from graphql API response to enhance functionality in React components

Error in GraphQL query: specified argument is mandatory, yet not supplied

A guide to sketching the ellipsoid with three.js

Vuejs unstyled content flash