如何使用jQuery解析JSON字符串

Question

I am trying to parse json string using jquery. Not getting any value.

var jsonString = '{"data":{"2G":[{"amount":"9","detail":"35 MB 2G Data , Post 35 MB you will be charged at 4p\/10kb","validity":"1 Day","talktime":"0"},{"amount":"16","detail":"90 MB 2G Data, Post 90 MB you will be charged at 4p\/10kb","validity":"2 Days","talktime":"0"},{"amount":"28","detail":"160 MB 2G Data, Post 160 MB you will be charged at 4p\/10kb","validity":"4 Days","talktime":"0"},{"amount":"54","detail":"300 MB 2G Data, Post 300 MB you will be charged at 4p\/10kb","validity":"7 Days","talktime":"0"},{"amount":"78","detail":"310 MB 2G Data , Post 310 MB you will be charged at 4p\/10kb","validity":"10 Days","talktime":"0"},{"amount":"95","detail":"550 MB 2G Data, Post 550 MB you will be charged at 4p\/10kb","validity":"14 Days","talktime":"0"},{"amount":"125","detail":"700 MB 2G Data, Post 700 MB you will be charged at 4p\/10kb","validity":"18 Days","talktime":"0"},{"amount":"155","detail":"850 MB 2G Data, Post 850 MB you will be charged at 4p\/10kb","validity":"21 Days","talktime":"0"},{"amount":"179","detail":"1 GB 2G Data, Post 1 GB you will be charged at 4p\/10kb","validity":"28 Days","talktime":"0"},{"amount":"198","detail":"Hero Recharge : Get 1.25 GB 2G Data assured benefit (upto 3 GB 2G Data with hero recharge)","validity":"28 Days","talktime":"0"},{"amount":"199","detail":"2 GB Unlimted 2G Data, Post 2 GB your speed will be reduced up to 40kbps","validity":"28 Days","talktime":"0"},{"amount":"249","detail":"3 GB Unlimted 2G Data, Post 3 GB your speed will be reduced up to 40kbps","validity":"28 Days","talktime":"0"},{"amount":"205","detail":"1 GB 2G Data Day + Extra 1 GB 2G Night Data (12AM to 6AM)","validity":"28 Days","talktime":"0"},{"amount":"305","detail":"2 GB 2G Data Day + Extra 2 GB 2G Night Data (12AM to 6AM)","validity":"28 Days","talktime":"0"},{"amount":"395","detail":"3 GB 2G Data Day + Extra 3 GB 2G Night Data (12AM to 6AM)","validity":"28 Days","talktime":"0"},{"amount":"57","detail":"190 MB 2G Data, Post 190 MB you will be charged at 4p\/10kb","validity":"28 Days","talktime":"0"},{"amount":"98","detail":"300 MB 2G Data, Post 300 MB you will be charged at 4p\/10kb","validity":"28 Days","talktime":"0"}]},"resCode":"200","resText":"SUCCESS"}';

var myData = JSON.parse(jsonString);

$(document).ready(function() {
    var $amountlist = $('#amount');
    var $detaillist = $('#detail');
    var $validitylist = $('#validity');
    var $talktimelist = $('#talktime');

    $.each(myData, function() {
        $('<li>' + data.2G.amount + '</li>').appendTo($amountlist);
        $('<li>' + data.2G.detail + '</li>').appendTo($detaillist);
        $('<li>' + data.2G.validity + '</li>').appendTo($validitylist);
        $('<li>' + data.2G.talktime + '</li>').appendTo($talktimelist);
    });
});

Here jsfiddle

Answer 1

You weren't iterating the correct node. Try this:

