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 相关文章推荐
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
通过JS判断网页是否为手机打开
Oct 28 Javascript
Vue——前端生成二维码的示例
Dec 19 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
div移动 输入框不能输入的问题
2009/11/19 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
利用Python实现图书超期提醒
2016/08/02 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
物流管理专业求职信
2014/05/29 职场文书
售房协议书
2014/08/19 职场文书
大足石刻导游词
2015/02/02 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
Django 实现jwt认证的示例
2021/04/30 Python