【问题标题】:How to create data for Flat Array for Angular Tree using Javascript/Typescript如何使用 Javascript/Typescript 为 Angular 树的平面数组创建数据
【发布时间】:2020-10-13 13:00:51
【问题描述】:

我有以下 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。

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

【问题讨论】:

    标签: javascript angular typescript angular-material angular-tree-component


    【解决方案1】:

    可能不是最好的代码,但它是单行代码 - 所以总比没有行要好: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)

    【讨论】:

    • 感谢@Jaromanda X 的回答。使用上述内容时,我得到以下异常。类型 '[any, any][]'.ts(2339) 上不存在属性 'flat' 我是 angular/typescript 的新手。试图找到解决方案。你知道吗...谢谢
    • 哦,抱歉,我没有意识到 typescript 不懂现代(ES2019)javascript
    • 再次感谢@Jaromanda X..我使用stackoverflow.com/questions/53556409/…..解决了这个异常。
    • 酷 - 很高兴你能解决这个问题 - 甚至没想到你在使用打字稿(应该已经阅读了你的标签)
    猜你喜欢
    • 2020-08-22
    • 2021-02-13
    • 1970-01-01
    • 1970-01-01
    • 2019-01-01
    • 1970-01-01
    • 2021-04-19
    • 1970-01-01
    • 2020-08-19
    相关资源
    最近更新 更多