Search code examples
javascriptvue.jsaxiosnuxt.jsstrapi

Format nested data JS


I'm creating a blog using Strapi and Nuxt. I get a json of my categories of this type from my front application using Axios. Each category has several articles with data :

{
    "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
        }
    }
}

I would like to create an object categories in my nuxt App from this data that would take this form:

{
  {
    "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"
                }
               ]
  }

}


How to manage that with this nested data ?


Solution

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