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 实现完美include载入实现代码
Aug 05 Javascript
JQuery datepicker 使用方法
May 20 Javascript
js列举css中所有图标的实现代码
Jul 04 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
javascript 实现map集合
Apr 03 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 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
PHP中GET变量的使用
2006/10/09 PHP
php上的memcache和memcached两个pecl库
2010/03/29 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
JSON辅助格式化处理方法
2013/03/26 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
js获取form的方法
2015/05/06 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
js实现指定时间倒计时效果
2019/08/26 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
一则python3的简单爬虫代码
2014/05/26 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
python selenium 弹出框处理的实现
2019/02/26 Python
python opencv实现图像边缘检测
2019/04/29 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
nohup的用法
2012/11/26 面试题
歌唱比赛策划方案
2014/06/06 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android