[英]How to make a new div for every response from JSON API in JavaScript?
(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. 我有一个API,可返回玩家朋友列表。 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? 所以我想知道如何为API的每个响应创建一个新的div,以便显示他们的朋友列表? 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. 对于每个玩家,API可能会返回不同数量的项目,具体取决于他们的朋友列表长度,因此我不确定该怎么做。 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. 另外,如果以前曾问过这个问题,请链接它,因为我不确定如何在Google搜索中写词,以查看是否可以找到与我的问题类似的东西。
(I'm using JavaScript/jQuery if that helps at all) (如果有帮助,我正在使用JavaScript / jQuery)
You could do this with a simple forEach
and createElement
. 您可以使用简单的forEach
和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. 注意:如果创建了wrapper元素,并在添加朋友之前将其填充了朋友,则可以只对主体执行一次附加操作,从而提高性能。 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. PS。 Please note that forEach
is part of ES5 and thus, not available for IE8 . 请注意, forEach
是ES5的一部分,因此不适用于IE8 。 You could use a for
loop in its place, or use a polyfill . 您可以在其中使用for
循环,也可以使用polyfill 。
Here's a sample code to get you started. 这是一个示例代码,可以帮助您入门。 var json
is your actual response. var json
是您的实际响应。
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>
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.
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.