javascript - 如何将两个数组JSON映射到vue中的数据

Question

我的 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;
    });
  }

你能告诉我语法吗

我想要每个数组中的一些属性 -> 来自数组 ListOrg 的 name_org(string)、来自数组 Review 的描述(string)、来自 Review 数组中的用户数组的 name(string) 和 firstname(string) 以便在 vue 页面中显示

Answer 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
  };
  });

有什么问题就问我。