Объединение двух разных вызовов Fetch с данными из Jsonplaceholder.com

Question

Я пытаюсь объединить или выполнить внутреннее объединение двух наборов данных, предоставленных https://jsonplaceholder.typicode.com/comments и https://jsonplaceholder.typicode.com/posts.Конечно, при объединении используются ключи PostId и id обоих наборов данных соответственно;Однако я не уверен, как на самом деле это сделать.Я добавил свой код: https://codepen.io/gabedesigns/pen/qMGgxY?editors=1111, и мне кажется, что я получаю сообщение о том, что мне не хватает «()» для моего конструктора.После выяснения этого мне также нужно будет искать посты с указанным идентификатором поста и комментариями, соответствующими посту.Возможно, мне нужно использовать вложенные циклы, чтобы эта работа работала?Я пытался найти какую-то другую информацию по этому поводу и, похоже, не мог найти много.Если есть какие-либо другие ресурсы, которые я мог пропустить, не стесняйтесь связать их ниже.Я уже видел пост, в котором уже говорилось о «внутренних соединениях» с использованием javascript вместо SQL, но здесь я столкнулся с некоторыми проблемами.Вот некоторый код:

function getResults() {

  const equijoin = (xs, ys, primary, foreign, sel) => {
   const ix = xs.reduce((ix, row) => ix.set(row[primary], row), new Map());
    return ys.map(row => sel(ix.get(row[foreign]), row));
  };

  const postData = fetch("https://jsonplaceholder.typicode.com/posts")
   .then(function(response) {
     return response.json();
  });

  const commentData = fetch("https://jsonplaceholder.typicode.com/comments")
   .then(function(response) {
    return response.json();
  });

  const result = equijoin(postData, commentData,"id", "postId", ({title, 
  body}, {name,body}) => ({title,body,name}));

}

Answer 1

Здесь было несколько проблем.Я думаю, что вы, возможно, сталкивались с асинхронной природой fetch, пытаясь передать обещание в функцию сортировки, а не ждать, пока оно разрешится, и объединить их в пакет Promise.all - один из способов справиться с этим.Также, как заметил кто-то в комментариях, вы используете деструктуризацию двух переменных с одинаковым именем, здесь два простых решения: не деструктурировать или использовать псевдоним.Надеюсь, это поможет

function getResults() {
const checkResult = res => res.ok ? res.json() : Promise.resolve({});
const joinMap = ({title, body:lbody}, {name,body:rbody}) => ({title,lbody, rbody,name});

const equiJoin = (xs, ys, primary, foreign, sel) => {
    const ix = xs.reduce(
      (ix, row) => ix.set(row[primary], row), new Map()
    );
    return ys.map(row => sel(ix.get(row[foreign]), row));
}
const posts = fetch("https://jsonplaceholder.typicode.com/posts")
  .then(checkResult);
  
const comments = fetch("https://jsonplaceholder.typicode.com/comments")
  .then(checkResult);

return Promise.all([posts, comments])
  .then(([postData, commentData]) => {
    const result = equiJoin(postData, commentData,"id", "postId", joinMap);
    console.log(result);
  })
  .catch(err => console.error(err));
}

button {
  background-color: white;
  color: black;
  border: 2px solid #555555;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

button:hover {
  background-color: #555555;
  color: white;
}

input {
  width: 20vw;
  height: 10vh;
  padding: 0.5%;
  border-radius: 4px;
  border: 1px solid black;
}

#results {
  position: absolute;
  border: 1px solid gray;
  height: 60vh;
  width: 60vw;
  left: 20vw;
  top: 10vw;
}

<input type="text" id="postIDinput" placeholder="Post ID" required="true"></input>
<button type="submit" onclick="getResults()">Submit</button>

<div id="results"></div>