Как я могу l oop второй элемент в jquery?

Question

это мой объект событий

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'
  }]
}];

У меня есть эта функция, где я получаю свои события. С помощью функции добавления я изменяю содержимое html. Я также печатаю результаты в таблице внутри foreach, чтобы она создавала новую таблицу для каждого события. Проблема приходит те, кого я хочу получить доступ к сессиям. Как я мог это сделать?

 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

Вам также следует выполнить итерации объекта сеансов, но с другим индексом, поскольку переменная индекса предназначена для объекта событий. Также вы можете извлечь код и вставить его вместо идентификатора:

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 2

Вам нужно добавить еще один l oop, который будет l oop за сеансы. В настоящее время вы используете внешний индекс для сеансов, который является неправильным.

Answer 3

A Javascript решение этого

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
    }
  }
}