JSON conversion with JavaScript

Question

This is the data I received from API but It not works with DevExtreme Grid well so I want to convert this JSON:

[{
  "name" : "Cedrick Wyman",
  "id" : "9101",
  "children" : [ {
    "name" : "Ursula Hirthe",
    "id" : "9106",
    "children" : [ {
      "name" : "Viviane Breitenberg",
      "id" : "11651"
    } ]
  }, {
    "name" : "Twila Erdman",
    "id" : "9102",
    "children" : [ {
      "name" : "Zion Volkman",
      "id" : "9105"
    }, {
      "name" : "Lauryn Leannon",
      "id" : "9104"
    } ]
  } ]
}]

To something like this with Javascript. I want to remove 'children' and move them outside

[ {
  "name" : "Cedrick Wyman",
  "id" : "9101" 
  },
  { "name" : "Ursula Hirthe",
    "id" : "9106"
  },
  {
   "name" : "Viviane Breitenberg",
   "id" : "11651"
  }, 
  {
    "name" : "Twila Erdman",
    "id" : "9102" 
  },
  {
   "name" : "Zion Volkman",
   "id" : "9105"
  }, 
  {
   "name" : "Lauryn Leannon",
   "id" : "9104"
  }
] 

How can I do this? Sorry for my bad English! Thanks a lot!

Answer 1

You can call .flatMap() on your array by mapping to an array of objects, which recursively calls .flatMap() on children to further get the {name, id} objects from your children array:

const arr = [{ "name": "Cedrick Wyman", "id": "9101", "children": [{ "name": "Ursula Hirthe", "id": "9106", "children": [{ "name": "Viviane Breitenberg", "id": "11651" }] }, { "name": "Twila Erdman", "id": "9102", "children": [{ "name": "Zion Volkman", "id": "9105" }, { "name": "Lauryn Leannon", "id": "9104" }] }] }];

const res = arr.flatMap(function inner({name, id, children = []}) {
  return [{name, id}, ...children.flatMap(inner)];
});

console.log(res);

An alternative without .flatMap() for better browser support would be to use the following:

const arr = [{ "name": "Cedrick Wyman", "id": "9101", "children": [{ "name": "Ursula Hirthe", "id": "9106", "children": [{ "name": "Viviane Breitenberg", "id": "11651" }] }, { "name": "Twila Erdman", "id": "9102", "children": [{ "name": "Zion Volkman", "id": "9105" }, { "name": "Lauryn Leannon", "id": "9104" }] }] }];

const res = [].concat.apply([], arr.map(function inner(o) {
  return [].concat.apply({name: o.name, id: o.id}, (o.children || []).map(inner));
}));

console.log(res);

Answer 2

You can do something like this:

const data = `[{
    "name" : "Cedrick Wyman",
    "id" : "9101",
    "children" : [ {
      "name" : "Ursula Hirthe",
      "id" : "9106",
      "children" : [ {
        "name" : "Viviane Breitenberg",
        "id" : "11651"
      } ]
    }, {
      "name" : "Twila Erdman",
      "id" : "9102",
      "children" : [ {
        "name" : "Zion Volkman",
        "id" : "9105"
      }, {
        "name" : "Lauryn Leannon",
        "id" : "9104"
      } ]
    } ]
  }]`;

const dataJSON = JSON.parse(data);

const newData = [];

for (let e of dataJSON) {
  newData.push({ name: e.name, id: e.id });
  for (let child1 of e.children) {
    newData.push({ name: child1.name, id: child1.id });
    for (let child2 of child1.children) {
      newData.push({ name: child2.name, id: child2.id });
    }
  }
}

console.log(newData);

Answer 3

The answer with flatMap is NOT supported on Internet Explorer, however my solution will work everywhere regardless of browser or server-side code.

Plus, This is more easily understandable code. You call a function recursively, until there are no children keys left in any of the items in the list.

For each item, append the name/id to flatList and if children are present, recursion starts and whatever is returned is appended to flatList preserve the desired order.

const json = [{
  "name" : "Cedrick Wyman",
  "id" : "9101",
  "children" : [ {
    "name" : "Ursula Hirthe",
    "id" : "9106",
    "children" : [ {
      "name" : "Viviane Breitenberg",
      "id" : "11651"
    } ]
  }, {
    "name" : "Twila Erdman",
    "id" : "9102",
    "children" : [ {
      "name" : "Zion Volkman",
      "id" : "9105"
    }, {
      "name" : "Lauryn Leannon",
      "id" : "9104"
    } ]
  } ]
}];

const getFlattenedList = function (unflattenedList) {
  if (!(Array.isArray(unflattenedList) && unflattenedList.length)) return;
  let flatList = [];
  for (let i = 0; i < unflattenedList.length; i += 1) {
    const item = unflattenedList[i];
    flatList = flatList.concat({ name: item.name, id: item.id });
    if (Array.isArray(item.children) && item.children.length) {
      flatList = flatList.concat(getFlattenedList(item.children));
    }
  }
  return flatList;
};

console.log(getFlattenedList(json));