格式化嵌套数据JS答案

【问题标题】：Format nested data JS格式化嵌套数据JS
【发布时间】：2022-01-07 14:08:38
【问题描述】：

我正在使用 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"
                }
               ]
  }

}

如何使用这些嵌套数据进行管理？

【问题讨论】：

myarray.data.forEach((val, index)=>{/*re-build new array from new values given*/});
我认为你没有尝试使用任何循环

标签： javascript vue.js axios nuxt.js strapi

【解决方案1】：

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)

【讨论】：

谢谢这几乎是我想要的，但为什么标题和 createdAt 字段未定义？
只需要使用item.attributes.title 而不是item.title。 createdAt 也一样。再次检查
文章看起来没问题： item.attributes.articles.data.map((item) => { return { title: item.attributes.title, createdAt: item.attributes.createdAt, } ; }),

【解决方案2】：

你可以使用地图

const result = raw.data.map(element =>  { return {name: element.attributes.name, articles: element.attributes.articles}})

【讨论】：