如何爲來自JavaScript中的JSON API的每個響應創建一個新的div？

（很抱歉，如果標題沒有任何意義，我不知道如何字呢。）如何爲來自JavaScript中的JSON API的每個響應創建一個新的div？

我有一個返回一個玩家的好友列表的API。它結束了看起來像這樣：

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

所以我想知道我怎麼會做出一個新的div從API每個響應，所以我可以施展的好友列表？對於每個玩家來說，根據他們的朋友列表長度，可能會有不同數量的從API返回的項目，所以我不確定如何去做這件事。任何幫助，將不勝感激:)

此外，如果此問題之前已詢問，請鏈接它，因爲我不知道如何在谷歌搜索詞，看看我能否找到類似於我的問題。

（我使用JavaScript/jQuery的有沒有什麼幫助的話）

來源

2017-03-01 Connor S

你會在'result.friendslist.friends'的每次迭代中創建一個新div。 –

你如何獲得所有玩家？你是否點擊了朋友列表請求，或者是否反覆遍歷所有玩家... – Miro

@JaromandaX那麼，我將如何循環訪問'result.friendslist.friends'來查找每個迭代？ –

你可以用一個簡單的forEach和createElement做到這一點。迭代響應，爲每個朋友創建一個新元素並將其添加到主體。

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

注：如果您創建了一個包裝元素，並填補了追加它與朋友之前，你可以讓這個更好的性能做只有一個追加到身體。像這樣：

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。請注意，forEach是ES5的一部分，因此，not available for IE8。您可以使用for環路，或使用polyfill。

來源

2017-03-01 00:49:56 haxxxton

所以我有一個div，我打算把所有其他的div與id'friends-body'放在一起，所以如果我想用forEach循環創建的div來填充它，我會只替換'var wrapperDiv = document.createElement（'div'）;'帶'var wrapperDiv = document.getElementById（'friends-body'）'？ –

沒關係，我試過了，那工作。謝謝您的幫助！ :) –

下面是一個示例代碼，以幫助您入門。是你的實際答覆。

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>

來源

2017-03-01 00:57:39 Miro

您還可以使用地圖功能做到這一點。

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. 


})

來源

2017-03-12 16:55:20

如何爲來自JavaScript中的JSON API的每個響應創建一個新的div？

回答

相關問題