时间戳

首页 > 解决方案 > 如何使用 Javascript/Typescript 为 Angular 树的平面数组创建数据

javascript - 如何使用 Javascript/Typescript 为 Angular 树的平面数组创建数据

问题描述

我有以下 JSON 数据->

{
  "data": [
    {
      "documentId": "new_148_45646",
      "data": "new_data6"
    },
    {
      "documentId": "new_145_456",
      "data": "new_data1"
    },
    {
      "documentId": "new_148_4546",
      "data": "new_data2"
    },
    {
      "documentId": "new_145_456",
      "data": "new_data3"
    },
    
    {
      "documentId": "new_148_4546",
      "data": "new_data6"
    }      
  ]
}

我想将其转换为以下平面树数据

{
    "treeData": [
        {
            "documentId": "new_148_45646",
            "expandable": true,
            "level": 0           
          }, {
            "documentId": "new_148_45646",
            "expandable": false,
            "level": 1,
            "data": "new_data6"
          },
          {
            "documentId": "new_145_456",
            "expandable": true,
            "level": 0           
          }, {
            "documentId": "new_145_456",
            "expandable": false,
            "level": 1,
            "data": "new_data1"
          },
          {
            "documentId": "new_145_456",
            "expandable": false,
            "level": 1,
            "data": "new_data3"
          },
          {
            "documentId": "new_148_4546",
            "expandable": true,
            "level": 0           
          }, {
            "documentId": "new_148_4546",
            "expandable": false,
            "level": 1,
            "data": "new_data2"
          },
          {
            "documentId": "new_148_4546",
            "expandable": false,
            "level": 1,
            "data": "new_data6"
          }
    ]
}

因此，如果原始数组中有一个具有唯一 documentId 的元素，那么它将被转换为 2 个节点 -> 一个节点具有 documentid，级别 0，expandable=true，另一个节点节点具有相同的 documentid，expandable=false，级别1、数据。

如果原始数组中有 2 个具有相同 documentId 的元素，则它将转换为 3 个节点 -> 一个具有 documentid 的节点，级别 0，expandable=true 和 2 个具有相同 documentid，expandable=false，级别 1，数据的节点

如果原始数组中有 3 个具有相同 documentId 的元素，则它将转换为 4 个节点 -> 一个具有 documentid 的节点，级别 0，expandable=true 和 3 个具有相同 documentid，expandable=false，级别 1，数据的节点

数据将始终保持到级别 1。

有人可以帮我解决这个问题。谢谢

标签： javascriptangulartypescriptangular-materialangular-tree-component

解决方案

可能不是最好的代码，但它是单行代码 - 所以总比没有行好：p

const input = {
  "data": [
    {
      "documentId": "new_148_45646",
      "data": "new_data6"
    },
    {
      "documentId": "new_145_456",
      "data": "new_data1"
    },
    {
      "documentId": "new_148_4546",
      "data": "new_data2"
    },
    {
      "documentId": "new_145_456",
      "data": "new_data3"
    },
    
    {
      "documentId": "new_148_4546",
      "data": "new_data6"
    }      
  ]
}

const output = [...input.data.reduce((a,{documentId, data})=>(a.set(documentId,(a.get(documentId)||[]).concat([{documentId,expandable:false,level:1,data,}])),a),new Map)].flat().flatMap(i=>typeof i==='string'?({documentId:i,expandable:true,level:0}):i);

console.log(output)

推荐阅读