React Native API FETCH每个对象的不同名称

Question

我正在连接React Native应用程序的RESTapi。我有Json响应具有不同名称的文件名对象，但所有对象都具有相同的变量:文件名，消息和显示。

对象的数量随着每次对API (REST)的请求而变化，响应中的对象的名称根据请求而不同。但每个对象中的变量与上面相同。

我需要从这个响应的信息只是文件名文本，但它将是可接受的，如果我得到对象的列表，所以我可以从错误中读取消息。

图片显示了我的对象的样子。

这是我的取回请求:

const getGists = async () => {
await axios
.get(`https://api.github.com/gists/public?per_page=30`)
.then((r) => {
let n;
for (n = 0; n < 30; n++) {
console.log(r.data[n].files.filename);
// console.log("____________________");
// console.log(r.data[n].owner.avatar_url);
// console.log("____________________");
// console.log(JSON.stringify(r.data[n].files));
}
})
.catch((e) => {
console.log("ERROR", e);
});
};

如何从这些请求中获取每个文件名，即使每次迭代中的对象名称不相同。谢谢你的帮助

Answer 1

使用API调用的结果和一些高阶函数，这将工作得很好:

const getGists = async () => {
await axios
.get(`https://api.github.com/gists/public?per_page=30`)
.then((response) => {
const myDesireResult = response.data.reduce((acc, item) => {
const files = Object.values(item.files);
if (files.length > 1) {
files.forEach((file) => acc.push(file.filename));
} else {
acc.push(files[0].filename);
}
return acc;
}, []);
console.log(myDesireResult);
})
.catch((e) => {
console.log("ERROR", e);
});
};

解释:

then

块中的，可以得到result.data

的API调用结果。与reduce功能，循环遍历数据将开始。

由于文件中的对象有不同的名称，我们可以很容易地使用Object.values()获取文件。

有些文件包含几个项目，而大多数文件只有一个项目。因此，通过检查file的长度，我们可以采取适当的行动。如果文件有多个元素，则使用另一个简单的lop，可以轻松遍历该文件数组。

查看codesandbox

上的工作示例