Looping through JSON with jQuery

Question

Sorry, I'm sure there's a duplicate of this but I'm really new to jQuery. I have the following JSON string...

{
   "totalNumEntries":2,
   "pageType":"CampaignPage",
   "totalBudget":{
      "period":{
         "value":"DAILY"
      },
      "amount":{
         "comparableValueType":"Money",
         "microAmount":0
      },
      "deliveryMethod":null
   },
   "entries":[
      {
         "id":733413,
         "name":"Interplanetary Cruise #1345659006301",
         "status":null,
         "servingStatus":null,
         "startDate":null,
         "endDate":null,
         "budget":null,
         "biddingStrategy":null,
         "conversionOptimizerEligibility":null,
         "campaignStats":{
            "startDate":null,
            "endDate":null,
            "network":{
               "value":"ALL"
            },
            "clicks":null,
            "impressions":null,
            "cost":null,
            "averagePosition":null,
            "averageCpc":null,
            "averageCpm":null,
            "ctr":null,
            "conversions":null,
            "viewThroughConversions":null,
            "statsType":"CampaignStats"
         },
         "adServingOptimizationStatus":null,
         "frequencyCap":{
            "impressions":0,
            "timeUnit":null,
            "level":null
         },
         "settings":null,
         "networkSetting":null,
         "forwardCompatibilityMap":null
      },
      {
         "id":733414,
         "name":"Interplanetary Cruise banner #1345659006387",
         "status":null,
         "servingStatus":null,
         "startDate":null,
         "endDate":null,
         "budget":null,
         "biddingStrategy":null,
         "conversionOptimizerEligibility":null,
         "campaignStats":{
            "startDate":null,
            "endDate":null,
            "network":{
               "value":"ALL"
            },
            "clicks":null,
            "impressions":null,
            "cost":null,
            "averagePosition":null,
            "averageCpc":null,
            "averageCpm":null,
            "ctr":null,
            "conversions":null,
            "viewThroughConversions":null,
            "statsType":"CampaignStats"
         },
         "adServingOptimizationStatus":null,
         "frequencyCap":{
            "impressions":0,
            "timeUnit":null,
            "level":null
         },
         "settings":null,
         "networkSetting":null,
         "forwardCompatibilityMap":null
      }
   ]
}

This is returned from /google/getCampaigns in my application. I'm looping through it with the following code, but the page stays blank...

<script>
$(document).ready(function() {
    $.getJSON('google/getCampaigns', function(data) {
        $.each(data.entries, function(index) {
            $('span').append(index.name);
        });
    });
});

</script>
Loading...
<span />

Can anyone see what I'm doing wrong?

Thanks,

David

Try adding alert()'s to various places to debug it. (Eg. inside the getJSON function, to check that you got the right json, then inside the each function to check it is iterating/looping, then check that index is a json object etc.) That way you know that it is running the code you expect. — ronalchn
– ronalchn, Commented Sep 1, 2012 at 10:23

Kundan Singh Chouhan · Accepted Answer · 2012-09-01 10:23:50Z

7

The each statement should like this:

$.each(data.entries, function(index,element) {
    $('span').append(element.name);
});

or another approach would be

$.each(data.entries, function(index) {
    $('span').append(data.entries[index].name);
});

Hope this will fix your problem.

answered Sep 1, 2012 at 10:23

Kundan Singh Chouhan

14.4k4 gold badges30 silver badges33 bronze badges

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

Comments

rahul · Accepted Answer · 2012-09-01 10:25:09Z

1

what is the need of passing anything else not even index this will help you for sure

$.each(data.entries, function() {
      $('span').append(this.name);
});

answered Sep 1, 2012 at 10:25

rahul

7,6738 gold badges42 silver badges54 bronze badges

Collectives™ on Stack Overflow

Looping through JSON with jQuery

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related