var jsonString = '{"data":{"2G":[{"amount":"9","detail":"35 MB 2G Data , Post 35 MB you will be charged at 4p\/10kb","validity":"1 Day","talktime":"0"},{"amount":"16","detail":"90 MB 2G Data, Post 90 MB you will be charged at 4p\/10kb","validity":"2 Days","talktime":"0"},{"amount":"28","detail":"160 MB 2G Data, Post 160 MB you will be charged at 4p\/10kb","validity":"4 Days","talktime":"0"},{"amount":"54","detail":"300 MB 2G Data, Post 300 MB you will be charged at 4p\/10kb","validity":"7 Days","talktime":"0"},{"amount":"78","detail":"310 MB 2G Data , Post 310 MB you will be charged at 4p\/10kb","validity":"10 Days","talktime":"0"},{"amount":"95","detail":"550 MB 2G Data, Post 550 MB you will be charged at 4p\/10kb","validity":"14 Days","talktime":"0"},{"amount":"125","detail":"700 MB 2G Data, Post 700 MB you will be charged at 4p\/10kb","validity":"18 Days","talktime":"0"},{"amount":"155","detail":"850 MB 2G Data, Post 850 MB you will be charged at 4p\/10kb","validity":"21 Days","talktime":"0"},{"amount":"179","detail":"1 GB 2G Data, Post 1 GB you will be charged at 4p\/10kb","validity":"28 Days","talktime":"0"},{"amount":"198","detail":"Hero Recharge : Get 1.25 GB 2G Data assured benefit (upto 3 GB 2G Data with hero recharge)","validity":"28 Days","talktime":"0"},{"amount":"199","detail":"2 GB Unlimted 2G Data, Post 2 GB your speed will be reduced up to 40kbps","validity":"28 Days","talktime":"0"},{"amount":"249","detail":"3 GB Unlimted 2G Data, Post 3 GB your speed will be reduced up to 40kbps","validity":"28 Days","talktime":"0"},{"amount":"205","detail":"1 GB 2G Data Day + Extra 1 GB 2G Night Data (12AM to 6AM)","validity":"28 Days","talktime":"0"},{"amount":"305","detail":"2 GB 2G Data Day + Extra 2 GB 2G Night Data (12AM to 6AM)","validity":"28 Days","talktime":"0"},{"amount":"395","detail":"3 GB 2G Data Day + Extra 3 GB 2G Night Data (12AM to 6AM)","validity":"28 Days","talktime":"0"},{"amount":"57","detail":"190 MB 2G Data, Post 190 MB you will be charged at 4p\/10kb","validity":"28 Days","talktime":"0"},{"amount":"98","detail":"300 MB 2G Data, Post 300 MB you will be charged at 4p\/10kb","validity":"28 Days","talktime":"0"}]},"resCode":"200","resText":"SUCCESS"}';

$(document).ready(function() {
    var $amountlist = $('#amount');
    var $detaillist = $('#detail');
    var $validitylist = $('#validity');
    var $talktimelist = $('#talktime');
    var myData = $.parseJSON(jsonString);    
    console.log(myData.data["2G"]);
    $.each(myData.data["2G"], function(i,dataElem) {
        $('<li>' + dataElem.amount + '</li>').appendTo($amountlist);
        $('<li>' + dataElem.detail + '</li>').appendTo($detaillist);
        $('<li>' + dataElem.validity + '</li>').appendTo($validitylist);
        $('<li>' + dataElem.talktime + '</li>').appendTo($talktimelist);
    });
});

http://jsfiddle.net/NJMyD/5183/

Answer 2

i am edit with defferent example please try to understand this code.

var json = '{"Users":[{"Name":"user999","Value":"test"},{"Name":"test2","Value":"test"}]}';

var json_parsed = $.parseJSON(json);

for (var u = 0; u < json_parsed.Users.length; u++){
    var user = json_parsed.Users[u];
    $('body').append($('<p>').html('User: '+user.Name+'<br />Value: '+user.Value));
}

This way you can parse Enjoy.

Answer 3

You have to iterate it over myData.data['2G']

Answer 4

You weren't iterating properly. Change it to below piece of code

