how to extract and mapping object from array(object) with redundant key inside key

Question

i have following example array(object):

[
  {
    "id": 1,
    "name": "selling",
    "detail": [
      {
        "id": 11,
        "name": "sale-report",
        "detail": [
          { "id": 111, "name": "sale-report1", "detail": [] },
          { "id": 112, "name": "sale-report2", "detail": [] }
        ]
      }
    ]
  },
  {
    "id": 2,
    "name": "webstore",
    "detail": [
      {
        "id": 11,
        "name": "sale-report",
        "detail": [
          { "id": 111, "name": "webstore-report1", "detail": [] },
          { "id": 112, "name": "webstore-report2", "detail": [] }
        ]
      }
    ]
  },
  {
    "id": 2,
    "name": "setting",
    "detail": [
      {
        "id": 11,
        "name": "general",
        "detail": [
          { "id": 111, "name": "setting-general1", "detail": [] },
          { "id": 112, "name": "setting-general2", "detail": [] }
        ]
      }
    ]
  }
]

how to change the array with new format like this

[
  {
    "id": 1,
    "name": "selling",
  },
  {
    "id": 11,
    "name": "sale-report"
  },
  { "id": 111, "name": "sale-report1" },
  { "id": 112, "name": "sale-report2" },
  {
    "id": 2,
    "name": "webstore",
  },
  {
    "id": 11,
    "name": "sale-report",
  },
  { "id": 111, "name": "webstore-report1" },
  { "id": 112, "name": "webstore-report2" },
  {
    "id": 2,
    "name": "setting",
  },
  {
    "id": 11,
    "name": "general",
  },
  { "id": 111, "name": "setting-general1" },
  { "id": 112, "name": "setting-general2" }
]

with the condition that if there is a key "detail" inside object in the branch, it will be mapped as well (assuming unlimited key "detail" inside object inside array)

note: content of detail will be same as parent, but different value

thanks in advance

i tried mapping mannualy with foreach, but i cant figure out if detail key with array(object) has unlimited nesting

Answer 1

You could destructure the objects and take detail out of the object and map the rest object and the results of nested details array as flat array with a recursive function.

 const flat = (array = []) => array.flatMap(({ detail, ...rest }) => [ rest, ...flat(detail) ]), data = [{ id: 1, name: "selling", detail: [{ id: 11, name: "sale-report", detail: [{ id: 111, name: "sale-report1", detail: [] }, { id: 112, name: "sale-report2", detail: [] }] }] }, { id: 2, name: "webstore", detail: [{ id: 11, name: "sale-report", detail: [{ id: 111, name: "webstore-report1", detail: [] }, { id: 112, name: "webstore-report2", detail: [] }] }] }, { id: 2, name: "setting", detail: [{ id: 11, name: "general", detail: [{ id: 111, name: "setting-general1", detail: [] }, { id: 112, name: "setting-general2", detail: [] }] }] }], result = flat(data); console.log(result);

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

Answer 2

Simply, use recursion to do this.

Here is the working demo-

 let input = [ { id: 1, name: "selling", detail: [ { id: 11, name: "sale-report", detail: [ { id: 111, name: "sale-report1", detail: [] }, { id: 112, name: "sale-report2", detail: [] } ] } ] }, { id: 2, name: "webstore", detail: [ { id: 11, name: "sale-report", detail: [ { id: 111, name: "webstore-report1", detail: [] }, { id: 112, name: "webstore-report2", detail: [] } ] } ] }, { id: 2, name: "setting", detail: [ { id: 11, name: "general", detail: [ { id: 111, name: "setting-general1", detail: [] }, { id: 112, name: "setting-general2", detail: [] } ] } ] } ]; let result = []; function parseData(arr) { arr.forEach((item) => { result.push({ id: item.id || null, name: item.name || null }); if (item.detail && item.detail.length) { parseData(item.detail); } }); return result; } let output = parseData(input); console.log(output);

Answer 3

A non recursive method of doing this could look something like the following:

 const data = [{"id":1,"name":"selling","detail":[{"id":11,"name":"sale-report","detail":[{"id":111,"name":"sale-report1","detail":[]},{"id":112,"name":"sale-report2","detail":[]}]}]},{"id":2,"name":"webstore","detail":[{"id":11,"name":"sale-report","detail":[{"id":111,"name":"webstore-report1","detail":[]},{"id":112,"name":"webstore-report2","detail":[]}]}]},{"id":2,"name":"setting","detail":[{"id":11,"name":"general","detail":[{"id":111,"name":"setting-general1","detail":[]},{"id":112,"name":"setting-general2","detail":[]}]}]}]; const extract = (data) => { const result = []; const queue = [...data]; while(queue.length > 0) { const { detail, ...rest } = queue.shift(); result.push(rest); queue.unshift(...detail); } return result; }; console.log(extract(data));