如何在restapi中指定数组内的某个字段

Question

我有一个api链接https://apilink.com?_fields=id,name,images，它给了我以下格式

[
{
"id": 229210,
"name": "Basic Electrical Knowledge",
"images": [
{
"id": 229211,
"date_created": "2023-01-13T18:34:39",
"date_created_gmt": "2023-01-13T07:34:39",
"date_modified": "2023-01-13T18:34:39",
"date_modified_gmt": "2023-01-13T07:34:39",
"src": "https://sampleSite.in/wp-content/uploads/2023/01/SomeUrlSource.jpg",
"name": "Basic Electrical Knowledge",
"alt": ""
}
]
}
]

我只想从images[]访问src。我如何从链接中检索这个。点击链接时，我想显示如下内容:

[
{
"id": 229210,
"name": "Basic Electrical Knowledge",
"src": "https://sampleSite.in/wp-content/uploads/2023/01/SomeUrlSource.jpg"
}
]

我该怎么做?

我试图通过提供以下参数来解决这个问题:https://apilink.com?_fields=id,name,images=src

Answer 1

您可以通过向API链接发出GET请求，然后使用诸如JSON.parse()之类的库来解析响应并提取必要的数据来实现这一点。之后，您可以使用for循环迭代响应中的'images'数组，并从数组中的每个对象提取'src'键。最后，您可以用所需的格式构造一个新对象并返回它。

fetch(https://apilink.com?_fields=id,name,images)
.then(response => response.json())
.then(data => {
let newData = []
data.forEach(item => {
let newItem = {
id: item.id,
name: item.name,
src: item.images[0].src
}
newData.push(newItem)
});
return newData;
})
.then(newData => {
console.log(newData);
});

请注意，这段代码片段是简化的，不处理错误，它只是作为一个示例，说明你可以如何做。

Answer 2

假设您不能在服务器端进行更改，实现一个小脚本，并希望结果只是操作URI，响应是no.

URI引用服务器中的资源，_fields看起来像是对所需资源属性的投影。

在本例中，您正在尝试对服务器通过。如果服务器没有实现这样的功能，你必须自己做。

您想要将[Object]类型的属性图像转换为字符串。@RASIKA EKANAYAKA回答的代码片段可以满足您的要求。