reactjs 如何从key中含有冗余key数组(object)中提取和Map对象

5anewei6 于 2022-12-22 发布在 React

关注(0)|答案(3)|浏览(179)

我有下面的例子数组（对象）：

[
  {
    "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": [] }
        ]
      }
    ]
  }
]

如何将数组更改为新格式，如下所示

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

条件是如果分支中的对象内有键"detail"，则也将Map该键（假设数组内的对象内的键"detail"不受限制）
注：明细内容与父项相同，但值不同
先谢了
我尝试mapping mannualy与foreach，但我不能弄清楚，如果详细键与数组（对象）有无限嵌套

reactjs

来源：https://stackoverflow.com/questions/74886218/how-to-extract-and-mapping-object-from-arrayobject-with-redundant-key-inside-k

3条答案

按热度按时间

vxf3dgd41#

只需使用recursion即可完成此操作。
这是演示版-

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

赞(0）回复(0）举报 2022-12-22

fv2wmkja2#

可以对对象进行反结构化，从对象中取出detail，然后使用递归函数将rest对象和嵌套details数组的结果Map为平面数组。

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

赞(0）回复(0）举报 2022-12-22

slwdgvem3#

执行此操作的非递归方法如下所示：

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

赞(0）回复(0）举报 2022-12-22

我来回答

reactjs 如何从key中含有冗余key数组(object)中提取和Map对象

3条答案

相关问题

热门标签

最新问答