How to make a new div for every response from JSON API in JavaScript?

Question

(Sorry if the title doesn't make sense, I wasn't sure how to word it.)

I have an API that returns a players friends list. It ends up looking something like this:

{
    "friendslist": {
        "friends": [
            {
                "steamid": "76561197960430929",
                "relationship": "friend",
                "friend_since": 1486338170
            },
            {
                "steamid": "76561197962297457",
                "relationship": "friend",
                "friend_since": 1485227275
            },
            {
                "steamid": "76561197977344631",
                "relationship": "friend",
                "friend_since": 1484606628
            },
            ...

So I was wondering how I would make a new div for every response from the API so I can display their friends list? For every player there could be a different number of items returned from the API, depending on their friends list length, so I wasn't sure how I would go about doing this. Any help would be appreciated :)

Also if this question has been asked before, please link it because I wasn't sure how to word the google search to see if I could find something similar to my question.

(I'm using JavaScript/jQuery if that helps at all)

Answer 1

You could do this with a simple forEach and createElement . Iterate through the response, creating a new element for each friend and appending it to the body.

result.friendslist.friends.forEach(function(friend){
    var friendDiv = document.createElement('div');
    friendDiv.appendChild(document.createTextNode(friend.steamid));
    document.body.appendChild(friendDiv);
});

NB: You could make this more performant by doing only a single append to the body if you created a wrapper element and filled that with the friends before appending it. Like this:

var wrapperDiv = document.createElement('div');
result.friendslist.friends.forEach(function(friend){
    var friendDiv = document.createElement('div');
    friendDiv.appendChild(document.createTextNode(friend.steamid));
    wrapperDiv.appendChild(friendDiv);
});
document.body.appendChild(wrapperDiv);

PS. Please note that forEach is part of ES5 and thus, not available for IE8 . You could use a for loop in its place, or use a polyfill .

Answer 2

Here's a sample code to get you started. var json is your actual response.

 var json = "{\\r\\n \\"friendslist\\": {\\r\\n \\"friends\\": [\\r\\n {\\r\\n \\"steamid\\": \\"76561197960430929\\",\\r\\n \\"relationship\\": \\"friend\\",\\r\\n \\"friend_since\\": 1486338170\\r\\n },\\r\\n {\\r\\n \\"steamid\\": \\"76561197962297457\\",\\r\\n \\"relationship\\": \\"friend\\",\\r\\n \\"friend_since\\": 1485227275\\r\\n },\\r\\n {\\r\\n \\"steamid\\": \\"76561197977344631\\",\\r\\n \\"relationship\\": \\"friend\\",\\r\\n \\"friend_since\\": 1484606628\\r\\n }]\\r\\n }}"; data = JSON.parse(json); $.each(data.friendslist.friends, function(i,item){ $('body').append( '<div>SteamId: ' + item.steamid + ' | ' + item.friend_since + ' | ' + item.relationship + '</div>'); }); 

 div{ padding:10px; margin:1px; background:teal; color:white; font-family: Roboto,Arial, sans-serif; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 3

You can also do this with map function.

var friendList = {
    "friends": [
        {
            "steamid": "76561197960430929",
            "relationship": "friend",
            "friend_since": 1486338170
        },
        {
            "steamid": "76561197962297457",
            "relationship": "friend",
            "friend_since": 1485227275
        },
        {
            "steamid": "76561197977344631",
            "relationship": "friend",
            "friend_since": 1484606628
        }
    ] 
}
friendList.friends.map(function(key, value){
  // key will be the index of the array and value will be the item in the list  
   // create the div and append it to the parent element. 


})