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 相关文章推荐
php 中序列化和json使用介绍
Jul 08 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
js实现简单的计算器功能
Jan 16 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
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动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
最新28个很棒的jQuery 教程
2011/05/28 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
python网络编程实例简析
2014/09/26 Python
Python实现批量修改文件名实例
2015/07/08 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
Python输入二维数组方法
2018/04/13 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
Python常见数字运算操作实例小结
2019/03/22 Python
python 读取串口数据的示例
2020/11/09 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
企业门卫岗位职责
2013/12/12 职场文书
大学生创业项目方案
2014/03/08 职场文书
公司股权转让协议书
2014/04/12 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
青涩记忆观后感
2015/06/18 职场文书
董事长致辞
2015/07/29 职场文书
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript