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)