Summary of some methods for reading JSON from JavaScript

Source: Internet
Author: User

I have two methods to read JSON in js: obj. name-based access, and array-based access. I will share with you the introduction and examples below.

Method 1: function construction definition method return

The Code is as follows: Copy code

Var strJSON = "{name: 'json name'}"; // obtain the json
Var obj = new Function ("return" + strJSON) (); // converted JSON object
Alert (obj. name); // json name

Method 2: The famous eval function in js

The Code is as follows: Copy code

Var strJSON = "{name: 'json name'}"; // obtain the json
Var obj = eval ("(" + strJSON + ")"); // converted JSON object
Alert (obj. name); // json name

Note that the object expression {'name': 'json name'} must be expanded with "()". Otherwise

The Code is as follows: Copy code

Var strJSON = "{name: 'json name '}";
Var obj = eval (strJSON );
Alert (obj. constructor); // String constructor
Alert (obj. name); // undefine

You must extend the object expression to eval for execution to generate an anonymous object!

Example 1

The Code is as follows: Copy code

Var data = {name: "", age: "21", height: "189", gender: "male", weight: "60 KG "}

For (var I in data ){

Console. log (I + ': "' + data [I] + '"');

}

// Result: name: ""......

Example 2: ajax submits data and then returns json data processed by js

The Code is as follows: Copy code

<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">

<Html>
<Head>
<Title> asynchronous JSON call </title>
</Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script type = "text/javascript">
<! --
Var xmlhttp;
// Create an XMLHTTPRequest object
Function createXMLHTTPRequest ()
{
If (window. ActiveXObject) // ② if the current browser is IE
{
Xmlhttp = new ActiveXObject ("Microsoft. XMLHTTP ");
}
Else if (window. XMLHTTPRequest) // ③ if it is another browser
{
Xmlhttp = new XMLHTTPRequest ();
}
}

Function getInfo ()
{
CreateXMLHTTPRequest ();
Xmlhttp. open ("get", "/webapp/front/dealerapi! Getdealerlist. action ", true );
Xmlhttp. onreadystatechange = returnInfo;
Xmlhttp. send (null );
}

Function returnInfo ()
{
If (xmlhttp. readyState = 4)
{
Var info = xmlhttp. responseText;
Eval ("var json =" + info );
Var message = "";
Var dealerlocation = "";
Var salesphone = "";
For (var I = 0; I <json. dealers. length; I ++ ){
Message + = "dealer name: <font style = 'color: red; '>" + json. dealers [I]. name + "</font> & nbsp; <br/> ";
Salesphone + = "dealer Phone: <font style = 'color: red; '>" + json. dealers [I]. salesphone + "</font> & nbsp; <br/> ";
Dealerlocation + = "dealer latitude and longitude: <font style = 'color: red; '>" + json. dealers [I]. location + "</font> & nbsp; <br/> ";
}

Document. getElementById ("showInfo"). innerHTML = message;
Document. getElementById ("salesphone"). innerHTML = salesphone
Document. getElementById ("location"). innerHTML = dealerlocation;
}
}

-->
</Script>
<Body>

<Br/>
<H2 style = "color: red;"> asynchronous JSON call <Br/> <input type = "button" value = "retrieve JSON data" onclick = "getInfo ()"/>
<Table>
<Tr>
<Td> <div id = "showInfo"> </div> </td>
<Td> <span id = "salesphone"> <span> </td>
<Td> <span id = "location"> <span> </td>
</Tr>
</Table>
</Body>
</Html>

Related Article

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.