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图片阅览组件
Nov 09 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
js实现延迟加载的方法
Jun 24 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 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中通过smtp发邮件的类,测试通过
2007/01/22 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
JS解析XML实例分析
2015/01/30 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
python采用getopt解析命令行输入参数实例
2014/09/30 Python
Python读大数据txt
2016/03/28 Python
深入理解Django中内置的用户认证
2017/10/06 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
Python中is和==的区别详解
2018/11/15 Python
python用插值法绘制平滑曲线
2021/02/19 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
公务员培训自我鉴定
2014/02/01 职场文书
领导接待方案
2014/03/13 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
关于读书的活动方案
2014/08/14 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
Redis主从复制操作和配置详情
2022/09/23 Redis