JS: Separate Array items and display individual items in a table

Question

In my application I get a JSON Object from a API and one of the items fetched from the api is the days of the week that the flight happens (in an array inside the main array).

API JSON ARRAY SCREENSHOT

In my HTML I've formatted a table to display the days of the week

HTML LAYOUT SCREENSHOT

The issue is that the amount of days depends, and each Flight has a different number of days. In my mind I need to:

Split the array of DAYS and get the amount of items
Display to inner html <Td ID="SOME ID"> using for each so I only have the amount of rows needed.

The thing is: I have no clue on how to do it. And most of the websites are unclear.

Please HELP!

Currently this is my JS.

document.getElementById('modalSchedule').innerHTML = flightData.weekdays; // Modal info Days Of Week

// FlightData is a variable of the entire JSON output

And this is my HTML:

<div class="modalScheduleBody">
    <table class="table table-bordered table-striped table-sm">
        <thead>
            <th scope="col">
                <span class="badge badge-info">
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar3-range" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
                    <path fill-rule="evenodd" d="M7 10a1 1 0 0 0 0-2H1v2h6zm2-3a1 1 0 0 1 0-2h6v2H9z"/>
                </svg>
                SCHEDULE
                </span>
            </th>
        </thead>

        <tbody>
            <!-- DAY 1-->
            <tr>
                            <td scope="row">
                              <span>
                                <samp>
                                  MONDAY
                                </samp>
                              </span>
                            </td>
                          </tr>

                        <!--DAY 2 -->
                          <tr>
                            <td scope="row">
                              <span>
                                <samp>
                                  TUESDAY
                                </samp>
                              </span>
                            </td>
                          </tr>

                          <!-- DAY 3-->
                          <tr>
                            <td scope="row">
                              <span>
                                <samp>
                                  WEDNESDAY
                                </samp>
                              </span>
                            </td>
                          </tr>

                        <!-- DAY 4 -->
                          <tr>
                            <td scope="row">
                              <span>
                                <samp>
                                  THURSDAY
                                </samp>
                              </span>
                            </td>
                          </tr>

                        <!-- DAY 5 -->
                          <tr>
                            <td scope="row">
                              <span>
                                <samp>
                                  FRIDAY
                                </samp>
                              </span>
                            </td>
                          </tr>

                        <!-- DAY 6-->
                          <tr>
                            <td scope="row">
                              <span>
                                <samp>
                                  SATURDAY
                                </samp>
                              </span>
                            </td>
                          </tr>

                        <!-- DAY 7-->
                          <tr>
                            <td scope="row">
                              <span>
                                <samp>
                                  SUNDAY
                                </samp>
                              </span>
                            </td>
                          </tr>
                          
                        </tbody>
                      </table>

imvain2 · Accepted Answer · 2020-11-19 20:26:11Z

1

You can loop through the array and just dynamically create each tr td samp and span and append them to the tbody of the table.

_table = document.querySelector(".modalScheduleBody table tbody");

flightData.weekdays.forEach(function(d){
   tr = document.createElement("tr");
   td = document.createElement("td");
   td.setAttribute("scope","row");
   span = document.createElement("span");
   samp = document.createElement("samp");
   samp.innerHTML = d;
   span.appendChild(samp)
   td.appendChild(span)
   tr.appendChild(td)
   _table.appendChild(tr)
});

answered Nov 19, 2020 at 20:26

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JS: Separate Array items and display individual items in a table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related