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

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

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

这里是一个没有使用 jQuery 的例子，但是 jQuery 有类似的方法，如 filter、map 和 extend。我相信您会明白的。

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>`
})

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