Question

我有代表帖子和评论的Json Curl数据，我已经成功检索并一个接一个地显示它们。以下是检索帖子和评论的代码

function loadPost(){
    $.post(
        'post.json',
        function(response){
            $.each(JSON.parse(response).items, function(i,v){  
                $('.info').append('<li><div class="msg-lhs"><span>'+v.post_id+'</span> <span>'+v.courses+'</span> </div></li>');
            });
        }
   );

   function loadComment(){
       $.post(
           'comment.json',
           function(response){
               $.each(JSON.parse(response).items, function(i,v){  
                   $('.info').append('<li><div class="msg-lhs"><span>'+v.post_id+'</span> <span>'+v.comment+'</span> </div></li>');
               });
           }
       );

下面的

是发布和评论的Json格式输出

{"items":[{"post_id":"101","courses":"physics"},
{"post_id":"102","courses":"Biology"},
{"post_id":"103","courses":"Chemistry"},
{"post_id":"104","courses":"Geophysics"},
{"post_id":"105","courses":"GeoChemistry"}]}



{"items":[{"post_id":"101","comment":"This  physcis is cool"},
{"post_id":"101","comment":"love this course on physics"},
{"post_id":"102","comment":"Biology is the scientific study of living things"},
{"post_id":"103","comment":"chemistry is good"},
{"post_id":"103","comment":"chemistry is the study of matter and compounds etc"}]}

现在我的问题是如何在具有相同post_id的帖子下直接添加评论在javascript中显示json内容时有人可以帮我解决这个问题吗。

由于

Answer 1

在loadPost（）响应绑定完成后调用loadComment方法
将postid提供给div
在loadComment中找到div并将注释绑定到div。

function loadPost(){
    $.post(
        'post.json',
        function(response){
            $.each(JSON.parse(response).items, function(i,v){  
                $('.info').append('<li><div class="msg-lhs" id="'+v.post_id+'"><span>'+v.post_id+'</span> <span>'+v.courses+'</span> </div></li>');
            });
            loadComment();
        }
   );

   function loadComment(){
       $.post(
           'comment.json',
           function(response){
               $.each(JSON.parse(response).items, function(i,v){  
                   $('.info').find("#"+v.post_id).append('<span>'+v.comment+'</span>');
               });
           }
       );

Answer 2

尝试将帖子和评论合并到一个数据集中，然后再将它们附加到列表元素。

以下是不使用jQuery的示例，但jQuery具有类似filter，map和extend的方法。我相信你会明白这一点。

＆＃13;

var posts = '{"items":[{"post_id":"101","courses":"physics"},{"post_id":"102","courses":"Biology"},{"post_id":"103","courses":"Chemistry"},{"post_id":"104","courses":"Geophysics"},{"post_id":"105","courses":"GeoChemistry"}]}';
var comments = '{"items":[{"post_id":"101","comment":"This  physcis is cool"},{"post_id":"101","comment":"love this course on physics"},{"post_id":"102","comment":"Biology is the scientific study of living things"},{"post_id":"103","comment":"chemistry is good"},{"post_id":"103","comment":"chemistry is the study of matter and compounds etc"}]}';

var list = document.getElementById('info')
// assuming that you have your posts and comments json data
var comments = JSON.parse( comments ).items;
var posts = JSON.parse( posts ).items;

// check if a post has comments
var postHasComments = ( comments, post ) => comments
  .some( comment => comment.post_id === post.post_id )

// get comments for specifig post
var getComments = ( comments, post ) => comments
  .filter( comment => comment.post_id === post.post_id )
  .map( comment => `<span>${ comment.comment }</span>` )

// combine posts with comments
posts.map( post => ( Object.assign( {}, { post_id, courses } = post,
    { comments: ( postHasComments( comments, post ) ) ? getComments( comments, post ) : [] } ) )
)
// append posts with their comments to list
.forEach( item => { list.innerHTML += `
<li>
  <div class="msg-lhs" id="${ item.post_id }">
    <span>${ item.post_id }</span>
    <span>${ item.courses }</span>
    ${ ( item.comments.length ) ? `<br />${ item.comments.join('<br />') }` : '' }
  </div>
</li>`
})

＆＃13;

<ul id="info"></ul>

＆＃13;

如何在javascript中一起添加两个json数据

2 个答案: