Как сопоставить два массива JSON с данными в vue

#javascript #arrays #laravel #vue.js

#javascript #массивы #laravel #vue.js

Вопрос:

У меня есть данные JSON, которые содержат два разных массива на одном листе. Я хочу показать страницу каждой организации, тогда на каждой странице будут все комментарии от пользователя, который выбирает комментарий к этой организации.

 {
ListOrg: {
id: 1613,
name_org: "US company",
rating: 0,
},
Review: [
{
review_id: 3,
org_id: 1613,
user_id: 2,
description: "Very good",
rating: 3,
user: {
id: 2,
  name: "Kunjanaphorn",
  firstname: "Kunjanaphorn",
  lastname: "Boonmak",
  admin: 0,
  email: "Pim@gmail.com",
}
},
{
review_id: 4,
org_id: 1613,
user_id: 3,
description: "Not bad",
rating: 5,
user: {
  id: 3,
  name: "Kan",
  firstname: "Kan",
  lastname: "Tippayamontree",
  admin: 0,
  email: "First@gmail.com",
}
}
]
}
  

Но я не могу сопоставить это с данными в vue.js . Я пробую это решение, но оно не работает.

   data() {
    return {
      Listorgs: [],
      Reviews: [],
      Listorg: {
        name_org: "",
        picture: "",
        headerpic: "",
        description: ""
      }

  mounted() {
    axios.get("/api/listorgs/"   this.id).then(response => {
      var listorg = response.data;
      this.Reviews = listorg.Review;
      this.Listorgs = listorg.Listorg;
    });
  }
  

Можете ли вы рассказать мне о синтаксисе

Мне нужен некоторый атрибут в каждом массиве -> name_org (строка) из массива ListOrg, описание (строка) из обзора массива, имя (строка) и firstname (строка) из пользовательского массива в обзоре массива для отображения на странице vue

введите описание изображения здесь

Комментарии:

1. Какие результаты вы получаете сейчас и какого рода вы ожидаете?

2. Я хочу некоторый атрибут в каждом массиве -> name_org (строка) из массива ListOrg, описание (строка) из обзора массива, имя (строка) и firstname (строка) из пользовательского массива в обзоре массива

3. Пожалуйста, добавьте свой шаблон. Я думаю, вы можете добавить это с помощью v-for директивы. Отобразите поля, которые вам нужно отобразить.

4. @varit05 Я пытаюсь проверить с помощью console.log(ListOrgs.length); но он показывает 0

5. ListOrgs является объектом, а у объекта нет length свойства. Какие поля вы хотите отобразить в пользовательском интерфейсе?

Ответ №1:

Я помог вам немного изменить и заставил это работать, проверьте это.

https://jsfiddle.net/fLvy3am9/

   var listorg = response.data;
  this.orgData = listorg.ListOrg;
  this.reviews = listorg.Review.map((review) => {
    return {
      name_org: listorg.ListOrg.name_org,
      description: review.description,
      user: review.user
  };
  });
  

Спросите меня, есть ли какие-либо вопросы.

Комментарии:

1. Спасибо, это работает, но если я получу данные JSON с помощью Axios. Можете ли вы рассказать мне о синтаксисе при получении response.data

2. Обычно я бы использовал .then({ data } => для разрушения атрибута данных из ответа. Затем получите доступ к ListOrg, используя данные. ListOrg