Converting JavaScript Array to JSON object

Question

I am trying to write a for or JQuery. Each loop so that It will generate a new JSON Object from an array in a desired format. I want to output a JSON Object from an input JavaScript Array. I have a following input array to convert:

INPUT:

    [
      {
        "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"
      }
    ]

so from above array want to run a for or JQuery. Each loop so that it will generate a new JSON Object in the following format:

OUTPUT:

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

user_7850543 · Answer

I think you want something like this

const convertArray = (arr, field) => {
  const obj = {};
  arr.forEach(elem => {
    const param = elem[field];
    if (!Array.isArray(obj[param])) obj[param] = [];
    delete elem[field];
    obj[param].push(elem);
  });

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

then you would use as

convertArray(*array*, "parent")

user_1447675 · Answer

You could group the data by using parent as key for an object and add the rest of the object to the children array of the group.

This approach does not muate the given data.

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; }

user_9466181 · Answer

You can use .reduce function, for example:

var array = [ {name: 'item 1', cate: 'cate-1'}, {name: 'item 2', cate: 'cate-2'} ]

var object = array.reduce(function(obj, item) {
      if (!obj[item.cate]) obj[item.cate] = {child: []};
      obj[item.cate].child.push(item);
      return obj;
}, {})
console.log(object);

user_8537893 · Answer

You can use the below code for this.

var arr = [{"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 result = {};

$.each(arr, function (i, item) {
    if(!result[item.parent]) {
        result[item.parent] = [];
    }
    var data = {'child': {'name': item.child, 'data': item.data}};
    (result[item.parent]).push(data);
});

console.log(result)

Converting JavaScript Array to JSON object

4 Answers