如何用模板渲染後臺返回不確定的data
阿新 • • 發佈:2017-10-02
銀行 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