2

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"
        }
      ]
    }
  }
]
Improve this question
2
  • JSON is a string. please add your code and error, you get. Commented Jan 28, 2021 at 9:39
  • btw, you want a strange structure. you need always to know parent to get the children. Commented Jan 28, 2021 at 9:58

4 Answers 4

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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")
Improve this answer

Comments

0

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);
Improve this answer

Comments

0

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>

Improve this answer

1 Comment

thanks for help but there are multiple "child" key inside each parent, but I need one "child" key as an array

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.