将复杂JSON响应格式化为简单对象

Question

我正在尝试格式化Strapi返回的复杂响应数据，以获得一个简单的对象，我可以传递给我的UI。

GET请求指向以下端点:http://localhost:1337/api/projects?fields=title&populate=images

输出JSON响应如下:

{
"data": [
{
"id": 4,
"attributes": {
"title": "Github Finder",
"slug": "github-finder",
"images": {
"data": [
{
"id": 29,
"attributes": {
"name": "Github-Finder.png",
"alternativeText": "Github-Finder.png",
"caption": "Github-Finder.png",
"width": 1349,
"height": 667,
"formats": {
"thumbnail": {
"name": "thumbnail_Github-Finder.png",
"hash": "thumbnail_Github_Finder_aa83f118aa",
"ext": ".png",
"mime": "image/png",
"path": null,
"width": 245,
"height": 121,
"size": 13.27,
"url": "/uploads/thumbnail_Github_Finder_aa83f118aa.png"
},
"large": {
"name": "large_Github-Finder.png",
"hash": "large_Github_Finder_aa83f118aa",
"ext": ".png",
"mime": "image/png",
"path": null,
"width": 1000,
"height": 494,
"size": 102.14,
"url": "/uploads/large_Github_Finder_aa83f118aa.png"
},
"medium": {
"name": "medium_Github-Finder.png",
"hash": "medium_Github_Finder_aa83f118aa",
"ext": ".png",
"mime": "image/png",
"path": null,
"width": 750,
"height": 371,
"size": 67.79,
"url": "/uploads/medium_Github_Finder_aa83f118aa.png"
},
"small": {
"name": "small_Github-Finder.png",
"hash": "small_Github_Finder_aa83f118aa",
"ext": ".png",
"mime": "image/png",
"path": null,
"width": 500,
"height": 247,
"size": 37.82,
"url": "/uploads/small_Github_Finder_aa83f118aa.png"
}
},
"hash": "Github_Finder_aa83f118aa",
"ext": ".png",
"mime": "image/png",
"size": 30.37,
"url": "/uploads/Github_Finder_aa83f118aa.png",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2022-05-03T05:33:46.174Z",
"updatedAt": "2022-05-03T05:33:46.174Z"
}
},
{
"id": 30,
"attributes": {
"name": "github-finder-desktop.png",
"alternativeText": "github-finder-desktop.png",
"caption": "github-finder-desktop.png",
"width": 1365,
"height": 777,
"formats": {
"thumbnail": {
"name": "thumbnail_github-finder-desktop.png",
"hash": "thumbnail_github_finder_desktop_8035dfa269",
"ext": ".png",
"mime": "image/png",
"path": null,
"width": 245,
"height": 140,
"size": 14.03,
"url": "/uploads/thumbnail_github_finder_desktop_8035dfa269.png"
},
"large": {
"name": "large_github-finder-desktop.png",
"hash": "large_github_finder_desktop_8035dfa269",
"ext": ".png",
"mime": "image/png",
"path": null,
"width": 1000,
"height": 569,
"size": 110.61,
"url": "/uploads/large_github_finder_desktop_8035dfa269.png"
},
"medium": {
"name": "medium_github-finder-desktop.png",
"hash": "medium_github_finder_desktop_8035dfa269",
"ext": ".png",
"mime": "image/png",
"path": null,
"width": 750,
"height": 427,
"size": 71.56,
"url": "/uploads/medium_github_finder_desktop_8035dfa269.png"
},
"small": {
"name": "small_github-finder-desktop.png",
"hash": "small_github_finder_desktop_8035dfa269",
"ext": ".png",
"mime": "image/png",
"path": null,
"width": 500,
"height": 285,
"size": 40.35,
"url": "/uploads/small_github_finder_desktop_8035dfa269.png"
}
},
"hash": "github_finder_desktop_8035dfa269",
"ext": ".png",
"mime": "image/png",
"size": 40.05,
"url": "/uploads/github_finder_desktop_8035dfa269.png",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2022-05-03T05:33:46.720Z",
"updatedAt": "2022-05-03T05:33:46.720Z"
}
},
{
"id": 31,
"attributes": {
"name": "github-finder-mobile.png",
"alternativeText": "github-finder-mobile.png",
"caption": "github-finder-mobile.png",
"width": 1079,
"height": 1919,
"formats": {
"thumbnail": {
"name": "thumbnail_github-finder-mobile.png",
"hash": "thumbnail_github_finder_mobile_1c2d812829",
"ext": ".png",
"mime": "image/png",
"path": null,
"width": 88,
"height": 156,
"size": 9.97,
"url": "/uploads/thumbnail_github_finder_mobile_1c2d812829.png"
},
"large": {
"name": "large_github-finder-mobile.png",
"hash": "large_github_finder_mobile_1c2d812829",
"ext": ".png",
"mime": "image/png",
"path": null,
"width": 562,
"height": 1000,
"size": 149.01,
"url": "/uploads/large_github_finder_mobile_1c2d812829.png"
},
"medium": {
"name": "medium_github-finder-mobile.png",
"hash": "medium_github_finder_mobile_1c2d812829",
"ext": ".png",
"mime": "image/png",
"path": null,
"width": 422,
"height": 750,
"size": 98.34,
"url": "/uploads/medium_github_finder_mobile_1c2d812829.png"
},
"small": {
"name": "small_github-finder-mobile.png",
"hash": "small_github_finder_mobile_1c2d812829",
"ext": ".png",
"mime": "image/png",
"path": null,
"width": 281,
"height": 500,
"size": 53.63,
"url": "/uploads/small_github_finder_mobile_1c2d812829.png"
}
},
"hash": "github_finder_mobile_1c2d812829",
"ext": ".png",
"mime": "image/png",
"size": 69.72,
"url": "/uploads/github_finder_mobile_1c2d812829.png",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2022-05-03T05:33:46.911Z",
"updatedAt": "2022-05-03T05:33:46.911Z"
}
}
]
}
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 1
}
}
}

我想要的输出如下:

{
title: "Github finder",
slug: "github-finder",
images: {
thumbnailUrl:"/uploads/thumbnail_Github_Finder_aa83f118aa.png",
largeImgUrl:"/uploads/large_Github_Finder_aa83f118aa.png",
mediumImgUrl:"/uploads/medium_Github_Finder_aa83f118aa.png"
smallImgUrl:"/uploads/small_Github_Finder_aa83f118aa.png"
},

}

即使这种格式的输出也可以是合适的

{
title: "Github finder",
slug: "github-finder",
images: {
image1:{
thumbnailUrl:"/uploads/thumbnail_Github_Finder_aa83f118aa.png",
largeImgUrl:"/uploads/large_Github_Finder_aa83f118aa.png",
mediumImgUrl:"/uploads/medium_Github_Finder_aa83f118aa.png"
smallImgUrl:"/uploads/small_Github_Finder_aa83f118aa.png"
},
image2:{
thumbnailUrl:"...",
largeImgUrl:"...",
mediumImgUrl:"..."
smallImgUrl:"..."
},
...
}
}

我尝试使用各种JS高阶数组函数，但我失败了。

Answer 1

您可以使用两个映射来获得所需的对象。这样的:

const result = info.data.map((val) => {
const images = val.attributes.images.data.map((img) => {
return {
largeImgUrl: img.attributes.formats.large.url,
thumbnailUrl: img.attributes.formats.thumbnail.url,
mediumImgUrl: img.attributes.formats.medium.url,
smallImgUrl: img.attributes.formats.small.url
};
});
const res = {
title: val.attributes.title,
slug: val.attributes.slug,
images
};
return res;
});