how to print each Index of my JSON Fetched Files?

Question

I have a lists of Tables that is being displayed as seen here in the image:

Encircled Red is the problem wherein I want to display the Index of each JSON array as my Table number.

Here's my code:

function getExternal() {
   fetch('https://kyoala-api-dev.firebaseapp.com/queue-group/5e866db4-65f6-4ef0-af62-b6944ff029e5')
      .then(res => res.json())
      .then((res) => {
         let reservationList = '';

         res.forEach(function (reservation) {
            reservationList += `
            <tr>
               <th scope="row">Table</th>
               <td class="text-center">${reservation.minCapacity} - ${reservation.maxCapacity}</td>
               <td class="text-center">${reservation.activeQueuesCount}</td>
            </tr>`;
         });
         document.getElementById('lists').innerHTML = reservationList;
      })
      .catch(err => console.log(err));
};

The forEach iterator gives you (reservation, index), just update to include the index. — lux, May 23 '18 at 15:24

score 0 · Accepted Answer · answered May 23 '18 at 15:28

basically you need to use index from the forEach function, it will give you the current index of the item you are at that moment.

below you have the change added:

function getExternal() {
   fetch('https://kyoala-api-dev.firebaseapp.com/queue-group/5e866db4-65f6-4ef0-af62-b6944ff029e5')
      .then(res => res.json())
      .then((res) => {
         let reservationList = '';

         res.forEach(function (reservation, index) {
            reservationList += `
            <tr>
               <th scope="row">${index}</th>
               <td class="text-center">${reservation.minCapacity} - ${reservation.maxCapacity}</td>
               <td class="text-center">${reservation.activeQueuesCount}</td>
            </tr>`;
         });
         document.getElementById('lists').innerHTML = reservationList;
      })
      .catch(err => console.log(err));
};

Thank you sir.... so my code was kinda wrong, I've tried what you did in the function part like this: function(index, reservation) so reservation must be the first parameter then index would be the next as you did. thanks a lot. — Ace Valdez, May 23 '18 at 17:16

how to print each Index of my JSON Fetched Files?

1 Answers1