如何将数组json转换为Angular中的对象树答案

【问题标题】：How to convert an array json to Tree of objects in Angular如何将数组json转换为Angular中的对象树
【发布时间】：2021-09-27 01:04:14
【问题描述】：

我想将 json 转换为对象树。例如

    {
    "id": 2,
    "label": "BEAUTY",
    "description": "",
    "parent_id": 0,
  },
  {
    "id": 5,
    "label": "SunGlass",
    "description": "",
    "parent_id": 2,
  },
     {
    "id": 6,
    "label": "Shirts",
    "description": "",
    "parent_id": 2,
  },
  {
    "id": 41,
    "label": "black Glasses",
    "description": "electronique",
    "parent_id": 5,
  },
    {
    "id": 34,
    "label": "T-shirts",
    "description": "electronique",
    "parent_id": 6,
  },
    {
    "id": 3,
    "label": "Phones",
    "description": "",
    "parent_id": 0,
    "embedded_parent": null,
  }

我想要的是将此列表转换为基于标签属性的树对象，就像这样的结果：

const TREE_DATA = {
  BEAUTY: {
    'SunGlass': {'black Glasses':null},
    'Shirts': null,
    
  },
  Phones: {
      'Sbardilate': null,
      'T-shirts': null,
      'Balons': null,
  },
  
};

我需要一个递归函数来产生这个结果，将这个结果以角度传递给我的组件小部件。提前谢谢你

【问题讨论】：

你尝试过什么，它到底有什么问题？你所问的似乎根本不是 Angular 或 TypeScript 所特有的。
抱歉@jonrsharpe 没有解释清楚，我想要的就是将我的 json 列表转换为我指定的树格式
这部分很清楚，但请注意，SO 不是代码编写服务 - 您在哪里尝试实现这一目标？就 TS/Angular 而言，它们似乎根本不相关，这只是一个常规的 JS 任务。
因为在最终结果中我有一个构建树组件的函数，但我需要给它树对象 TREE_DATA，在我的示例中我手动编写它，但我基于 json 动态构建它数据
如果你对js如何做这个任务有任何想法，对我有很大帮助，因为我没有扎实的JS背景

标签： json angular typescript

【解决方案1】：

正如@jonrsharpe 所提到的，您应该始终提供您的解决方案。向我们展示你做了什么，以及你到底在哪里卡住了。仅从 StackOverflow 复制和粘贴解决方案对您没有帮助。

对于您的确切问题，我给您一些提示。首先创建一些使开发更容易的接口。对于 Node，您可以定义一个递归接口，如下所示：

interface Item {
  id: number,
  label: string,
  parent_id: number,
  description: string
}

interface Node {
  [label: string]: Node | null;
}

接下来您应该做的是按parent_id 对元素进行分组。这使您可以通过 groupedByParentId[id] 以 O(1) 的访问时间快速访问一个节点中的所有信息。

const groupedByParentId = array.reduce(
  (acc, cur) => {
    const parentId = cur.parentId;
    const groupedItems = acc[parentId] == [];
    return {...acc, [parentId]: [...groupedItems, cur]}
  },
  {} as {[id: string]: Item[]}
);

为树根定义一个函数也是一个好主意：

const rootNodeId = 0;
function makeTree(): Node {
  const node = makeNode(rootNodeId);
  return node;
}

那么就只剩下makeNode函数了。由于您还没有自己尝试过任何事情，因此我不会提供完整的解决方案，但这里有一些提示，以便您可以轻松地进行操作：

函数 API 是 makeNode(id: number)，它返回一个 Node
用上述数据结构获取当前节点的子节点
如果没有孩子，您已经知道要返回什么；）
如果有子节点，为每个节点创建一个节点，并将节点存储在由label 定义的属性中
最终返回节点

祝你好运！ :)

【讨论】：

非常感谢 Felix 先生，我会应用这个提示