How do you turn a JSON API response into rendered HTML rows in the DOM?

You loop over the response array, build up one HTML string of <tr> rows, and assign that string to the table body's innerHTML in a single step.

The pattern is "accumulate a string, then inject once". Looping and writing each row to the DOM individually would be slow; building one big string and setting innerHTML once is the common approach:

function displayStationboard(result) {
  let stationboard = document.querySelector('#stationboard tbody');
  let lines = '';
  let index = 0;

  // iterate over all departures in the response
  while (result.stationboard.length > index) {
    let current = result.stationboard[index];
    lines += createStationboardEntry(current); // build one <tr>
    index++;
  }

  stationboard.innerHTML = lines; // write all rows at once
}

Each result.stationboard entry is one departure; createStationboardEntry() turns it into a table row, and the rows are concatenated into lines before being placed in the <tbody>.

Tip: Building HTML by string concatenation is fine for trusted data like this, but if any field came from a user, this is how XSS bugs happen — untrusted text in innerHTML can inject <script>. Escape it or use safer DOM APIs in that case.