My JSON object looks like this:
[{"user": "poetry2", "following": ["Moderator", "shopaholic3000"]}]
I have implemented a Fetch API in this way:
fetch (`/profile/${username}/following`)
.then(response => response.json())
.then(profiles => {
profiles.forEach(function(profile){
profile.following.forEach(function(user){
profileDisplay = document.createElement('button');
profileDisplay.className = "list-group-item list-group-item-action";
profileDisplay.innerHTML = `
${user}`;
listFollowing.appendChild(profileDisplay);
});
})
})
Currently, it displays both following users in the same button like this:
<button class="list-group-item list-group-item-action">
Moderator,shopaholic3000</button>
I want to modify the Fetch call to show each following user in a separate button. Similar to this:
<button class="list-group-item list-group-item-action">
Moderator</button>
<button class="list-group-item list-group-item-action">
shopaholic3000</button>