$(document).ready(function() {
   var loop = myData.data["2G"];
   for(var i = 0; i < loop.length; i ++) {
      $("#amount").append('<li>' + loop[i].amount + '</li>');
      $("#detail").append('<li>' + loop[i].detail + '</li>');
      $("#validity").append('<li>' + loop[i].validity + '</li>');
      $("#talktime").append('<li>' + loop[i].talktime + '</li>');
   }
});

Answer 5

$(document).ready(function() {
var $amountlist = $('#amount');
var $detaillist = $('#detail');
var $validitylist = $('#validity');
var $talktimelist = $('#talktime');

$.each(myData.data, function(key,value) {
        $.each(value,function(i,val){

   $('<li>' + val.amount + '</li>').appendTo($amountlist);
    $('<li>' + val.detail + '</li>').appendTo($detaillist);
    $('<li>' + val.validity + '</li>').appendTo($validitylist);
    $('<li>' + val.talktime + '</li>').appendTo($talktimelist);
    })


});

});

Answer 6

You cannot access 2G with dot . You can use data["2G"] to access this property.

var jsonString = '{"data":{"2G":[{"amount":"9","detail":"35 MB 2G Data , Post 35 MB you will be charged at 4p\/10kb","validity":"1 Day","talktime":"0"},{"amount":"16","detail":"90 MB 2G Data, Post 90 MB you will be charged at 4p\/10kb","validity":"2 Days","talktime":"0"},{"amount":"28","detail":"160 MB 2G Data, Post 160 MB you will be charged at 4p\/10kb","validity":"4 Days","talktime":"0"},{"amount":"54","detail":"300 MB 2G Data, Post 300 MB you will be charged at 4p\/10kb","validity":"7 Days","talktime":"0"},{"amount":"78","detail":"310 MB 2G Data , Post 310 MB you will be charged at 4p\/10kb","validity":"10 Days","talktime":"0"},{"amount":"95","detail":"550 MB 2G Data, Post 550 MB you will be charged at 4p\/10kb","validity":"14 Days","talktime":"0"},{"amount":"125","detail":"700 MB 2G Data, Post 700 MB you will be charged at 4p\/10kb","validity":"18 Days","talktime":"0"},{"amount":"155","detail":"850 MB 2G Data, Post 850 MB you will be charged at 4p\/10kb","validity":"21 Days","talktime":"0"},{"amount":"179","detail":"1 GB 2G Data, Post 1 GB you will be charged at 4p\/10kb","validity":"28 Days","talktime":"0"},{"amount":"198","detail":"Hero Recharge : Get 1.25 GB 2G Data assured benefit (upto 3 GB 2G Data with hero recharge)","validity":"28 Days","talktime":"0"},{"amount":"199","detail":"2 GB Unlimted 2G Data, Post 2 GB your speed will be reduced up to 40kbps","validity":"28 Days","talktime":"0"},{"amount":"249","detail":"3 GB Unlimted 2G Data, Post 3 GB your speed will be reduced up to 40kbps","validity":"28 Days","talktime":"0"},{"amount":"205","detail":"1 GB 2G Data Day + Extra 1 GB 2G Night Data (12AM to 6AM)","validity":"28 Days","talktime":"0"},{"amount":"305","detail":"2 GB 2G Data Day + Extra 2 GB 2G Night Data (12AM to 6AM)","validity":"28 Days","talktime":"0"},{"amount":"395","detail":"3 GB 2G Data Day + Extra 3 GB 2G Night Data (12AM to 6AM)","validity":"28 Days","talktime":"0"},{"amount":"57","detail":"190 MB 2G Data, Post 190 MB you will be charged at 4p\/10kb","validity":"28 Days","talktime":"0"},{"amount":"98","detail":"300 MB 2G Data, Post 300 MB you will be charged at 4p\/10kb","validity":"28 Days","talktime":"0"}]},"resCode":"200","resText":"SUCCESS"}';

Also you are not iterating over correct node change you code like this

$.each(myData.data["2G"], function (i,data) {
    alert(data.amount);
    alert(data.detail);
    alert(data.validity);
    alert(data.talktime);
});