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 相关文章推荐
javascript 模式设计之工厂模式学习心得
Apr 27 Javascript
js事件(Event)知识整理
Oct 11 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
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
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
Python文件夹与文件的操作实现代码
2014/07/13 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
高中生活自我鉴定
2014/01/18 职场文书
搞笑获奖感言
2014/01/30 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
保护环境的建议书
2014/03/12 职场文书
个人承诺书怎么写
2014/05/24 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
行政主管岗位职责
2015/02/03 职场文书
收银员岗位职责范本
2015/04/07 职场文书
公司处罚决定书
2015/06/24 职场文书
javascript之Object.assign()的痛点分析
2022/03/03 Javascript