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 用记忆函数快速计算递归函数
Mar 15 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
Vue props 单向数据流的实现
Nov 06 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
JS实现简单的表格增删
Jan 16 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 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
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
javaScript call 函数的用法说明
2010/04/09 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
javascript中this指向详解
2016/04/23 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
python根据出生年份简单计算生肖的方法
2015/03/27 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
python PyTorch预训练示例
2018/02/11 Python
Python paramiko模块的使用示例
2018/04/11 Python
python读取中文txt文本的方法
2018/04/12 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
python操作gitlab API过程解析
2019/12/27 Python
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
党课培训主持词
2014/04/01 职场文书
工会换届选举方案
2014/05/21 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
宾馆客房管理制度
2015/08/06 职场文书
小学语文国培研修日志
2015/11/13 职场文书
教师师德承诺书2016
2016/03/25 职场文书