Detailed explanation of JSON object definition and value instance steps in JS

This time I will bring you a detailed explanation of the steps to define and obtain values ​​of JSON objects in JS. What are the precautions for defining and obtaining values ​​of JSON objects in JS? The following is a practical case. Let’s take a look. .

1.JSON (

JavaScript Object Notation) is a simple data format that is more lightweight than xml. JSON is a native JavaScript format, which means that no special API or toolkit is required to handle JSON data in JavaScript.

The rules of JSON are simple: an object is an unordered collection of "name:value" pairs. An object starts with "{" (left bracket) and ends with "}" (right bracket). Each "name" is followed by a ":" (colon); "name/value" pairs are separated by "," (comma).

The rules are as follows:

1) Mapping is represented by colon (":"). Name: Value

2) Parallel data are separated by commas (","). Name 1: value 1, name 2: value 2
3) The mapped collection (object) is represented by curly brackets ("{}"). {Name 1: Value 1, Name 2: Value 2}
4) The collection (array) of parallel data is represented by square brackets ("[]").
[
{Name 1: value, name 2: value 2},
{Name 1: value, name 2: value 2}
]
5) The types that element values ​​can have ：string, number, object, array, true, false, null

Five writing methods in 2.json:

1) Traditional way to store data and call data

<script type="text/javascript">
//JS传统方式下定义"类"
function Person(id,name,age){
this.id = id;
this.name = name;
this.age = age;
}
//JS传统方式下创建"对象"
var p = new Person(20141028,"一叶扁舟",22); 
//调用类中的属性，显示该Person的信息
window.alert(p.id);
window.alert(p.name);
window.alert(p.age);
</script>

2) The first style:

<script type="text/javascript">
var person = {
id:001,
name:"一叶扁舟",
age:23
}
window.alert("编号:"+person.id);
window.alert("用户名:"+person.name);
window.alert("年龄:"+person.age);
</script>

3) The second style:

<script type="text/javascript">
var p = [
{id:001,name:"一叶扁舟",age:22},
{id:002,name:"无悔",age:23},
{id:003,name:"无悔_一叶扁舟",age:24}
]; 
 
for(var i = 0; i < p.length; i++){
window.alert("编号:"+p[i].id);
window.alert("用户名:"+p[i].name);
window.alert("年龄:"+p[i].age);
 
}
</script>

4) The third style:

<script type="text/javascript">
var p = {
"province":[
{"city":"福州"},
{"city":"厦门"},
{"city":"莆田"}
]
};
window.alert("所在城市：" + p.province[0].city);
</script>

5) The fourth style:

<script type="text/javascript">
var p = {
"ids":[
{"id":001},
{"id":002},
{"id":003}
],
"names":[
{"name":"一叶扁舟"},
{"name":"无悔"},
{"name":"无悔_一叶扁舟"}
]
}; 
 
for(var i = 0; i < p.names.length; i++){
window.alert("名字:"+p.names[i].name); 
}
for(var i = 0; i < p.ids.length; i++){
window.alert("id:"+p.ids[i].id);
}
 
</script>

6) The fifth style:

<script type="text/javascript">
var p = {
"province":["福州","厦门","莆田"]
};
window.alert("城市的个数:"+p.province.length);
window.alert("分别是：\n");
for(var i=0;i<p.province.length;i++){
window.alert(p.province[i]);
}
</script>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JS Promise usage case analysis

jQuery implementation of fuzzy query practical case analysis

The above is the detailed content of Detailed explanation of JSON object definition and value instance steps in JS. For more information, please follow other related articles on the PHP Chinese website!