Antd：Tree樹形控制元件資料解析（JSON轉換）

寶寶說愛寶寶發表於2019-02-20
控制元件JSON

有時候，我們需要將後臺傳回的JOSN格式展示給使用者看，這時需要將json格式的資料轉為樹結構所需要的資料結構，如圖：

Antd：Tree樹形控制元件資料解析（JSON轉換）

其需要轉換的資料結構：

[{
    "key": key,
    "title": title,
    "children": [{
        "key": key,
        "title": title,
        "children": [{
            "key": subKey,
            "title": subTitle,
        }]
    }]
}]複製程式碼

思路：

1、首選需要一個函式來判斷 value 值的資料型別，如果不是物件，則說明其是沒有子元素的，如果是物件，則需要新增key值children繼續展示其子元素

// 資料型別
checkDataType(data) {
    let type = null
    if (typeof data === 'object') {
        // 物件
        if (Object.prototype.toString.call(data) === "[object Null]") {
            // null
            type = 'null'
        } else if (Object.prototype.toString.call(data) === "[object Array]") {
            // []
            type = 'array'
        } else if (Object.prototype.toString.call(data) === "[object Object]") {
            // {}
            type = 'object'
        }
    } else {
        // 除 null 的基本資料型別 
        type = 'common'
    }
    return type
}
複製程式碼


2、其次便是轉換成我們想要的資料結構，主要有兩點：一個是需要一個陣列來儲存遍歷的key值，通過這個陣列才能在對應的key值下面新增children或者不新增；第二個充分利用物件的特性：名存在於棧記憶體中，值存在於堆記憶體中，但是棧記憶體會提供一個引用的地址指向堆記憶體中的值

verfiedData(data, _prekey, _tns) {
    const tns = _tns || showData
    // 判斷子元素的資料型別
    let dataType = this.checkDataType(data) 
    switch (dataType) {
        case 'object':
            const children = []
            // 記錄key值，目的為了尋找對應的插入位置 
            for (let i in data) {
                const key = i
                if (this.checkDataType(data[i]) === 'common' || this.checkDataType(data[i]) === 'null') {
                    tns.push({
                        title: `${key}: ${data[i]}`,
                        key: key
                    })
                    // 如果沒有子元素了，一定要插入一個佔位符，不然會錯位
                    children.push('noChild')
                } else {
                    tns.push({
                        title: key,
                        key
                    }) 
                    children.push(key)
                }
            }
            children.forEach((key, index) => {
                //尋找對應的插入位置，若沒有子元素了，直接返回，如果有，插入key值為children的陣列，再次呼叫函式
                if (key === 'noChild') {
                    return tns
                } else {
                    tns[index].children = [] 
                    this.verfiedData(data[key], key, tns[index].children)
                }
            }) 
            break;
        case 'array':
            // 陣列以下標作為key
            data.forEach((value, index) => {
                tns.push({
                    title: index,
                    key: index
                }) 
                tns[index].children = [] 
                this.verfiedData(data[index], index, tns[index].children)
            });
            break;
        default:
            tns.push({
                title: data,
                key: _prekey
            })
    }
}
複製程式碼

3、呼叫

this.verfiedData(certData)複製程式碼


4、demo程式碼地址：https://coding.net/u/sunqun/p/react-demo-app ， containers目錄下Tree檔案


相關文章