格式化复杂的JSON对简单对象的响应
我正在尝试格式化由Strapi返回的复杂响应数据，以获取一个可以传递给UI的简单对象。
获取请求是以下端点： http：// localhost：1337/api/projects？fields = title＆amp; populate =图像
输出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高阶数组功能，但失败了。
I'm trying to format complex response data returned by Strapi to obtain a simple object I can pass to my UI.
The GET request is to the following endpoint:http://localhost:1337/api/projects?fields=title&populate=images
The output JSON response is as follows:
{
"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
}
}
}
My desired output is as follows :
{
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"
},
}
Even the output in this format can be suitable
{
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:"..."
},
...
}
}
I've tried using various JS higher-order array functions but I have failed.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以使用两个地图获取所需的对象。像这样：
You can use two maps to get the desired object. Like this: