如何使用JavaScript访问JSON格式的数据

Question

I'm trying to figure out on how to access data in JSON format and have gone a whole day searching for ways but I still can't find a solution to fit my needs. The closest relative question to my problem is this question but to no avail.

Basically I am retrieving data from $.ajax() which returns in JSON format.

[{"v":"233","pv":"1.83","avd":"00:01:58","nv":"82.83%","br":"75.11%"},
{"v":"17","pv":"3.65","avd":"00:08:31","nv":"70.59%","br":"58.82%"},
{"v":"9","pv":"2.22","avd":"00:01:51","nv":"0.00%","br":"44.44%"}]
[{"date":"2013-02-01","visits":63},
{"date":"2013-02-02","visits":30}]

My problem is how can I access the elements inside the JSON, say I want to get all values of "nv" or all values of "date" on the second bracket, in javascript? I Am new at things like these so am not familiar with the terminologies, sorry for that.

Below is my code:

var Data = $.ajax({
    url: url,
    type: 'POST',
    dataType:"json",
    async: false
}).responseText;

console.log(Data);

url is a variable that is passed inside my function in case you might ask.

Answer 1

Update : See Anthony Grist's comment on your question, I missed the fact that your JSON is invalid. Since he hasn't posted an answer, I'll pick it up.

Your JSON is invalid because you're returning two separate arrays, this one:

[{"v":"233","pv":"1.83","avd":"00:01:58","nv":"82.83%","br":"75.11%"},
{"v":"17","pv":"3.65","avd":"00:08:31","nv":"70.59%","br":"58.82%"},
{"v":"9","pv":"2.22","avd":"00:01:51","nv":"0.00%","br":"44.44%"}]

and this one:

[{"date":"2013-02-01","visits":63},
{"date":"2013-02-02","visits":30}]

You can't do that, because the top level of a JSON document must be one thing (an object or an array).

You could return an object with properties for each array:

{
"vdata":
    [{"v":"233","pv":"1.83","avd":"00:01:58","nv":"82.83%","br":"75.11%"},
     {"v":"17","pv":"3.65","avd":"00:08:31","nv":"70.59%","br":"58.82%"},
     {"v":"9","pv":"2.22","avd":"00:01:51","nv":"0.00%","br":"44.44%"}
    ],
"datedata":
    [{"date":"2013-02-01","visits":63},
     {"date":"2013-02-02","visits":30}
    ]
}

After parsing (see below), you can access that data like this:

console.log(data.vdata[0].v); // "233"
console.log(data.datedata[0].date); // "2013-02-01"

Or an array with two slots, with each slot having one of your arrays in it:

[
    [{"v":"233","pv":"1.83","avd":"00:01:58","nv":"82.83%","br":"75.11%"},
     {"v":"17","pv":"3.65","avd":"00:08:31","nv":"70.59%","br":"58.82%"},
     {"v":"9","pv":"2.22","avd":"00:01:51","nv":"0.00%","br":"44.44%"}
    ],
    [{"date":"2013-02-01","visits":63},
     {"date":"2013-02-02","visits":30}
    ]
]

After parsing (see below), you can access that data like this:

console.log(data[0][0].v); // "233"
console.log(data[1][0].date); // "2013-02-01"

Personally, I prefer using an object, since then it's clear which array I'm accessing.

---

Original answer:

jQuery will parse the JSON into an object for you and pass that to the success function, which you can then access just like any other object. In your case, the top level is an array. So:

$.ajax({
    url: url,
    type: 'POST',
    dataType:"json",
    async: false,
    success: function(data) {
        // Use the line from above that suits the way
        // you updated your JSON structure
    }
});

---

Side note: async: false is deprecated and will be removed at some point. It's generally not a good idea to do synchronous ajax requests, it tends to lock up the UI of the browser during the request. Instead, just structure your code to continue processing when the success callback is triggered.

Answer 2

If I understand your problem you need to access the same key for all objects in this array.

There is no direct method to do that, you have to iterate through all objects in this array and then find the desired key in each of those objects.

JSON.parse() will convert this string into a Javascript Object (JSON)

var myData = JSON.parse(Data);

for(var i = 0; i < myData.length; i++) {
    console.log("This is the nv value of the " + i + " object: " + myData[i].nv);
}