How to parse json string using jquery

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

stackoverflow.com/questions/5071115/parse-json-string

Harsha W
– Harsha W

2017-02-20 06:21:13 +00:00
Commented Feb 20, 2017 at 6:21 — Harsha W
– Harsha W, Commented Feb 20, 2017 at 6:21

Taha Paksu · Accepted Answer · 2017-02-20 06:23:50Z

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/

Aren't you asking a bit much? That's not your question. You can do it yourself.

Smi10 · Accepted Answer · 2017-02-20 06:24:47Z

1

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.

answered Feb 20, 2017 at 6:24

Smi10

1051 silver badge11 bronze badges

Comments

Parth Ghiya · Accepted Answer · 2017-02-20 06:29:21Z

0

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

answered Feb 20, 2017 at 6:29

Parth Ghiya

6,9692 gold badges32 silver badges37 bronze badges

Comments

Sank.P · Accepted Answer · 2017-02-20 06:35:57Z

0

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>');
   }
});

answered Feb 20, 2017 at 6:35

Sank.P

535 bronze badges

Comments

Gourav Rathore · Accepted Answer · 2017-02-20 06:37:06Z

0

$(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);
    })


});

});

answered Feb 20, 2017 at 6:37

Gourav Rathore

413 bronze badges

Comments

Mairaj Ahmad · Accepted Answer · 2017-02-20 06:38:55Z

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);
});

2G is a valid property. But if you want to access it you have to write data['2G'].
You cannot use the dot notation to access 2G, but this does not mean that it is not a valid property name, furthermore you can access it using data['2G']. Leading numbers are perfectly fine for property names, they are just invalid in dot notation.

Collectives™ on Stack Overflow

How to parse json string using jquery

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related