How do I filter a json file to match with another json's id?

Question

I have a blog, and this is the second page, you can get here with a link from the first page. That is why I used the URLSearchParams. Now, from the the first JSON, I get the posts. For every post there is a number of comments that you can get by the ID. I have to show for every post the already existing comments. There is 100 posts and 500 comments. Here is my code :

    $(function () {
 
      $.ajax({
        type: "GET",
        url: "https://jsonplaceholder.typicode.com/posts",
        dataType: 'json',
        success: function (result) {
          var params = new window.URLSearchParams(window.location.search);//getting the post ID
          var postId = params.get('post');
          var postObj = result.filter(function (postElm) {
            return postId == postElm.id; //comparing the 2 IDs

          });

          if (postObj.length < 1) {
            alert('post not found');
            return;

          }
          renderPage(postObj[0]);

          function renderPage(post) {
            $("#loop").append(
              "<div  class='card bg-success text-white'>User ID:" + post.userId +
              "<div class='card-header'>ID:" + post.id + "</div>" +
              "<div class='card-body'>" +
              "<a post=" + post.id + "'><h5 class='card-title'>" + post.title + "</h5></a>" +
              "<p class='card-text'>" + post.body + "</p>" + "</div>" +
              "</div>");
          }

          $.getJSON('https://jsonplaceholder.typicode.com/comments', function (data) {
            data.forEach(comments => {

              // var comObj = data.filter(function (comElm) {
              //   return comElm.id == postElm.id;
              // });

              $("#comm").append(
                `<div class='card bg-secondary text-white'>
                postId: ${comments.postId}
                <h6 class="card-header ">ID: ${comments.id}
                <div class="caard-body">Name: ${comments.name}
                <p class="email">Email: ${comments.email}</p>
                <p class="form-control comment-text text-white">Body: ${comments.body}</p>
              </div>`
              );
            });
          });

        }

      });



    });

I tried to filter them, but it won't work because they are not in the same AJAX, I guess.

Answer 1

I did it, here is my code:

$(function() {
  $.getJSON('https://jsonplaceholder.typicode.com/posts', function(result) {
    var params = new window.URLSearchParams(window.location.search);
    var postId = params.get('post');
    var postObj = result.filter(function(postElm) {
      return postId == postElm.id;
    });
    if (postObj.length < 1) {
      alert('post not found');
      return;
    }
    console.log(postId);
    getsComments(postId);
    renderPage(postObj[0]);

    function getsComments(postId) {
      $.getJSON('https://jsonplaceholder.typicode.com/comments', function(data) {
        var commments = data.filter(function(comElm) {
          return comElm.postId == postId;
        });
        commments.forEach(comments => {
          $("#comm").append(`<div class='card bg-secondary text-white'>
                    postId: ${comments.postId}
                    <h6 class="card-header ">ID: ${comments.id}
                    <div class="caard-body">Name: ${comments.name}
                    <p class="email">Email: ${comments.email}</p>
                    <p class="form-control comment-text text-white">Body: ${comments.body}</p>
                  </div>`);
        });
      });
    }

    function renderPage(post) {
      $("#loop").append("<div  class='card bg-success text-white'>User ID:" + post.userId + "<div class='card-header'>ID:" + post.id + "</div>" + "<div class='card-body'>" + "<a post=" + post.id + "'><h5 class='card-title'>" + post.title + "</h5></a>" + "<p class='card-text'>" + post.body + "</p>" + "</div>" + "</div>");
    }
  });
});