Transforming an array in JavaScript into a JSON object

Question

Transforming an array in JavaScript into a JSON object

I'm currently working on creating a loop in JavaScript or jQuery to generate a new JSON object from an array. The goal is to convert an input JavaScript array into a desired format for the output. Here's the input array:

INPUT:

    [
      {
        "parent": "parent_1",
        "child": "abc",
        "data": "data1"
      },
      ...

From the above array, I need a loop that will produce the following JSON object structure:

OUTPUT:

[
  {
    "parent_1": {
      "child": [
        {
          "name": "abc",
          "data": "data1"
        },
        ...
      ]
    }
  },
    ...
]

javascript arrays json for-loop grouping

Answer 1

Answer №1

To organize the information, you can group the data by using the parent key as a reference for an object and then include the remaining object properties in the children array of that specific group.

This method ensures that the original data remains unchanged.

const
    data = [{ parent: "parent_1", child: "abc", data: "data1" }, { parent: "parent_1", child: "def", data: "data2" }, { parent: "parent_1", child: "ghi", data: "data3" }, { parent: "parent_2", child: "jkl", data: "data4" }, { parent: "parent_2", child: "acc", data: "data5" }, { parent: "parent_3", child: "mjh", data: "data6" }, { parent: "parent_3", child: "fg1", data: "data7" }, { parent: "parent_2", child: "dfg", data: "data8" }, { parent: "parent_3", child: "jkk", data: "data9" }, { parent: "parent_4", child: "3ff", data: "data10" }, { parent: "parent_3", child: "mhg", data: "data11" }, { parent: "parent_1", child: "gnh", data: "data12" }],
    result = Object.values(data.reduce((r, { parent, ...o }) => {
        r[parent] ??= { [parent]: { children: [] } };
        r[parent][parent].children.push(o);
        return r;
    }, []));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

To organize the information, you can group the data by using the parent key as a reference for an object and then include the remaining object properties in the children array of that specific group.

This method ensures that the original data remains unchanged.

const
    data = [{ parent: "parent_1", child: "abc", data: "data1" }, { parent: "parent_1", child: "def", data: "data2" }, { parent: "parent_1", child: "ghi", data: "data3" }, { parent: "parent_2", child: "jkl", data: "data4" }, { parent: "parent_2", child: "acc", data: "data5" }, { parent: "parent_3", child: "mjh", data: "data6" }, { parent: "parent_3", child: "fg1", data: "data7" }, { parent: "parent_2", child: "dfg", data: "data8" }, { parent: "parent_3", child: "jkk", data: "data9" }, { parent: "parent_4", child: "3ff", data: "data10" }, { parent: "parent_3", child: "mhg", data: "data11" }, { parent: "parent_1", child: "gnh", data: "data12" }],
    result = Object.values(data.reduce((r, { parent, ...o }) => {
        r[parent] ??= { [parent]: { children: [] } };
        r[parent][parent].children.push(o);
        return r;
    }, []));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

Here is a solution that might work for you:

function restructureArray(arr, key) {
  const obj = {};
  arr.forEach(item => {
    const value = item[key];
    if (!Array.isArray(obj[value])) obj[value] = [];
    delete item[key];
    obj[value].push(item);
  });

  return Object.keys(obj).map(value => {
    return { [value]: { items: obj[value] } };
  });
}

To use this function, simply call it like this:

restructureArray(*yourArray*, "category")

Answer 4

Here is a solution that might work for you:

function restructureArray(arr, key) {
  const obj = {};
  arr.forEach(item => {
    const value = item[key];
    if (!Array.isArray(obj[value])) obj[value] = [];
    delete item[key];
    obj[value].push(item);
  });

  return Object.keys(obj).map(value => {
    return { [value]: { items: obj[value] } };
  });
}

To use this function, simply call it like this:

restructureArray(*yourArray*, "category")

Answer 5

Answer №3

One way to achieve this is by using the .reduce method in JavaScript:

let items = [ {name: 'item 1', category: 'category-1'}, {name: 'item 2', category: 'category-2'} ]

let resultObject = items.reduce(function(obj, item) {
      if (!obj[item.category]) obj[item.category] = {children: []};
      obj[item.category].children.push(item);
      return obj;
}, {})
console.log(resultObject);

Answer 6

One way to achieve this is by using the .reduce method in JavaScript:

let items = [ {name: 'item 1', category: 'category-1'}, {name: 'item 2', category: 'category-2'} ]

let resultObject = items.reduce(function(obj, item) {
      if (!obj[item.category]) obj[item.category] = {children: []};
      obj[item.category].children.push(item);
      return obj;
}, {})
console.log(resultObject);

Answer 7

Answer №4

If you're looking to achieve this particular task, the code snippet below will help you get there.

var sampleArray = [{"parent":"parent_1","child":"abc","data":"data1"},{"parent":"parent_1","child":"def","data":"data2"},{"parent":"parent_1","child":"ghi","data":"data3"},{"parent":"parent_2","child":"jkl","data":"data4"},{"parent":"parent_2","child":"acc","data":"data5"},{"parent":"parent_3","child":"mjh","data":"data6"},{"parent":"parent_3","child":"fg1","data":"data7"},{"parent":"parent_2","child":"dfg","data":"data8"},{"parent":"parent_3","child":"jkk","data":"data9"},{"parent":"parent_4","child":"3ff","data":"data10"},{"parent":"parent_3","child":"mhg","data":"data11"},{"parent":"parent_1","child":"gnh","data":"data12"}];

var finalResult = {};

$.each(sampleArray, function (index, item) {
    if(!finalResult[item.parent]) {
        finalResult[item.parent] = [];
    }
    var childData = {'child': {'name': item.child, 'data': item.data}};
    (finalResult[item.parent]).push(childData);
});

console.log(finalResult)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 8

If you're looking to achieve this particular task, the code snippet below will help you get there.

var sampleArray = [{"parent":"parent_1","child":"abc","data":"data1"},{"parent":"parent_1","child":"def","data":"data2"},{"parent":"parent_1","child":"ghi","data":"data3"},{"parent":"parent_2","child":"jkl","data":"data4"},{"parent":"parent_2","child":"acc","data":"data5"},{"parent":"parent_3","child":"mjh","data":"data6"},{"parent":"parent_3","child":"fg1","data":"data7"},{"parent":"parent_2","child":"dfg","data":"data8"},{"parent":"parent_3","child":"jkk","data":"data9"},{"parent":"parent_4","child":"3ff","data":"data10"},{"parent":"parent_3","child":"mhg","data":"data11"},{"parent":"parent_1","child":"gnh","data":"data12"}];

var finalResult = {};

$.each(sampleArray, function (index, item) {
    if(!finalResult[item.parent]) {
        finalResult[item.parent] = [];
    }
    var childData = {'child': {'name': item.child, 'data': item.data}};
    (finalResult[item.parent]).push(childData);
});

console.log(finalResult)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Transforming an array in JavaScript into a JSON object

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The headers are correct, however Chrome is displaying the message "Resource interpreted as Document."

Issues with jQuery .on() hover functionality in HTML5 select element not being resolved

Exploring the versatility of Grails 3 profiles through JSON rendering and implementing a One to Many relationship with

Is it feasible to develop an asynchronous function in Node.js that executes concurrently?

What is the best way to save request URLs in JavaScript while following the DRY principle?

Optimizing Backend Access with Laravel and Vue JS: How to Choose the Most Effective Approach

Looking to modify the contents of a shopping cart by utilizing javascript/jQuery to add or remove items?

Display or conceal certain HTML form elements based on the selection made in the previous form element

The href attribute is not functioning correctly on Internet Explorer version 8

React.js - "Encountered error: Unable to access 'map' property of undefined variable"

What is the best method for breaking down this JSON data into distinct 'objects'?

Is there a way to retrieve consecutive rows from mysql_fetch_assoc() in a separate file and store them in an array variable?

How can I break down an object with hyphenated key names?

transmit information to a FLUTTER server

Stop submission of form using react by implementing e.preventDefault();

Issue with MongoDB find() function not retrieving any results (Assignment)

Having trouble retrieving JSON data from the server in an Android application

Error: protractor encountered an unexpected issue

dynamic text overlay on a bootstrap carousel

How come an <a> tag is nabbing mouse clicks from a <canvas> element?