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

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

Answer 2

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.