[Vuejs]-Format nested data JS

by

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)

1👍

you can use map

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

Leave a comment