javascript - 我已将嵌套 Json 数据存储在变量中，如何在 jquery 的另一个函数中访问它们？

Question

我正在尝试访问我的所有数据，以便我可以将其附加到我的 html 文档中。

我无法使用 evt.locations[i].foo 访问任何嵌套数组，因为它只会返回第一条记录。

我的目标是能够访问我已声明的变量并将它们附加到 main_info 或 secondary_info 中。

注意:我显然会重组每次使用的段落数量，但这只是为了在页面上看到它。

$.each(data.events, function(i, evt) {

    //getting all nested records

    evt.locations.forEach(function(locations, i, array) {

        //location data
        var city = evt.locations[i].city;
        var state = evt.locations[i].state;
        var timeZone = evt.locations[i].timezone;
        var contactPhone = evt.locations[i].contactPhone;
        var contactEmail = evt.locations[i].contactEmail;
        var contactName = evt.locations[i].contactName;
        var address1 = evt.locations[i].address1;
        var address2 = evt.locations[i].address2;
        var postalCode = evt.locations[i].postalCode;

        //hosts
        var host = evt.locations[i].tags.host;
        var specialGuest = evt.locations[i].tags.specialGuest;
        var cohost = evt.locations[i].tags.cohost;


        //tiers
        var tierTitle = evt.locations[i].tiers[i].title;
        var tierDecription = evt.locations[i].tiers[i].decription;
        var tierPrice = evt.locations[i].tiers[i].price;
        var tierRaiser = evt.locations[i].tiers[i].raiser;
        var tierMax = evt.locations[i].tiers[i].maxNum;
        var tierQuantity = evt.locations[i].tiers[i].quantity;

        var shiftStart = evt.locations[i].shifts[i].startDate;
        var shiftEnd = evt.locations[i].shifts[i].endDate;

        //Creating variables for schema found within locations

        console.log(evt.locations[i].city)

        //if equal to null/nan/undefined/""
    });


    var main_info = '<h1>' + evt.name + '</h1>';
    main_info += '<p>' + evt.templateInfo.title + '</p>';
    main_info += '<p>' + evt.description + '</p>';
    main_info += '<p> Date: ' + dateString + " " + timeOfEvent + '</p>';
    main_info += '<button class="eventsButton">View Event Details</button>';


    // only counts first record
    // main_info += '<p class="mainInfo">' + evt.locations[i].city + ',' 
           + evt.locations[i].state +'</p>';


    var secondary_info = '<h1 class="">' + 'hello' + '</h1>';
    secondary_info += '<p class="">' + evt.description + '</p>';
    secondary_info += '<p class="">' + evt.createdDate + '</p>';
    secondary_info += '<p class="">' + evt.createdDate + '</p>';
    secondary_info += '<p class="">' + evt.guestsCanInviteOthers + '</p>';

code in JsBin

Answer 1

你已经从http调用中得到了一个可以使用的对象，为什么还要再次解析它

$(document).ready(function() {
  // Getting all the data from AWS link
  $.ajax({
    url: 'https://s3.amazonaws.com/interview-api-samples/events-results.json',
    cache: false,
    dataType: 'json',
    type: 'GET',
    data: ({
      'events': []
    }),
    success: printEvents,
    error: function(e, xhr) {
      console.log(e);
    }

  });

  function printEvents(events) {

    $.each(events.events, function(i, event) {
      //console.log(i, event);
      var eventStart = event.startDate;
      var myDate = new Date(eventStart);

      var dateString = myDate.getUTCMonth() + "/" + ("0" + (myDate.getUTCDate() + 1)).slice(-2) + "/" + ("0" + myDate.getUTCFullYear()).slice(-2);

      // Converting time from military to standaerd and checking if it is am/pm
      var hours = myDate.getUTCHours();
      var minutes = myDate.getUTCMinutes();

      var timeOfEvent = "" + ((hours > 12) ? hours - 12 : hours);
      timeOfEvent += (minutes < 10) ? ":0" + minutes : ":" + minutes;
      timeOfEvent += (hours >= 12) ? " P.M." : " A.M.";

      var main_info = '<h1>' + event.name + '</h1>';
      main_info += '<p>' + /*event.templateInfo.title*/ "" + '</p>'; //<--- empty
      main_info += '<p>' + event.description + '</p>';
      main_info += '<p> Date: ' + dateString + " " + timeOfEvent + '</p>';
      main_info += '<button class="eventsButton">View Event Details</button>';

      console.log(event.locations);
      $.each(event.locations, function(i, location) {
        // here take what you need es: location.city, location.contactGivenName ....
        $.each(Object.keys(location), function(i, loc) {
          main_info += '<p class="mainInfo">' + loc + ' , ' + location[loc] + '</p>';
        })

        $.each(location.tiers, function(i, tier) {
          // here take what you need es: tier.id, tier.quantity ....
          $.each(Object.keys(tier), function(i, t) {
            main_info += '<p class="mainInfo">' + t + ' , ' + tier[t] + '</p>';
          })
        });
        
        //same here for others nested array elements
      });

      var secondary_info = '<h1 class="">' + 'hello' + '</h1>';
      secondary_info += '<p class="">' + event.description + '</p>';
      secondary_info += '<p class="">' + event.createdDate + '</p>';
      secondary_info += '<p class="">' + event.createdDate + '</p>';
      secondary_info += '<p class="">' + event.guestsCanInviteOthers + '</p>';
      $("div.content").append("<div class=event><div class=main_info>" + main_info + "<div class=secondary_info>" + secondary_info + "<input class=attending type=checkbox>" + "I will attend this event" + "</>" + "</div></div></div>");

    });

  }

  console.log("done");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class=content></div>