JSON数据；

Posted 2020-08-26 业务高于技术

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JSON数据；相关的知识，希望对你有一定的参考价值。

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数据；的主要内容，如果未能解决你的问题，请参考以下文章

如何从片段中的 JSON 响应中的对象获取数据

json 个人的vscode的代码片段

我无法在片段中加载数据 json

json 可视代码工作室Angular with Firebase片段

vs code 用户代码片段 html.json

使用凌空json数据的片段中的Recyclerview？