Loop through json array string

Question

Using the following code, I am getting the json array string in the div (named remoteFeed)
Say it shows:

{"id":"25","name":"Basil","country":"USA"}

My question is how can I get the json array elements?

Pl note that even though it shows the value in the div -- the alert (see below) shows blank!!!

alert(data);  //-------------------Shows blank

NB: Being a newbie I was trying to get the value first. But in this case we have to convert it to json object. So if you know a better way, so that I get the values (id, name..) on the client side that is more advisable

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">


(function ($) {
$(document).ready(function(){
  $('#remoteFeed').load('http://testservice/json/');

  var data = remoteFeed.innerHTML;
  alert(data);  //-------------------Shows blank

  /*
              var jsonObj = JSON.stringify(eval("(" + data + ")"));
              for(var i in jsonObj)
            {
            var id = data[i].country_code;
            alert(id);
            }

  */
});
})(jQuery);


 var data = remoteFeed.innerHTML;
  alert(data);

</script>

</head>
<body>

      <div id="remoteFeed"></div>

</body>

pl provide complete code - not code fragment

Seb Thomas
– Seb Thomas

2014-01-28 10:39:46 +00:00
Commented Jan 28, 2014 at 10:39 — Seb Thomas
– Seb Thomas, Commented Jan 28, 2014 at 10:39
I think you need to use callback function of .load()

Satpal
– Satpal

2014-01-28 10:42:48 +00:00
Commented Jan 28, 2014 at 10:42 — Satpal
– Satpal, Commented Jan 28, 2014 at 10:42

Boaz · Accepted Answer · 2014-01-28 14:24:11Z

1

Why the alert() is blank

You're getting a blank value in the alert() call because you're not waiting for the load() request to complete. Instead of immediately alerting the value, consider passing a callback function to load(). The callback function is executed once the request is completed.

For example:

$('#remoteFeed').load('http://testservice/json/', function() {
    alert($('#remoteFeed').html());
});

How to treat a JSON string as an object

Basically, you can use the native JSON object in modern browsers to parse a JSON string into an object.

For example:

var json_object = JSON.parse(json_string);

Alternatively, you'll be far better off using one of jQuery's other AJAX functions, that are more suitable to this task than load() which is meant for loading HTML.

For example:

$.getJSON('http://testservice/json/', function(json_object) {
    for(var i in json_object) {
       var id = json_object[i].country_code;
       alert(id);
    }
});

In this example the method $.getJSON() performs an AJAX request, assumes the returned data is in JSON format and automatically parses it for you. The callback function is then passed the resulting JSON object.

edited Jan 28, 2014 at 14:24

answered Jan 28, 2014 at 10:49

Boaz

20.3k9 gold badges68 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Seb Thomas Over a year ago

Can u pl provide the full code? I modified the code as below, but not working -------------- (function ($) { $(document).ready(function(){ $.getJSON('testservice/json', function(json_data) { for(var i in json_data) { var id = json_data[i].country_code; alert(id); } }); })(jQuery);

Boaz Over a year ago

There is no full code. I'm following your example. Based on the code in your comment, it seems you have a syntax error. You're missing a closing }) for the document.ready call. Anyway, you don't need to wrap this call with the immediately executing function, just do $(document).ready(function() { $.getJSON... })

Pratiksha Raikundaliya · Accepted Answer · 2014-01-28 10:50:28Z

0

To get json result data you can use jQuery.getJSON() method

refer the jquery site http://api.jquery.com/jquery.getjson/

answered Jan 28, 2014 at 10:50

Pratiksha Raikundaliya

616 bronze badges

2 Comments

Seb Thomas Over a year ago

None of the above soln is working. The sample in the url you given is working but instead of parse xml tags (in api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?) I need to parse json.

Pratiksha Raikundaliya Over a year ago

Hello , As you want fliker api data in json you just need to add format=json. [api.flickr.com/services/feeds/photos_public.gne?format=json]

Collectives™ on Stack Overflow

Loop through json array string

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related