如何在jQuery Mobile中解析JSON响应？

Question

I am new to jquery mobile. I am trying to get contact name from contacts. JSON by sending AJAX request. But I am not getting any alert when I click on submit button.

My jQuery ajax request

$(document).ready(function() {

    //after button is clicked we download the data
    $("#submit").click(function(){

        //start ajax request
        $.ajax({
            url: "myURL/contacts.json",

            dataType: "json",
            success: function(data) {

                var json = $.parseJSON(data);

                alert(json.name);

            });
        });
    });

contacts.json

{
    "contacts": [
    {
            "id": "c200",
            "name": "Ravi Tamada",
            "email": "ravi@gmail.com",
            "address": "xx-xx-xxxx,x - street, x - country",
            "gender" : "male",
            "phone": {
                "mobile": "+91 0000000000",
                "home": "00 000000",
                "office": "00 000000"
            }
    },
    {
            "id": "c201",
            "name": "Johnny Depp",
            "email": "johnny_depp@gmail.com",
            "address": "xx-xx-xxxx,x - street, x - country",
            "gender" : "male",
            "phone": {
                "mobile": "+91 0000000000",
                "home": "00 000000",
                "office": "00 000000"
            }
    },
    .
    .
    .
    .

] }

How to generate dynamic clickable list for above ajax response?

Answer 1

from the looks of it, your json will be an array of object. Try doing json[0].Name to test it

Answer 2

dataType: "json"

already specifies the returned data to be a json object. so to read the values, you can simply use the object syntax:

success: function(data) {
    //cycle trough returned "contacts":
    for(var i=0;i<data.contacts.length;i++){
       console.log(data.contacts[i].name);
    }
}

Answer 3

Firstly our code is badly formated (smart quotes, wrong placement of parentheses). Secondly since your contacts are in an array, you can't access them using json.name , you should try something like this instead:

$(document).ready(function () {

    //after button is clicked we download the data
    $("#submit").click(function () {

        //start ajax request
        $.ajax({
            url: "myURL/contacts.json",
            dataType: "json",
            success: function (data) {

                var json = $.parseJSON(data);

                json.contacts.forEach(function(val, ind, arr){
                  alert(val.name);
                });

            }
        });
    });
});

Answer 4

your json data present inside contacts,so you should take name in this format.

    var json = $.parseJSON(data);
    alert(json.contacts[0].name);

Answer 5

In stead of parsing JSON you can do like followng:

$.ajax({
..
dataType: 'json' // using json, jquery will make parse for  you
});

To access a property of your JSON do as shown in below:

data[0].name;

data[0].email;

Why you need data[0] because data is an array, so to its content retrieve you need data[0] (first element), which gives you an object {"name":"myName" ,"address": "myAddress" }.

And to access property of an object rule is:

Object.property

or sometimes

Object["property"] // in some case

So you need

data[0].name and so on to get what you want.

If you not

set dataType: json then you need to parse them using $.parseJSON() and to retrieve data like above.