Как объединить данные из двух массивов по id?

Question

[MaksN9]

Нужно вывести информацию из https://jsonplaceholder.typicode.com/posts (title, body) и из https://jsonplaceholder.typicode.com/users (name). Я так понял, нужно их объединить по id. Как это сделать?

Вот мой код, но я здесь могу только вывести title и body:

import React, { useEffect, useState } from 'react'
import axios from 'axios' 

function Feed() {
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios.get (
                "https://jsonplaceholder.typicode.com/posts",
            );

            setPosts(result.data);
        };
        
        fetchData();
    }, []);
        return (
               <div className='container'>
                    <div className='user-cards'>
                        {posts && 
                            posts.map(post => (
                                <div className='user-card'>
                                    <p>{post.title}</p>
                                    <p>{post.body}</p>
                                </div>
                            ))}
                    </div>
                </div>
   )
}

export {Feed}

Comments

[Александр]

https://jsonplaceholder.typicode.com/posts?userId=USER_ID

Answer 1

[0xD34F]

const getData = type => fetch(`https://jsonplaceholder.typicode.com/${type}`).then(r => r.json());

const [ data, setData ] = useState([]);

useEffect(() => {
  Promise
    .all([ 'posts', 'users' ].map(getData))
    .then(([ posts, users ]) => {
      const usersObj = Object.fromEntries(users.map(n => [ n.id, n ]));
      setData(posts.map(n => ({
        post: n,
        user: usersObj[n.userId],
      })));
    });
}, []);

return (
  <div>
    {data.map(({ post, user }) => (
      <div>
        <h2>{post.title}</h2>
        <h3>{user.name}</h3>
        <p>{post.body}</p>
      </div>
    ))}
  </div>
);

Comments

[MaksN9]

Спасибо, все работает)