Fetch data from Strava API and return data to table

I've tried quite a few things and read a lot of examples of using the data returned by Fetch as an object to put into a table or similar but I can't seem to get it. The following code authorises the Strava user to use my test App and then gets the Users last 30 activities. Once data is returned as a Promise I can view it in the console, but not use it. I'm a bit of a novice so just need some direction on how to use this data in table.

//my code is below

<script>

    //reAuthorize Click
    function Authorize() {
            document.location.href = "https://www.strava.com/oauth/authorize?client_id=XXX&redirect_uri=https://localhost:44370/strava/index&response_type=code&scope=activity:read_all"
    }

    const codeExchangeLink = `https://www.strava.com/api/v3/oauth/token`
    function codeExchange() {


        fetch(codeExchangeLink, {
            method: 'post',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json'
            },

            body: JSON.stringify({
                client_id: '@ViewBag.cId',
                client_secret: '@ViewBag.cSec',
                code: '@ViewBag.code',
                //need to do this to get a new refresh token that 'reads all' and issues a new Access Token - refer to comments below
                grant_type: 'authorization_code'
            })
        })
            .then(res => res.json())
            .then(res => getActivities(res))
 
    }

    //  getActivities
    const auth_link = "https://www.strava.com/oauth/token"

    function getActivities(res) {

        var obj;
        const activities_link = `https://www.strava.com/api/v3/athlete/activities?access_token=${res.access_token}`
        fetch(activities_link)
            .then((res) => console.log(res.json()))

    }

</script>


<form asp-action="Index" method="get">
    <input type="text" id="cId" value="@ViewBag.cId" />
    <input type="text" id="cSec" value="@ViewBag.cSec" />
    <input type="text" id="rT" value="@ViewBag.rT" />
    <input type="text" id="code" value="@ViewBag.code" />
    <input type="text" id="test" />
</form>
<input type="button" onclick="Authorize()" value="ReAuthorise" />
<input type="button" onclick="codeExchange()" value="Get Activities" />

// After help from @Barmar i have made the following changes to the getActivities function. I have then tried to populate the table with the following code with no luck

    async function getActivities(res) {

        const activities_link = `https://www.strava.com/api/v3/athlete/activities?access_token=${res.access_token}`
        await fetch(activities_link)
            /*            .then((res) => console.log(res.json()))*/

            .then((res) => res.json())
            .then(data => populateTable(data));
    }

    function populateTable(data) {


        for (var i = 0; i < data.length; i++) {
            // create a new row
            var newRow = table.insertRow(data.length);
            for (var j = 0; j < data[i].length; j++) {
                // create a new cell
                var cell = newRow.insertCell(j);

                // add value to the cell
                cell.innerHTML = data[i][j];
            }
        }
    }

I found the answer that I was looking for - Working code is included below (this authrorises the Strava User and populates a table with their 30 most recent activities):

<script>

    //reAuthorize Click
    function Authorize() {
            document.location.href = "https://www.strava.com/oauth/authorize?client_id=XXX&redirect_uri=https://localhost:44370/strava/index&response_type=code&scope=activity:read_all"
    }

    const codeExchangeLink = `https://www.strava.com/api/v3/oauth/token`
    function codeExchange() {


        fetch(codeExchangeLink, {
            method: 'post',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json'
            },

            body: JSON.stringify({
                client_id: '@ViewBag.cId',
                client_secret: '@ViewBag.cSec',
                code: '@ViewBag.code',
                //need to do this to get a new refresh token that 'reads all' and issues a new Access Token - refer to comments below
                grant_type: 'authorization_code'
            })
        })
            .then(res => res.json())
            .then(res => getActivities(res))

    }

    //  getActivities
    const auth_link = "https://www.strava.com/oauth/token"

    async function getActivities(res) {

        const activities_link = `https://www.strava.com/api/v3/athlete/activities?access_token=${res.access_token}`
        await fetch(activities_link)

            .then((res) => res.json())
            .then(data => populateTable(data));
    }

    function populateTable(data) {
        for (var i = 0; i < data.length; i++) {
            var table = "";

            for (var i in data) {
                table += "<tr>";
                table += "<td>"
                    + data[i].name + "</td>"
                    + "<td>" + data[i].distance + "</td>"
                    + "<td>" + data[i].average_heartrate + "</td>"
                    + "<td>" + data[i].moving_time + "</td>";
                table += "</tr>";
            
            }
            document.getElementById("table").innerHTML = table;
        }
    }

</script>


<form asp-action="Index" method="get">
    <input type="text" id="cId" value="@ViewBag.cId" />
    <input type="text" id="cSec" value="@ViewBag.cSec" />
    <input type="text" id="rT" value="@ViewBag.rT" />
    <input type="text" id="code" value="@ViewBag.code" />
    <input type="text" id="test" />
</form>
<input type="button" onclick="Authorize()" value="ReAuthorise" />
<input type="button" onclick="codeExchange()" value="Get Activities" />
    <nav class="navbar navbar-default">
    </nav>
    <div class="col-md-3"></div>
    <div class="col-md-6 well">
        <hr style="border-top:1px dotted #ccc;" />
        <div class="col-md-8">
            <table class="table table-bordered">
                <thead class="alert-info">
                    <tr>
                        <th>Activity Name</th>
                        <th>Distance</th>
                        <th>Heart Rate</th>
                        <th>Time</th>
                    </tr>
                </thead>
                <tbody id="table"></tbody>
            </table>
            </div>
        </div>