JavaScript實現(xiàn)構(gòu)造json數(shù)組的方法分析
本文實例講述了JavaScript實現(xiàn)構(gòu)造json數(shù)組的方法。分享給大家供大家參考,具體如下:
從后端拿到的數(shù)據(jù)是一個數(shù)組,每個元素中包含的數(shù)據(jù)如下(host相同的記錄都是相鄰的)
currentTime:"1470729601"
host:"10.3.34.21"
taskList:null
taskNum:1
想構(gòu)造類似如下結(jié)構(gòu)的json數(shù)組
[{ name: 'host:10.1.6.49', data: [ [1470641461000, 5], [1470642581000, 4], [1470643701000, 2], [1470647341000, 3] ] }, { name: 'host:10.3.34.18', data: [ [1470641461000, 2], [1470642581000, 2], [1470643701000, 1], [1470647341000, 4] ] }, { name: 'host:10.2.2.22', data: [ [1470641461000, 3], [1470642581000, 2], [1470643701000, 6], [1470647341000, 4] ] },{ name: 'host:10.1.110.96', data: [ [1470641461000, 1], [1470642581000, 8], [1470643701000, 1], [1470647341000, 1] ] },{ name: 'host:10.2.2.87', data: [ [1470641461000, 7], [1470642581000, 3], [1470643701000, 6], [1470647341000, 5] ] }]
錯誤的方式:
var backendData = data.result; var resultList = new Array(); var curHost = ""; var oneHostDataList = new Array(); for (var i in backendData) { var host = backendData[i].host; if (host != curHost) { if(i != 0) { var item = new Object(); item.name = curHost; item.data = oneHostDataList; resultList.push(item); } oneHostDataList = new Array(); curHost = host; } else { var dot = new Array(); dot.push(backendData[i].currentTime * 1000); dot.push(backendData[i].taskNum); oneHostDataList.push(dot); } } var item = new Object(); item.name = curHost; item.data = oneHostDataList; resultList.push(item); $scope.data = JSON.stringify(resultList);
以上方式的問題在于轉(zhuǎn)換后會使得name和host和帶上引號,正確的方式如下:
var backendData = data.result; var resultList = []; var curHost = ""; var oneHostDataList = new Array(); for (var i in backendData) { var host = backendData[i].host; if (host != curHost) { if(i != 0) { var item = { name: curHost, data: oneHostDataList }; resultList.push(item); } oneHostDataList = new Array(); curHost = host; } else { var dot = new Array(); dot.push(backendData[i].currentTime * 1000); dot.push(backendData[i].taskNum); oneHostDataList.push(dot); } } var item = new Object(); item.name = curHost; item.data = oneHostDataList; resultList.push(item); $scope.data = resultList;
PS:這里再為大家推薦幾款相關(guān)的json在線工具供大家參考:
在線JSON代碼檢驗、檢驗、美化、格式化工具:
http://tools.jb51.net/code/json
JSON在線格式化工具:
http://tools.jb51.net/code/jsonformat
在線XML/JSON互相轉(zhuǎn)換工具:
http://tools.jb51.net/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具:
http://tools.jb51.net/code/jsoncodeformat
在線json壓縮/轉(zhuǎn)義工具:
http://tools.jb51.net/code/json_yasuo_trans
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript中json操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
- JS實現(xiàn)合并json對象的方法
- JavaScript簡單實現(xiàn)合并兩個Json對象的方法示例
- Queryable.Union 方法實現(xiàn)json格式的字符串合并的具體實例
- JavaScript實現(xiàn)JSON合并操作示例【遞歸深度合并】
- js根據(jù)json數(shù)據(jù)中的某一個屬性來給數(shù)據(jù)分組的方法
- Javascript中JSON數(shù)據(jù)分組優(yōu)化實踐及JS操作JSON總結(jié)
- JS遍歷JSON數(shù)組及獲取JSON數(shù)組長度操作示例【測試可用】
- JS實現(xiàn)鍵值對遍歷json數(shù)組功能示例
- JavaScript數(shù)組,JSON對象實現(xiàn)動態(tài)添加、修改、刪除功能示例
- js實現(xiàn)json數(shù)組分組合并操作示例
相關(guān)文章
FullCalendar日歷插件應(yīng)用之?dāng)?shù)據(jù)展現(xiàn)(一)
fullcalendar作為一個功能完善的日歷插件使用非常廣泛,在web開發(fā)開發(fā)過程 中非常流行。它與ext js 中的calendar非常類似,但考慮到extjs 比較“復(fù)雜龐大”,所以我在開發(fā)開發(fā)過程中都會優(yōu)先考慮fullcalendar2015-12-12Bootstrap響應(yīng)式導(dǎo)航由768px變成992px的實現(xiàn)代碼
這篇文章主要介紹了Bootstrap響應(yīng)式導(dǎo)航由768px變成992px,需要的朋友可以參考下2017-06-06JavaScript判斷輸入是否為數(shù)字類型的方法總結(jié)
這篇文章主要介紹了JavaScript判斷輸入是否為數(shù)字類型的方法總結(jié)的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09layui表格 返回的數(shù)據(jù)狀態(tài)異常的解決方法
今天小編就為大家分享一篇layui表格 返回的數(shù)據(jù)狀態(tài)異常的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09Javascript this 的一些學(xué)習(xí)總結(jié)
相信有C++、C#或Java等編程經(jīng)驗的各位,對于this關(guān)鍵字再熟悉不過了。由于Javascript是一種面向?qū)ο蟮木幊陶Z言,它和C++、C#或Java一樣都包含this關(guān)鍵字,接下來我們將向大家介紹Javascript中的this關(guān)鍵字2012-08-08