將數組對象轉化成element中樹形控件的數據結構

需求:將數組對象轉化成elementUI中樹形控件的數據結構形式,沒有父子級id區分。同時,判斷一級目錄、二級目錄是否都相同;判斷一級目錄是否相同,如果一級目錄相同則將二級目錄及以下都放到相同的一級目錄下。

Talk is cheap,show you the code.

將以下數組對象:

let info =  [
    {
        code: "7CE2D88A",
        gateway_name: "空調機組3號",
        longitude: "120.1054122",
        latitude: "30.3078394",
        first_level: "杭州市",
        second_level: "西湖區"
    },
    {
        code: "B4F8C9C4",
        gateway_name: "空調機組1號",
        longitude: "121.3682650",
        latitude: "31.1419520",
        first_level: "上海市",
        second_level: "閔行區"
    },
    {
        code: "EA90B25C",
        gateway_name: "測試1號",
        longitude: "121.3682650",
        latitude: "31.1419520",
        first_level: "上海市",
        second_level: "閔行區"
    },
    {
        code: "A7613898",
        gateway_name: "測試2號",
        longitude: "121.3682650",
        latitude: "31.1419520",
        first_level: "上海市",
        second_level: "靜安區"
    },
    {
        code: "C7DB5C30",
        gateway_name: "空調機組2號",
        longitude: "121.3682650",
        latitude: "118.915388",
        first_level: "南京市",
        second_level: "江寧區"
    }
]

轉換成這樣

[
    {
        label: '杭州市',
        children: [
            {
                label: '西湖區',
                children: [
                    {
                        label: '空調機組3號',
                        code: "7CE2D88A",
                        longitude: "120.1054122",
                        latitude: "30.3078394"
                    }
                ]
            }
        ]
    },
    {
        label: '上海市',
        children: [
            {
                label: '閔行區',
                children: [
                    {
                        label: '空調機組1號',
                        code: "B4F8C9C4",
                        longitude: "121.3682650",
                        latitude: "31.1419520"
                    },
                    {
                        label: "測試1號",
                        code: "EA90B25C",
                        longitude: "121.3682650",
                        latitude: "31.1419520"
                    }
                ]
            }, 
            {
                label: '靜安區',
                children: [
                    {
                        label: '測試2號',
                        code: "A7613898",
                        longitude: "121.3682650",
                        latitude: "31.1419520"
                    }
                ]
            }
        ]
    },
    {
        label: '南京市',
        children: [
            {
                label: '江寧區',
                children: [
                    {
                        label: '空調機組2號',
                        code: "C7DB5C30",
                        longitude: "121.3682650",
                        latitude: "118.915388",
                    }
                ]
            }
        ]
    }
]

 以下是我封裝的js,如有相同需求可以直接拿來用。如有不正確的地方歡迎各位大佬指正!

function treeData (data) {
    var newData = [], hash = {};
    for (let i = 0; i < data.length; i++) {
      if (!hash[data[i].first_level]) {
        hash[data[i].first_level] = {
          'label': data[i].first_level
        };
        hash[data[i].first_level]['children'] = [{
          'label': data[i].second_level
        }];
        for (let j = 0; j < hash[data[i].first_level].children.length; j++) {
          hash[data[i].first_level].children[j]['children'] = [{
            'label': data[i].gateway_name,
            'code': data[i].code,
            'long': data[i].longitude,
            'lat': data[i].latitude,
          }];
        }
        newData.push(hash[data[i].first_level]);
      } else {
        try {
          for (let k = 0; k < hash[data[i].first_level].children.length; k++) {
            if (hash[data[i].first_level].label == data[i].first_level &&
              hash[data[i].first_level].children[k].label == data[i].second_level) { // 判斷一級目錄、二級目錄都相同
                hash[data[i].first_level].children[k]['children'].push({
                  'label': data[i].gateway_name,
                  'code': data[i].code,
                  'long': data[i].longitude,
                  'lat': data[i].latitude,
                })
                throw new Error()
            }
          }
          if (hash[data[i].first_level].label == data[i].first_level) { // 判斷一級目錄相同
            hash[data[i].first_level]['children'].push({
              'label': data[i].second_level,
              'children': [{
                'label': data[i].gateway_name,
                'code': data[i].code,
                'long': data[i].longitude,
                'lat': data[i].latitude,
              }]
            })
          }
        } catch (error) {
          console.log(error)
        }
      }
    }
    return newData;
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章