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 相关文章推荐
大家未必知道的Js技巧收藏
Apr 07 Javascript
Javascript 获取LI里的内容
Dec 17 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
Jquery下attr和removeAttr的使用方法
Dec 28 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
JS闭包原理及其使用场景解析
Dec 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中的正规表达式(二)
2006/10/09 PHP
php里array_work用法实例分析
2015/07/13 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
js对象的复制继承实例
2015/01/10 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
python获取代理IP的实例分享
2018/05/07 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
Django中URL的参数传递的实现
2019/08/04 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
Python字符串三种格式化输出
2020/09/17 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
大四学年自我鉴定
2013/11/13 职场文书
教师党员思想汇报
2014/01/06 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
初中生期末评语大全
2014/04/24 职场文书
科技之星事迹材料
2014/06/02 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
期末复习计划
2015/01/19 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
关于vue-router-link选择样式设置
2022/04/30 Vue.js