I need to send multiple ajax requests and compare data using jQuery. This code works, but too slow. How to optimize it?

1 
var user, post, image, comment;

$.when(
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts",
    success: function(postData) {
      post = postData;
    },
  }),
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/comments",
    success: function(commentData) {
      comment = commentData;
    },
  }),
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/users",
    success: function(userData) {
      user = userData;
    },
  }),
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/photos",
    success: function(imageData) {
      image = imageData;
    },
  }),
).then(function() {
  $.each(post, function(index, postItem) {
    $.each(comment, function(index, commentItem) {
      $.each(user, function(index, userItem) {
        $.each(image, function(index, imageItem) {
          if (
            postItem.id == commentItem.postId &&
            postItem.id == imageItem.id &&
            postItem.userId == userItem.id
          ) {
            console.log(
              "post title: " +
                postItem.title + 
                " Post image: " +
                imageItem.url +
                " Author: " +
                userItem.name +
                " Comment: " +
                commentItem.body
            );
          }
        });
      });
    });
  });
});
2

So if I’m getting this right, you want:

  1. for every user
  2. get their posts
  3. and for each of those posts
  4. get the comments attached to them
  5. and for every comment, log user name, post title and comment body

You’re getting everything from the API, so yeah, it won’t be super quick; solution is to get less stuff

Note that unless I’m missing something, the images are in albums unconnected to the posts, I don’t see how the two can be connected (they belong to a user, but not a post??)

Something like this anyway – sorry, this isn’t tested, and I have forgotten most of the ajax-related jQuery API as haven’t used it for years (I thought when was deprecated years ago?? but anyway).

async function logTheThings () {
  const users = await $.get("https://jsonplaceholder.typicode.com/users");

  for await (const user of users) {
     const userPosts = await $.get(`https://jsonplaceholder.typicode.com/posts?userId=${user.id}`);
     const postComments = await $.get(`https://jsonplaceholder.typicode.com/posts/${post.id}/comments`);

     for (const comment of postComments) {
       console.log(`Post title: ${userPost.title}, Author: ${user.name}, Comment: ${comment.body}`);
     }
  }
}

You’re literally getting everything from the API, so this may be completely pointless: just get everything first then filter is probably faster

async function logThe Things() {
  const users = await $.get("https://jsonplaceholder.typicode.com/users");
  const posts = await $.get("https://jsonplaceholder.typicode.com/posts");
  const comments = await $.get("https://jsonplaceholder.typicode.com/comments");

  // loop over them here and log
}
3