格式化嵌套数据 JS

Question

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

}

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

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

Answer 2

你可以使用地图

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

格式化嵌套数据 JS

Format nested data JS

javascript

vue.js

strapi

axios

nuxt.js