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ù)學運算用法總結(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日歷插件應用之數(shù)據(jù)展現(xiàn)(一)
fullcalendar作為一個功能完善的日歷插件使用非常廣泛,在web開發(fā)開發(fā)過程 中非常流行。它與ext js 中的calendar非常類似,但考慮到extjs 比較“復雜龐大”,所以我在開發(fā)開發(fā)過程中都會優(yōu)先考慮fullcalendar2015-12-12
Bootstrap響應式導航由768px變成992px的實現(xiàn)代碼
這篇文章主要介紹了Bootstrap響應式導航由768px變成992px,需要的朋友可以參考下2017-06-06
JavaScript判斷輸入是否為數(shù)字類型的方法總結(jié)
這篇文章主要介紹了JavaScript判斷輸入是否為數(shù)字類型的方法總結(jié)的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09
layui表格 返回的數(shù)據(jù)狀態(tài)異常的解決方法
今天小編就為大家分享一篇layui表格 返回的數(shù)據(jù)狀態(tài)異常的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09

