Как отобразить связанные данные из двух массивов во Vue?

Question

[postya]

Делаю запросы через axios и получаю два массива
Users, Posts
Users
Posts

Но данные этих массивов связаны по userId
Мне на странице нужно отобразить все записи из массивов. Название, текст и имя автора
Нащвание(title) и текст(body) берётся из массива posts
Имя автора(name) берётся из массива users

Как можно связать эти массивы и отобразить их данные?

Вот что есть на данный момент:

<b-container fluid="lg" class="mt-lg-5">
            <b-row class="d-flex justify-content-center">
                <b-col sm="4" v-for="(post) in posts" :key="post.id">
                    <b-card class="text-left mb-4">
                        <b-card-text class="text-primary font-weight-bolder">
                            {{post.title}}
                        </b-card-text>

                        <b-card-text>
                            {{post.body}}
                        </b-card-text>

                        <b-card-text class="mt-5 font-weight-bold text-black-50">
                            author
                        </b-card-text>
                    </b-card>
                </b-col>
            </b-row>
        </b-container>

Script:

created() {
      this.getAllPosts();
      this.getAllUsers();
    },
    methods: {
      async getAllPosts() {
        await axios.get('http://jsonplaceholder.typicode.com/posts')
          .then(response => {
            this.posts = response.data
          })
          .catch(error => {
            console.log(error)
          })
      },
      async getAllUsers() {
        await axios.get('http://jsonplaceholder.typicode.com/users')
          .then(response => {
            this.users = response.data
            console.log(this.users)
          })
          .catch(error => {
            console.log(error)
          })
      },
    }

Comments

[0xD34F]

было

[postya]

0xD34F, Спасибо! в том посте первый ваш ответ помог)

Answer 1

[Дмитрий Гололобов]

Ну в идеале. Вы могли бы и из базы данных теоретически получать посты, сразу с указанием автора например.
Ну да ладно.Тут вариантов несколько.
Вы можете при получении пользователей подправить массив this.posts:

async getAllUsers() {
        const { data: users } = await axios.get('http://jsonplaceholder.typicode.com/users')
         this.posts = this.posts.map(p => {
                p.author = users.find(u => u.id === p.userId)
                return p
          })
      },

Вариант номер два - сделать тоже самое, но уже в computed-секции и вывести результат в шаблон.

Comments

[postya]

у меня нет никакой базы данных, мне нужно работать с текущими api через axios, то есть как-то мерджить два массива и выводить связанные данные

[Дмитрий Гололобов]

postya, ну я вам и написал как можно обработать массив posts при получении массива users
там конечно нужно уже более детально смотреть на структуру объектов в массиве, чтобы более точное решение написать.

[postya]

Дмитрий Гололобов, ошибка 'Can't read property data of undefined'

async getAllUsers() {
        const {data: users} = await axios.get('http://jsonplaceholder.typicode.com/users')
          .then(()=> {
            this.posts = this.posts.map(p => {
              p.author = users.find(u => u.id === p.userId)
              return p
            })
            console.log(this.users)
          })
          .catch(error => {
            console.log(error)
          })
      },

[Дмитрий Гололобов]

postya, а зачем же ты then и catch добавляешь? Я же не так написал код.
Если тебе нужна обработка ошибок то можно сделать так:

async getAllUsers() {
	try {
		const { data: users } = await axios.get('http://jsonplaceholder.typicode.com/users')
		this.posts = this.posts.map(p => {
			p.author = users.find(u => u.id === p.userId)
			return p
		})
	} catch (e) {
		console.log(e)
	}
}

Если не сработает так, то вот немного измененный вариант:

async getAllUsers() {
    try {
      const result = await axios.get('http://jsonplaceholder.typicode.com/users')
      this.posts = this.posts.map(p => {
        p.author = result.data.find(u => u.id === p.userId)
        return p
      })
    } catch (e) {
      console.log(e)
    }
  }