Отображение содержимого массива. json в html с использованием javascript

Question

Я получаю ответ json от URL-адреса API, и я сохранил его в const data=await response.json() Я вычислил длину данных, используя const data_length = data.length Я попытался l oop через весь объект json, чтобы получить отдельные записи, например:

strava_api. js

async function getActivites(res){

    const activities_link = `https://www.strava.com/api/v3/athlete/activities?access_token=${res.access_token}`
    const response = await fetch(activities_link)
    const data = await response.json()
    const data_length = data.length
    for (var i = 0; i < data.length; i++) {

     const newData=[data[i].type ,data[i].name, data[i].start_date, data[i].distance, data[i].elapsed_time, data[i].average_heartrate]
     document.getElementById('type').textContent = data[i].type
     document.getElementById('name').textContent = data[i].name
     document.getElementById('start_date').textContent = data[i].start_date
     document.getElementById('distance').textContent = data[i].distance
     document.getElementById('elapsed_time').textContent = data[i].elapsed_time
     document.getElementById('average_heartrate').textContent = data[i].average_heartrate
     //console.log(newData);

    }

}

Теперь я пытаюсь отобразить эти данные в HTML:

index. html

<h1>Hello Strava developer</h1>
    <h2>Here is your activities data</h2>
    <p>
        Activity type : <span id="type"></span></br>
        Activity name : <span id="name"></span></br>
        Activity start date : <span id="start_date"></span></br>
        Activity distance : <span id="distance"></span></br>
        Activity elapsed time : <span id="elapsed_time"></span></br>
        Activity Avg.HR : <span id="average_heartrate"></span>
    </p>

Теперь у меня отображаются данные, но только для первого массива объектов, у меня 30 массивов, как я могу отобразить их все?