1. 程式人生 > >如何用模板渲染後臺返回不確定的data

如何用模板渲染後臺返回不確定的data

銀行 amt con string bsp 需要 工商銀行 對象 農業

工作中遇到一個需求,要求把後臺返回的所有數據依次渲染出來,數據的key、value都是不確定的。剛開始覺得不行,後來想了下還是可以實現的,那就是通過二維數組。

假設後臺傳來的是json數據:

var data = [{
            "oppName": "楊過",
            "oppNo": "12345678",
            "bankName": "中國銀行",
            "amt": 180,
            "buildDate": "2017-09-18",
            "buildTime": "15:58:03",
            "acceptNo": "170918",
            "journal": "20170910",
            "accept": "現金",
            "status": "成功",
            "channelName": "a通道"
        },
        {
            "oppName": "郭靖",
            "oppNo": "12345677",
            "bankName": "中國農業銀行",
            "amt": 180,
            "buildDate": "2017-09-18",
            "buildTime": "15:58:03",
            "acceptNo": "170918",
            "journal": "20170910",
            "accept": "現金",
            "status": "成功",
            "channelName": "d通道"
        }, {
            "oppName": "洪七公",
            "oppNo": "123456787",
            "bankName": "中國建設銀行",
            "amt": 180,
            "buildDate": "2017-09-18",
            "buildTime": "15:58:03",
            "acceptNo": "170918",
            "journal": "20170910",
            "accept": "支付寶",
            "status": "成功",
            "channelName": "b通道"
        }, {
            "oppName": "喬峰",
            "oppNo": "12855678",
            "bankName": "中國工商銀行",
            "amt": 180,
            "buildDate": "2017-09-18",
            "buildTime": "15:58:03",
            "acceptNo": "170918",
            "journal": "20170910",
            "accept": "微信",
            "status": "成功",
            "channelName": "c通道"
        },
    ]

  只需要取出value值組成新數組即可。

var arr = []
for (let index = 0; index < data.length; index++) {
    var obj = data[index];
    var item = Object.values(obj);//es6語法,取出對象的value值
    arr.push(item);
}
console.log(arr)//[["楊過", "12345678", "中國銀行", 180, "2017-09-18", "15:58:03", "170918", "20170910", "現金", "成功", "a通道"],
["郭靖", "12345677", "中國農業銀行", 180, "2017-09-18", "15:58:03", "170918", "20170910", "現金", "成功", "d通道"
],...]

  如此一來,只需要遍歷arr的值渲染到頁面即可。

如何用模板渲染後臺返回不確定的data