如何循环 jquery 中的第二个元素？

Question

this is my object of events

let aEvents = [{
  id: '1',
  location: 'asd',
  dates: '2019-12-21 16:00:00-2019-12-21 17:30:00',
  position: '3',
  status: true,
  sessions: [{
    id: '1',
    text: 'Random text',
    startEndDate: '2019-12-21 16:00:00 - 2019-12-21 17:30:00'
  }, {
    id: '2',
    text: 'Random text 2',
    startEndDate: '2017-12-21 16:00:00 - 2019-12-21 17:30:00'
  }]
}];

I have this function where i recive my aEvents. With the append function im changing some html content. Im also printing the results in a table inside a foreach so it creates a new table for each event. The problem come ones I want to acces the sessions. How could I do that?

 addEvents = function () {
      let events = this.myEvents;
      let checkedEvents = [];
      let that = this;

      var content = this.$('#eventsBox');
      content.find('event-container').remove();

      this.$('#check-list input:checked').each(function() {
        checkedEvents.push(that.$(this).data('index'));
        let index = that.$(this).data('index');

        content.find('#events-content').append(`
          <div class="event-container">
            <div class="row">
              <div class="col-12">
                <table class="table" id="eventT">
                  <thead>
                    <tr>
                      <th scope="col">ID</th>
                    <tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        ${events[index].id}
                        // How can i acces the sessions[index] to print all of them
                        ${events[index].sessions[index].id}
                      </td>
               ...

Answer 1

You need to add one more loop which will loop over sessions. Currently you are using the external index for sessions which is incorrect.

Answer 2

You should also iterate the sessions object, but with another index, because the index variable is for the events object. Also, you can extract the code and insert it in the place of the id:

 addEvents = function () { let events = this.myEvents; let checkedEvents = []; let that = this; var content = this.$('#eventsBox'); content.find('event-container').remove(); let idFromSessions = {}; for (let x = 0; x < events.length; x++) { idFromSessions[x] = ''; for (let y = 0; y < events[x].sessions.length; y++) { idFromSessions[x] += events[x].sessions[y].id; } } this.$('#check-list input:checked').each(function() { checkedEvents.push(that.$(this).data('index')); let index = that.$(this).data('index'); content.find('#events-content').append(` <div class="event-container"> <div class="row"> <div class="col-12"> <table class="table" id="eventT"> <thead> <tr> <th scope="col">ID</th> <tr> </thead> <tbody> <tr> <td> ${events[index].id} // Using this new variable, you can print all of them ${idFromSessions[index]} </td>

Answer 3

A Javascript solution to this

for(var i=0;i<aEvents.length;i++) {
 var sessions = aEvents[i].sessions
 if(sessions !== undefined && sessions.length >0) {
   for(var j=0;j<sessions.length;j++) {
    //you are now looping sessions
    //perform append actions here
    }
  }
}