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 相关文章推荐
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
微信JSSDK上传图片
Aug 23 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
vue-router实现嵌套路由的讲解
Jan 19 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
微信小程序自定义底部弹出框动画
Nov 18 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中unserialize返回false的解决方法
2014/09/22 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
js列举css中所有图标的实现代码
2011/07/04 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
Javascript的this用法
2017/01/16 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
Python使用django搭建web开发环境
2017/06/09 Python
Django中的forms组件实例详解
2018/11/08 Python
flask-restful使用总结
2018/12/04 Python
Python3.8中使用f-strings调试
2019/05/22 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
学期自我评价
2014/01/27 职场文书
投标服务承诺书
2014/05/28 职场文书
项目负责人岗位职责
2015/02/15 职场文书
2015年财务部工作总结
2015/04/10 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
60句有关成长的名言
2019/09/04 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript
MySQL创建管理RANGE分区
2022/04/13 MySQL