Iterating over an array in a Fetch call

Question

I have a JSON object like this:

[{"user": "poetry2", "following": ["Moderator", "shopaholic3000"]}]

I am using a Fetch API like this:

    fetch (`/profile/${username}/following`)
    .then(response => response.json())
    .then(profiles => {
        profiles.forEach(function(profile){
            profileDisplay = document.createElement('button');
            profileDisplay.className = "list-group-item list-group-item-action";
            profileDisplay.innerHTML = `
            ${profile.following}`;
            listFollowing.appendChild(profileDisplay);
        })

    })

Right now, it is showing both the following users in the same button like this:

<button class="list-group-item list-group-item-action">
            Moderator,shopaholic3000</button>

How do I amend the Fetch call to show each of the following users in separate buttons. Something more like this:

<button class="list-group-item list-group-item-action">
            Moderator</button>
<button class="list-group-item list-group-item-action">
            shopaholic3000</button>

Answer 1

So you need to do a second loop to loop over the array in following

profiles.forEach(function(profile){
  profile.following.forEach(name => {
    const profileDisplay = document.createElement('button');
    profileDisplay.innerHTML = `${name}`;
    ....
  });
});