码迷,mamicode.com
首页 > Web开发 > 详细

JSON数据;

时间:2017-01-03 17:09:05      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:null   for   read   eric   数组   结束   cti   cli   大于   

1.JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

2.JSON的规则很简单: 对象是一个无序的“‘名称/值‘对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值‘ 对”之间使用“,”(逗号)分隔。

3.简单的例子:

<body>
  
        <div style="border: 1px solid red; width: 100px; height: 100px;" onclick="bian()"></div>
    </body>
</html>
<script type="text/javascript">
function bian()
{
    var user = {                   //定义一个json数据
        "username": "andy",        //定义单个字符串
        "age": 20,                //定义int格式
        "info": {"tel": "123456","cellphone": "98765"},//定义一维关联数组类型的
        "address": [{"city": "beijing","postcode": "222333"}, {"city": "newyork","postcode": "555666"}]//定义二维数组类型的
    }
    alert(user.username);
    alert(user.age);
    alert(user.info.cellphone);
    alert(user.address[0].city);
    alert(user.address[0].postcode);
    user.username = "Tom";
    alert(user.username);
}
</script>

4.json与数组的区别

Json:是在javascript用来存数据的一种方法。

Json形式: var Json={a:1 , b:2 , c:3}; var json=[{a:1,b:2,c:3},{d:4,e:5,f:6}];

数组形式:var arr=[1,2,3];  var arr=[[a,2,3],[4,5,6]];

 

Json个数组的区别:

1、Json的下标是字符串,如调用第一个数据时用:Json.a 。 数组的下标是数字如 arr[0]

2、Json没有length,数组有lengt

 

用Json来存数据,如果遇到需要循环需要用 for(元素变量 in 变量名){};因为Json没有length所以要用for in循环,for in循环可以用于Json和数组

for(i in Json){

  语句

};

 

什么时候用for循环,什么时候用for in循环?

数组:用for循环 for(i=0,i<length,i++){};

Json:用for in循环 for(i in Json){};

5.js遍历json数据的几种方法

方式一

var value = {
    "china":{
        "hangzhou":{"code":"1"},
        "shanghai":{"code":"2"},
        "chengdu":{"code":"3"}
    },
    "America":{
        "aa":{"code":"1"},
        "bb":{"code":"2"}  
    },
    "Spain":{
        "dd":{"code":"1"},
        "ee":{"code":"2"},
        "ff":{"code":"3"}  
    }
};
  
for(var country in value)
{
    document.write(country + ":<br />")
    
    for(var city in value[country])
    {
        document.write(‘    ‘ + city + "<br />");
        for(var code in value[country][city])
        {
            document.write("      "+ code + value[country][city][code] +"<br />")   
        }
    }  
}

 

 

country 为value对象的一个属性名,value[country] 为value对象的属性值 这里为一个json对象比如b,value[country][city]为josn对象b的属性值 它也是一个json对象,于是 value[country][city]["code"]便可以取到json对象暂时成为c的值,或者 value[country][city].code。

总之分清是json还是array这是很关键的。

方式二

var value2 = {
    "china":[
        {"name":"hangzhou", "item":"1"},
        {"name":"shanghai", "item":"2"},
        {"name":"sichuan", "item":"3"}
    ],
    "America":[
        {"name":"aa", "item":"12"},
        {"name":"bb", "item":"2"}
    ],
    "Spain":[
        {"name":"cc", "item":"1"},
        {"name":"dd", "item":"23"},
        {"name":"ee", "item":"3"}
    ]
};<br> 
for (var country in value2)
{
    document.write(country + ":<br />")  
    for (var city in value2[country])
    {
    
        document.write(city + "  " + value2[country][city]["name"] + "<br />" );   
    }
}

 

解释:

country 为value2对象的属性名,value2[country] 为value2对象属性值 在本例中它是一个数组,city是数组的一个元素,它又是另外一个json对象,于是,value2[country][city]["name"]就访问到该对象的 name的属性值,也可以通过 value2[country][city].name 来访问该属性值。

方式三

var value2 = {
    "china":[
        {"name":"hangzhou", "item":"1"},
        {"name":"shanghai", "item":"2"},
        {"name":"sichuan", "item":"3"}
    ],
 
    "America":[
        {"name":"aa", "item":"12"},
        {"name":"bb", "item":"2"}
    ],
    "Spain":[
        {"name":"cc", "item":"1"},
        {"name":"dd", "item":"23"},
        {"name":"ee", "item":"3"}
    ]
};
    
    for (var country in value2)
    {
        document.write(country + ":<br />")  
        
        for (var i = 0;i < value2[country].length; i++)
        {
            document.write("  " + value2[country][i]["name"] + "<br />");   
        }
    }

 

解释:

country value2对象的属性名,value2[country] 属性值 本例中是一个数组,value2[country].length 数组的长度,value2[country][i]数组的项 == json对象。

value2[country][i]["name"] 取得name的值,也可以用value2[country][i].name 来取得name的值。

6.jquery遍历json数据

grep

<script type=‘text/javascript‘ src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
function(){
var array = [1,2,3,4,5,6,7,8,9];
var filterarray = $.grep(array,function(value){
return value > 5;//筛选出大于5的
});
for(var i=0;i<filterarray.length;i++){
alert(filterarray[i]);
}
for (key in filterarray){
alert(filterarray[key]);
}
}
);
</script>

 

each

<script type=‘text/javascript‘ src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
function(){
var anObject = {one:1,two:2,three:3};//对json数组each
$.each(anObject,function(name,value) {
alert(name);
alert(value);
});
var anArray = [‘one‘,‘two‘,‘three‘];
$.each(anArray,function(n,value){
alert(n);
alert(value);
}
);
}
);
</script>
<script type=‘text/javascript‘ src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
function(){
var anArray = [‘one‘,‘two‘,‘three‘];
var index = $.inArray(‘two‘,anArray);
alert(index);//返回该值在数组中的键值,返回1
alert(anArray[index]);//value is two
}
);
</script>

 

 


map

<script type=‘text/javascript‘ src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
function(){
var strings = [‘0‘,‘1‘,‘2‘,‘3‘,‘4‘,‘S‘,‘6‘];
var values = $.map(strings,function(value){
var result = new Number(value);
return isNaN(result) ? null:result;//isNaN:is Not a Number的缩写
}
);
for (key in values) {
alert(values[key]);
}
}
);
</script>

 

JSON数据;

标签:null   for   read   eric   数组   结束   cti   cli   大于   

原文地址:http://www.cnblogs.com/xingyue1988/p/6245231.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!