javascript - 如何将两个数组JSON映射到vue中的数据
问题描述
我的 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 中的 description(string),Review 数组中用户数组中的 name(string) 和 firstname(string),以便在 vue 页面中显示
解决方案
我已经帮助您进行了一些更改并使其正常工作,请检查一下。
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
};
});
问我是否有任何问题。
推荐阅读
- c++ - SDL_Init_Everything 在 C 中失败
- networkx - OSMNX/networkx 投影断开节点
- vba - 以不同的设置时间间隔运行多个宏 vba 通过按钮开始 - 按钮停止
- ios - iOS:仪器挂起模拟器的应用程序启动模板
- shell - 使用带数字后缀的 awk 将大文件拆分为较小的文件
- webpack - 如何在没有端口的情况下在 localhost 上运行 webpack-dev-server
- coq - 引入假设然后立即对其执行另一种策略的策略
- reactjs - NextJs与动态路由——空参数场景如何处理?
- android - 无法在片段 [Android] 中将项目添加到我的 ListView
- javascript - 在 vuejs 中使用带有 forEach 的道具