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 相关文章推荐
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
JavaScript实现拖拽效果
Mar 16 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脚本的10个技巧(5)
2006/10/09 PHP
图书管理程序(一)
2006/10/09 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
js实现查询商品案例
2020/07/22 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
Django之form组件自动校验数据实现
2020/01/14 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
中班中秋节活动反思
2014/02/18 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
同学聚会感言一句话
2015/07/30 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby