JavaScript实现构造json数组的方法分析


Posted in Javascript onAugust 17, 2018

本文实例讲述了JavaScript实现构造json数组的方法。分享给大家供大家参考,具体如下:

从后端拿到的数据是一个数组,每个元素中包含的数据如下(host相同的记录都是相邻的)

currentTime:"1470729601"
host:"10.3.34.21"
taskList:null
taskNum:1

想构造类似如下结构的json数组

[{
  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);

以上方式的问题在于转换后会使得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;
Javascript 相关文章推荐
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 #Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 #Javascript
layer弹出层全屏及关闭方法
Aug 17 #Javascript
vue+iview+less 实现换肤功能
Aug 17 #Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 #jQuery
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 #Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 #Javascript
You might like
我的论坛源代码(一)
2006/10/09 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
python中reload(module)的用法示例详解
2017/09/15 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
国际贸易专业推荐信
2013/11/15 职场文书
简短证婚人证婚词
2014/01/09 职场文书
电台实习生求职信
2014/02/25 职场文书
教师节演讲稿
2014/05/06 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
警示教育观后感
2015/06/17 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
社会实践心得体会范文
2016/01/14 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python