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 相关文章推荐
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
js异步编程小技巧详解
Aug 14 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
基于JavaScript实现控制下拉列表
May 08 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中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
angularJS 入门基础
2015/02/09 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
webpack优化的深入理解
2018/12/10 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
Python按钮的响应事件详解
2019/03/04 Python
利用python求积分的实例
2019/07/03 Python
python hash每次调用结果不同的原因
2019/11/21 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
毕业设计计划书
2014/01/09 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
党员读书活动心得体会
2016/01/14 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS