jquery Parse JSON instance detailed _jquery

Source: Internet
Author: User
Tags eval string to json tojson

The example in this article describes the way jquery parses json. Share to everyone for your reference, specific as follows:

Objective

In the Web data transfer process, JSON is the text, that is, the lightweight form of string transmission, while the client generally use JS is the received JSON object, so, the JSON object and JSON strings between the conversion, the JSON data parsing is the key.

First clear 2 concepts such as:

JSON string:

Copy Code code as follows:
var str1 = ' {' name ': ' Deyuyi ', ' sex ': ' Man '} ';

JSON object:
Copy Code code as follows:
var str2 = {"Name": "Deluyi", "Sex": "Man"};

This can be easily understood:

JSON objects are formats that can be used directly with jquery operations, such as the object (class name) that can be used to point out attributes (methods) in C #;

JSON string is just a string, a whole, do not intercept the words can not take out the data stored in it, not directly use, unless you only want to alert () him;

One, JSON string converted to JSON object

To use the above str1, you must first convert to a JSON object by using the following method:

A:eval function

The Eval function can convert a string that is intrinsically compliant or approximately JSON-formatted to a JSON object, using the following methods such as:

Eval (' (' + str + ') '); Where Str is the string that satisfies the description of this title

Converted from JSON string to JSON object
var str= ' {' name ': ' John '} ';
var obj = eval (' (' + str + ') '); 
alert (obj.name);
var str2= "{' name ': ' John '}";
var obj2 = eval (' (' + str2 + ') '); 
alert (obj2.name);
var str3= "{name: ' John '}";
var obj3 = eval (' (' + STR3 + ') '); 
alert (obj3.name);

All of the above will output the result "John".

The Eval method can convert the following standard and non-standard format strings:

var str= "{' name ': ' John '}";
var str2= ' {' name ': ' John '} ';
var str3= "{name: ' John '}";

See this example download package: jquerydemo1.html

B:parsejson function

Another function that converts a standard string to a JSON object is Parsejson (), which is used like Jquery.parsejson (str)//Where STR is the string that satisfies the description of this title

Converted from JSON string to JSON object
var str= ' {' name ': ' John '} ';
var obj = Jquery.parsejson (str)
alert ("1" + obj.name);

All of the above will output the result "John".

This method only supports the standard format: var str= ' {' name ': ' John '} ';

See this example download package: jquerydemo2.html

C:json.parse function

Another function that converts a standard string to a JSON object is Json.parse (), which is used like Json.parse (str)//Where STR is the string that satisfies the description of this title

var str = ' {' name ': ' Mady ', ' Age ': ' ';
var obj = json.parse (str);
alert (obj.name);

All of the above will output the result "John".

This method only supports the standard format: var str= ' {' name ': ' John '} ';

See this example download package: jquerydemo3.html

The above results are consistent, output names, the following figure:

Special Note : If obj is a JSON object, then using the eval () function to convert (even multiple conversions) is a JSON object, but there is a problem with using the Parsejson () function (throwing a syntax exception).

D:other Way

If you can't help but want to make a mistake, very much want to parse non-standard, informal strings, such as:

Copy Code code as follows:
{name:mady,age:23}

Or
Copy Code code as follows:
{name: ' Mady ', age:23}

And all the other inherently correct illegal formats you can think of, then there's an extension library that can solve

Jquery-json Extension Library

Download the address here: http://code.google.com/p/jquery-json/

This library is used to extend jQuery, with two functions extended for use with JSON: Tojson and Parsejson

The Tojson function is used to serialize an ordinary JavaScript object into a JSON object.
The Parsejson function is used to serialize an ordinary JavaScript object into a JSON object too.

var Data=$.tojson ({x:2, y:3}); 
var obj = Jquery.parsejson (data); 
alert (obj.x); 
var str = {plugin: ' Jquery-json ', version:2.3}; 
var data2=$.tojson (str); 
var obj2 = Jquery.parsejson (data2); 
alert (Obj2.plugin);

The above code execution results are as follows:

See this example download package: jquerydemo5.html

Convert a JSON object to a string

You can use the tojsonstring () or global method Json.stringify () to convert a JSON object to a JSON string.
For example:

Copy Code code as follows:
var last=obj.tojsonstring (); Convert a JSON object to a JSON character

Or

var last=json.stringify (obj); Converts a JSON object to JSON character
alert (last);

Third, parse read JSON

We parse the string into a JSON object in a variety of ways.
As the above example:

Copy Code code as follows:
var str2 = {"Name": "Mady", "Sex": "Man"};

You can read this as follows:
Copy Code code as follows:
alert (str2.name);//As C # straight out of point ...

Pop-up "Mady".
The JSON we encounter is rarely that simple, such as a complex JSON object such as:
Copy Code code as follows:
var str={"Getuserpostbyidresult": {"Age": "A", "ID": "2server", "Name": "Mady"};

Resolution by:
Alert (str. Getuserpostbyidresult.name);/Not at once, I'll be a few more times.
Pop-up: "Mady".

A little more complicated, like:

Copy Code code as follows:
var data= "{root: [{' name ': ' 6200 ', ' value ': ' 0 '}, {' name ': ' 6101 ', ' value ': ' Xa '}, {' name ': ' 6102 ', ' value ': ' Beijing '}, {' Name ': ' 6103 ', ' value ': ' Haerbin '}]};

If you want to be singled out, parse with:
Copy Code code as follows:
alert (dataobj.root[0].name);

Pop-up: "6200".

If you want to pick a group, parse it by:

$.each (Dataobj.root, function (index, item) {
  $ ("#info"). Append (
      "<div>" +index+ ":" + item.name + "</ Div> "+ 
      " <div> "+index+": "+ item.value +" </div> 
 

Where this "#info" is the ID of a div. Enter the results as shown below:

See this example download package: jquerydemo4.html

Note : In this example, if you want to use a different conversion function, change the single quotation mark within the string to double quotes, and the external number to single quotes.
This article complete instance code code clicks here the website downloads.

I hope this article will help you with the jquery program design.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.