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

Answer 1

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")

Answer 2

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

Answer 3

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

Answer 4

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)

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