js数组如何添加json数据及js数组与json的区别


Posted in Javascript onOctober 27, 2015

 JSON(JavaScript Object Notation )是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,JSON是JavaScript原生数据格式。

下面给大家介绍js数组添加json数据的两种方式。

// 第一种方式

personInfo
: [],
for(var i = 0; i < _STAGE.passengerInfoArray.length; i++){
var name = _STAGE.passengerInfoArray[i];
var person = {v:name, text:name};
this.personInfo.push(person);
}

// 第二种方式

var passengerInfo = {};
passengerInfo.psgTypeDesc = psgTypeDesc;
passengerInfo.flightPrice = flightPrice;
_STAGE.passengerInfoArray.push(passengerInfo);

js数组与 json 的区别

一,数组

     1. 定义一维数组:var s1=new Array();

                       s1=[1,2,3,4]或者s1[0]=1,s1[1]=2,s1[3]=3,s1[4]=4;
                      alert(s1[0]);

                       结果为1;

   2,,定义二维素组:var s1=new Array();

                               var s1=[[3,1],[2,3,4],3,[4,5,6,7,8]];
                                 alert(s1[1][0]);

                               结果为2;

 二,定义json对象

    1,json对象       

var status_process = {
       " name5" : '闲置期',
     "name1" : '播种期',
     "name2" : '苗期',
     "name3" : '生长期',
     "name4" : '采收期'
    }    
   alert(status_process);

      结果为:Object:Object;

  2,json字符串

              所谓json字符串,是指该字符串变量的值与json的格式相同,但是不是json对象,比如:

var s1="{";
       var s2 = " 'name5' : '闲置期',  'name1' : '播种期','name2' : '苗期','name3' : '生长期','name4' : '采收期'";
       var s3="}";
       var status_process=s1+s2 +s3;

                    虽然status_process的值符合json对象的格式,但是它不是对象,只是一个字符串(是拼凑出来的);

                   将字符串转换为json对象使用函数eval,eval("(" + status_process+ ")");

         结论:从后台传入到前台的是json字符串,不是真正的json对象,因此需要使用eval函数转换。

  3,json对象的使用       

var status_process = {
      name5 : '闲置期',
     name1 : '播种期',
     name2 : '苗期',
      name3 : '生长期',
      name4 : '采收期'
     };
     alert(status_process["name5"]);
     alert(status_process.name5);

             两个都为:闲置期

  4,json二维对象       

var status_process = {
 name5 : {name3:'空闲闲置期'},
 name1 : '播种期',
 name2 : '苗期',
 name3 : '生长期',
 name4 : '采收期'
};
alert(status_process["name5"]["name3"]);
alert(status_process.name5.name3);

  结果都为:'空闲闲置期'

Javascript 相关文章推荐
Jquery 插件开发笔记整理
Jan 17 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
JS实现留言板功能
Jun 17 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
JavaScript异步操作中串行和并行
Nov 20 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 #Javascript
JavaScript编程中window的location与history对象详解
Oct 26 #Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 #Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 #Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 #Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 #Javascript
php利用curl获取远程图片实现方法
Oct 26 #Javascript
You might like
前端必学之PHP语法基础
2016/01/01 PHP
很可爱的输入框
2008/08/03 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
Python中的异常处理学习笔记
2015/01/28 Python
Python如何获取系统iops示例代码
2016/09/06 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
广播节目策划方案
2014/05/23 职场文书
就业协议书样本
2014/08/20 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
2016年清明节寄语
2015/12/04 职场文书
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL