如何使用jquery在提要html中添加注释

Question

[
{
"id": 0,
"owner": {
"id": 0,
"email": "",
"username": "",
"profile": "",
"description": "",
"followers": 0,
"following": 0
},
"title": "",
"content": "",
"image_urls": [
"image_url1",
"image_url2",
"image_url3", ...
],
"liked_people": [
1,
2,
3, ...
],
"like_count": 0,
"comment_count": 0,
"view_count": 0,
"tag" : [
"tag1",
"tag2",
"tag3", ...
],
"created_at": "",
"comment_preview": [
{
"comment_id": 0,
"owner": {
"id": 0,
"email": "",
"username": "",
"profile": "",
"description": "",
"followers": 0,
"following": 0
},
"content": "",
"created_at": ""
}, ...
]
}, .....
]

这是api的提要和细节数据。

我正在开发SNS。

我得到了这些数据我想创建一个有2条评论的提要列表但评论可能存在，也可能不存在。

那么如何将这些注释附加到html中呢

以下是示例代码请添加注释html为.feedComment。

const getFeed = (id) => {
$.ajax({
url: `BASE_URL/feed/postList`,
type: 'GET',
success: function(res) {            
res.map(({id, owner, image_urls, title, content, tag, comment_preview}) => {  
$('.feedArea').append(`
<div class='feed'>
<div class='feedHead'>
<div class='postmanProfile'>
<img src= "${owner.image}">                     
</div>
<div class='postmanName'>
<div class= 'postmanNameText'>${owner.username}</div>
</div>                     
</div>
<div class='disuniteLine'>
<hr>
</div>
<div class="feedThumbanil">
<div class="thumbanilImg">
<a href="detailFeed.html?id=${id}">
<img class="ImgArea" src="${image_urls}" alt="">
</a>
</div>
</div>
<div class="disuniteLine">
<hr>
</div>
<div class='feedLike_And_Comment'>
<div class='LikeIconImg like-${id}' feedId="${id}">
</div>
<div class="CommentIconImg">
<img class="commentImg" src="/picture/Icon/chat-box.png" alt="#">
</div>
<div class="viewMoreArea">
<img class="view_more" src="/picture/Icon/more.png">
</div>
</div>
<div class='title'>
<h2>
${title}
</h2>
</div>
<div class='content'>
<span>
${content}
</span>
</div>
<div class='tag'>
<h4>
${tag}
</h4>
</div>
<div class="feedComment">
// What should I do?   
</div>
</div>
`);
})   
},
error : function(err){
console.log(err);
},
async: false    
})

}

我是有时间限制的生命。如果我不解决这个问题，我可能会死。

Answer 1

假设您的ajax可以工作，那么您基本上需要这个

<div class="feedComment">
${Object.keys(comment_preview[0].owner)
.map(key => (key+":"+comment_preview[0].owner[key]))
}
</div> 

const res = [{ "id": 0, "owner": { "id": 0, "email": "", "username": "", "profile": "", "description": "", "followers": 0, "following": 0 }, "title": "", "content": "", "image_urls": [ "image_url1", "image_url2", "image_url3" ], "liked_people": [ 1, 2, 3 ], "like_count": 0, "comment_count": 0, "view_count": 0, "tag": [ "tag1", "tag2", "tag3" ], "created_at": "", "comment_preview": [{ "comment_id": 0, "owner": { "id": 0, "email": "[e-mail]", "username": "User x ", "profile": "x profile", "description": "Desc", "followers": 0, "following": 0 }, "content": "Is this a feed comment?", "created_at": "" }] }] 

function format(res) {
res.forEach(({
id,
owner,
image_urls,
title,
content,
tag,
comment_preview
}) => {
$('.feedArea').append(`
<div class='feed'>
<div class='feedHead'>
<div class='postmanProfile'>
<img src= "${owner.image}">                     
</div>
<div class='postmanName'>
<div class= 'postmanNameText'>${owner.username}</div>
</div                     
</div>
<div class='disuniteLine'>
<hr>
</div>
<div class="feedThumbanil">
<div class="thumbanilImg">
<a href="detailFeed.html?id=${id}">
<img class="ImgArea" src="${image_urls}" alt="">
</a>
</div>
</div>
<div class="disuniteLine">
<hr>
</div>
<div class='feedLike_And_Comment'>
<div class='LikeIconImg like-${id}' feedId="${id}">
</div>
<div class="CommentIconImg">
<img class="commentImg" src="/picture/Icon/chat-box.png" alt="#">
</div>
<div class="viewMoreArea">
<img class="view_more" src="/picture/Icon/more.png">
</div>
</div>
<div class='title'>
<h2>
${title}
</h2>
</div>
<div class='content'>
<span>
${content}
</span>
</div>
<div class='tag'>
<h4>
${tag}
</h4>
</div>
<div class="feedComment">
${Object.keys(comment_preview[0].owner)   
.map(key => (key+":"+comment_preview[0].owner[key]))
}
</div> 
`);
})
}
format(res)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="feedArea"></div>