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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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