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 模式设计之工厂模式学习心得
Apr 27 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
vue组件化中slot的基本使用方法
May 01 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
深入浅析React中diff算法
May 19 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
桌面中心(二)数据库写入
2006/10/09 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
jquery cookie插件代码类
2009/05/26 Javascript
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
一篇不错的Python入门教程
2007/02/08 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
PyTorch安装与基本使用详解
2020/08/31 Python
Python中pass语句的作用是什么
2016/06/01 面试题
军训心得体会
2013/12/31 职场文书
大学生实习证明范本
2014/01/15 职场文书
销售提升方案
2014/06/07 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
入党现实表现材料
2014/12/23 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
员工工作表扬信
2015/05/05 职场文书
鉴史问廉观后感
2015/06/10 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
Nginx配置根据url参数重定向
2022/04/11 Servers