Json objects in js are described in detail

  • 2020-03-30 04:13:30
  • OfStack

JSON (JavaScript Object Notation) is a simple data format that is lighter than XML. JSON is native to JavaScript, which means you don't need any special apis or toolkits to process JSON data in JavaScript.
The rule for JSON is simple: an object is an unordered collection of 'name: value' pairs. An object starts with "{" (left parenthesis) and ends with"} "(right parenthesis). Each name is followed by: (colon); "Name/value" pairs are separated by ", "(comma).

The rules are as follows:

1) the mapping is represented by a colon (" : "). Name: value
2) the juxtaposed data is separated by a comma (", "). Name 1: value 1, name 2: value 2
3) the set (object) of the map is represented by braces (" {} "). {name 1: value 1, name 2: value 2}
4) the collection (array) of juxtaposed data is represented by square brackets (" [] ").
[
{name 1: value, name 2: value 2},

{name 1: value, name 2: value 2}

]
5) types of element values available: string, number, object, array, true, false, null

2. Five ways to write json:

1) data is stored and invoked in the traditional way


<script type="text/javascript">
//JS traditionally defines "class"
function Person(id,name,age){
this.id = id;
this.name = name;
this.age = age;
}
//JS traditional way to create "object" < br / > var p = new Person(20141028," A seam ",22); //Invokes an attribute in the class that displays information about the 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:" A seam ",
age:23
}
window.alert(" Serial number :"+person.id);
window.alert(" The user name :"+person.name);
window.alert(" age :"+person.age);
</script>

3) the second style:

<script type="text/javascript">
var p = [
{id:001,name:" A seam ",age:22},
{id:002,name:" Without regret ",age:23},
{id:003,name:" Without regret _ A seam ",age:24}
]; for(var i = 0; i < p.length; i++){
window.alert(" Serial number :"+p[i].id);
window.alert(" The user name :"+p[i].name);
window.alert(" age :"+p[i].age); }
</script>

4) third style:

<script type="text/javascript">
var p = {
"province":[
{"city":" fuzhou "},
{"city":" xiamen "},
{"city":" putian "}
]
};
window.alert(" City: " + p.province[0].city);
</script>

5) fourth style:

<script type="text/javascript">
var p = {
"ids":[
{"id":001},
{"id":002},
{"id":003}
],
"names":[
{"name":" A seam "},
{"name":" Without regret "},
{"name":" Without regret _ A seam "}
]
}; for(var i = 0; i < p.names.length; i++){
window.alert(" The name :"+p.names[i].name); }
for(var i = 0; i < p.ids.length; i++){
window.alert("id:"+p.ids[i].id);
} </script>

6) fifth style:

<script type="text/javascript">
var p = {
"province":[" fuzhou "," xiamen "," putian "]
};
window.alert(" Number of cities :"+p.province.length);
window.alert(" Respectively is: n");
for(var i=0;i<p.province.length;i++){
window.alert(p.province[i]);
}
</script>

PS: about json operation, here again for you to recommend a few more practical json online tools for your reference:

Online JSON code verification, verification, beautification, formatting tools:
(link: http://tools.jb51.net/code/json)

JSON online formatting tool:
(link: http://tools.jb51.net/code/jsonformat)

Online XML/JSON interconversion tool:
(link: http://tools.jb51.net/code/xmljson)

Json code online formatting/beautification/compression/editing/conversion tools:
(link: http://tools.jb51.net/code/jsoncodeformat)

Online json compression/escape tool:

(link: http://tools.jb51.net/code/json_yasuo_trans)

C language style /HTML/CSS/json code format beautification tool:
(link: http://tools.jb51.net/code/ccode_html_css_json)


Related articles: