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 相关文章推荐
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
深究AngularJS中$sce的使用
Jun 12 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
js实现简单扫雷
Nov 27 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 jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
PHP图片水印类的封装
2017/07/06 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
详细介绍Ruby中的正则表达式
2015/04/10 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
python实现滑雪游戏
2020/02/22 Python
python如何求圆的面积
2020/07/01 Python
Django如何批量创建Model
2020/09/01 Python
基于Python正确读取资源文件
2020/09/14 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
自荐书封面下载
2013/11/29 职场文书
企业宣传策划方案
2014/05/29 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
2014年科室工作总结
2014/11/20 职场文书
个人思想政治总结
2015/03/05 职场文书
电影开国大典观后感
2015/06/04 职场文书
运动会广播稿300字
2015/08/19 职场文书
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python