我正在使用 Strapi 和 Nuxt 創建一個博客。我使用 Axios 從我的前端應用程式中獲取了我的此類類別的 json。每個類別都有幾篇帶有資料的文章：
{
"data": [
{
"id": 1,
"attributes": {
"createdAt": "2022-01-06T17:43:01.152Z",
"updatedAt": "2022-01-06T17:43:03.326Z",
"publishedAt": "2022-01-06T17:43:03.323Z",
"name": "Législation",
"articles": {
"data": [
{
"id": 2,
"attributes": {
"title": "Décrets",
"createdAt": "2022-01-06T18:52:24.828Z",
"updatedAt": "2022-01-06T20:48:29.434Z",
"publishedAt": "2022-01-06T18:52:26.644Z"
}
},
{
"id": 1,
"attributes": {
"title": "Lois",
"createdAt": "2022-01-06T18:52:03.115Z",
"updatedAt": "2022-01-06T20:48:38.850Z",
"publishedAt": "2022-01-06T18:52:09.058Z"
}
}
]
}
}
},
{
"id": 2,
"attributes": {
"createdAt": "2022-01-06T17:43:53.562Z",
"updatedAt": "2022-01-06T17:43:55.735Z",
"publishedAt": "2022-01-06T17:43:55.733Z",
"name": "Militaires",
"articles": {
"data": [
{
"id": 3,
"attributes": {
"title": "Base de données",
"createdAt": "2022-01-06T19:07:51.206Z",
"updatedAt": "2022-01-06T20:48:07.248Z",
"publishedAt": "2022-01-06T19:07:53.737Z"
}
}
]
}
}
},
{
"id": 3,
"attributes": {
"createdAt": "2022-01-06T17:44:06.082Z",
"updatedAt": "2022-01-06T17:44:06.568Z",
"publishedAt": "2022-01-06T17:44:06.567Z",
"name": "Régiments",
"articles": {
"data": []
}
}
},
{
"id": 4,
"attributes": {
"createdAt": "2022-01-06T17:45:04.262Z",
"updatedAt": "2022-01-06T17:45:05.226Z",
"publishedAt": "2022-01-06T17:45:05.223Z",
"name": "Vie militaire",
"articles": {
"data": []
}
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 4
}
}
}
我想根據這些資料在我的 nuxt 應用程式中創建一個物件類別，該資料將采用以下形式：
{
{
"name": "Législation",
"article": [
{
"title": "Lois",
"createdAt": "2022-01-06T18:52:24.828Z"
},
{
"title": "Décrets",
"createdAt": "2022-01-06T18:52:03.115Z"
}
]
},
{
"name": "Militaires",
"article": [
{
"title": "Base de données",
"createdAt": "2022-01-06T19:07:51.206Z"
}
]
}
}
如何使用此嵌套資料進行管理？
uj5u.com熱心網友回復：
const raw = {
"data": [
{
"id": 1,
"attributes": {
"createdAt": "2022-01-06T17:43:01.152Z",
"updatedAt": "2022-01-06T17:43:03.326Z",
"publishedAt": "2022-01-06T17:43:03.323Z",
"name": "Législation",
"articles": {
"data": [
{
"id": 2,
"attributes": {
"title": "Décrets",
"createdAt": "2022-01-06T18:52:24.828Z",
"updatedAt": "2022-01-06T20:48:29.434Z",
"publishedAt": "2022-01-06T18:52:26.644Z"
}
},
{
"id": 1,
"attributes": {
"title": "Lois",
"createdAt": "2022-01-06T18:52:03.115Z",
"updatedAt": "2022-01-06T20:48:38.850Z",
"publishedAt": "2022-01-06T18:52:09.058Z"
}
}
]
}
}
},
{
"id": 2,
"attributes": {
"createdAt": "2022-01-06T17:43:53.562Z",
"updatedAt": "2022-01-06T17:43:55.735Z",
"publishedAt": "2022-01-06T17:43:55.733Z",
"name": "Militaires",
"articles": {
"data": [
{
"id": 3,
"attributes": {
"title": "Base de données",
"createdAt": "2022-01-06T19:07:51.206Z",
"updatedAt": "2022-01-06T20:48:07.248Z",
"publishedAt": "2022-01-06T19:07:53.737Z"
}
}
]
}
}
},
{
"id": 3,
"attributes": {
"createdAt": "2022-01-06T17:44:06.082Z",
"updatedAt": "2022-01-06T17:44:06.568Z",
"publishedAt": "2022-01-06T17:44:06.567Z",
"name": "Régiments",
"articles": {
"data": []
}
}
},
{
"id": 4,
"attributes": {
"createdAt": "2022-01-06T17:45:04.262Z",
"updatedAt": "2022-01-06T17:45:05.226Z",
"publishedAt": "2022-01-06T17:45:05.223Z",
"name": "Vie militaire",
"articles": {
"data": []
}
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 4
}
}
}
const formatted = []
raw.data.forEach(item => {
if(item.attributes.articles.data.length) {
formatted.push({
name: item.attributes.name,
articles: item.attributes.articles.data.map(item => {
return {
title: item.attributes.title,
createdAt: item.attributes.createdAt
}
})
})
}
})
console.log(formatted)uj5u.com熱心網友回復：
你可以使用地圖
const result = raw.data.map(element => { return {name: element.attributes.name, articles: element.attributes.articles}})
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/406892.html
標籤：
上一篇：如何在Vue3中使用FunctionDirective？
下一篇：自定義多選和單選問題