Home > Web Front-end > JS Tutorial > Introduction to json and summary of usage codes

Introduction to json and summary of usage codes

伊谢尔伦
Release: 2016-12-01 11:27:58
Original
1076 people have browsed it

What is JSON?

JavaScript Object Notation.

JSON is a lightweight data exchange format. The inside of a JSON format file can look like this:

{
  "name": "hanzichi",
  "sex": "male"
}
Copy after login

It looks like they are all key-value pairs, very similar to js objects, right? Yes, but at the same time JSON expressed dissatisfaction. I can't look the same as the js object. I have to have my own personality, so it is stipulated that the keys in the key-value pair must use double quotes! At the same time, there are certain requirements for the value of the key-value pair:

JSON value can be:

Number (integer or floating point number)

String (in double quotes)

Logical value (true or false )

Array (in square brackets)

Object (in curly brackets)

null

Except for the above 6 types, there are no others. There is no undefined or NAN like js, and JSON refuses to use it.

How to use JSON?

JSON generally travels in the form of strings during the data interaction process, so for js, how to convert json strings and js objects to and from each other is particularly important.

eval method (json string -> js object)

var jsonStr = '{"name": "hanzichi", "sex": "male"}';
var ans = eval('(' + jsonStr + ')');
console.log(ans.name, ans.sex); // hanzichi male
Copy after login

eval function is very fast, but it can compile any javascirpt code, which may cause security issues. The use of eval is based on the assumption that the incoming code parameters are reliable. In some cases, the client may not be trusted. If it is based on security considerations, it is best to use a JSON parser. A JSON parser will only accept JSON text, so it is safer, as follows.

JSON.parse (json string->js object)

var jsonStr = '{"name": "hanzichi", "sex": "male"}';
var obj = JSON.parse(jsonStr);
console.log(typeof obj, obj); // object Object {name: "hanzichi", sex: "male"}
Copy after login

The second parameter can be a function, which can delete the value:

var jsonStr = '{"name": "hanzichi", "sex": "male", "age": 10}';
var obj = JSON.parse(jsonStr, function(key, value) {
  if(key === 'name') {
    return 'my name is ' + value;
  }
  return value;
});
console.log(typeof obj, obj); // object Object {name: "my name is hanzichi", sex: "male", age: 10}
Copy after login

JSON.stringify (js object->json string)

var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj);
console.log(jsonStr);  // {"name":"hanzichi","sex":"male","age":"10"}
Copy after login

You can also add a parameter to specify the attributes that need to be converted into json strings (in array form, only js object attributes with the same name as the array will be converted):

var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj, ['name']);
console.log(jsonStr);  // {"name":"hanzichi"}
Copy after login

The second parameter can also be a function, which can be deleted Attributes that meet the conditions (or change the attribute value, no return means giving up the attribute, the return value indicates the value of the key in the json string)

var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj, function(key, value) {
  if(key === 'name') {
    return 'my name is ' + value;
  }
  return value;
});
console.log(jsonStr);  // {"name":"my name is hanzichi","sex":"male","age":"10"}
Copy after login

There can also be a third parameter, which can be a number or a string.

If it is a number, it means indentation. If the number exceeds 10, it will be processed as 10.

var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj, null, 4);
console.log(jsonStr); 
// {
//     "name": "hanzichi",
//     "sex": "male",
//     "age": "10"
// }
Copy after login

can also be a string. These strings will be added in front of the attributes as prefixes. Similarly, if the string length exceeds 10, only 10 will be intercepted:

 var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj, null, 'pre');
console.log(jsonStr); 
// {
// pre"name": "hanzichi",
// pre"sex": "male",
// pre"age": "10"
// }
Copy after login

Summary

Of course, the legendary ie8 (and below) is because of a certain This defect cannot use the JSON.parse() and JSON.stringify() methods, and eval() is unsafe. If you want to be compatible with them, you can refer to json2.js.


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template