时间戳

首页 > 解决方案 > 如何映射这种类型的 API 数据？

javascript - 如何映射这种类型的 API 数据？

问题描述

我正在尝试从 API 映射数据，但我遇到了一些问题。如何仅将名称推送到数组？没有称为“名称”的属性或类似的东西。

componentDidMount() {
    let url = `https://contact-browser.herokuapp.com/contacts`;
    let arr = []
    fetch(url).then(resp => resp.json()).then((data) => arr.push(data),
        this.setState({
            data: arr
        })
    );
}

    {this.state.data.map((person) => {
        return <li>{person}</li>
    })}

标签： javascriptreactjsapi

解决方案

描述

好的，查看从该 URL 返回的数据后，它返回一个对象，因此，一种简单的方法是使用Object.keys. 如您所见，我正在使用该map函数从 生成的数组中生成一个新数组Object.keys，从那里将函数生成的数组传递给map函数log，仅用于一个小演示。

我并不是说这是有史以来最高效/性能友好的方式，但它是一种干净、简单、清晰和简洁的做事方式。

const url = `https://contact-browser.herokuapp.com/contacts`;
const log = args => console.log(args);

fetch(url).then(r => r.json()).then(d => log(Object.keys(d).map(k => d[k])));

编辑

如评论中所述，如果您想提高效率并且不关心密钥，则可以使用Object.values，使用这种方法，只需处理更少的数据，减少处理等。

const url = `https://contact-browser.herokuapp.com/contacts`;
const log = args => console.log(args);

fetch(url).then(r => r.json()).then(d => log(Object.values(d)));

推荐阅读