Detailed explanation of JSON object definition and value implementation steps in JS-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

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

May 22, 2018 am 11:53 AM

javascript json accomplish

This time I will bring you a detailed explanation of the steps for JSON object definition and value implementation in JS. What are the precautions for JSON object definition and value implementation in JS. The following is a practical case, let’s take a look. one time.

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 process 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

&lt;script type=&quot;text/javascript&quot;&gt;
//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);
&lt;/script&gt;

Copy after login

2) The first style:

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

Copy after login

3) The second style:

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

Copy after login

4) The third style:

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

Copy after login

5) The fourth style:

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

Copy after login

6) The fifth style:

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

Copy after login

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!