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 写类方式之十
Jul 05 Javascript
javascript hashtable实现代码
Oct 13 Javascript
javascript中利用数组实现的循环队列代码
Jan 24 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 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
10个实用的PHP代码片段
2011/09/02 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
Python中的集合介绍
2019/01/28 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
python elasticsearch环境搭建详解
2019/09/02 Python
python next()和iter()函数原理解析
2020/02/07 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
什么是python的列表推导式
2020/05/26 Python
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
迅雷Cued工作心得体会
2014/01/27 职场文书
会计自我鉴定
2014/02/04 职场文书
一份创业计划书范文
2014/02/08 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
老公出轨后的保证书
2015/05/08 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB