Javascript:迭代JSON对象

Question

我有一个我想要迭代的JSON对象.

"phone": {
    "Samsung": {
        "type": "S7"
    },
    "iPhone": {
        "type": "6S"
    },
    "Google": {
        "type": "Pixel"
    }
}

我正在使用Object.key这些值映射每个值,我认为这是使用对象的正确方法:

render() {
    //this.props.phone contains the objects "Samsung", "iPhone", and "Google"
    return (
        Object.keys(this.props.phones).map((type) => {
            console.log(type)
            return (
                <p>Type of phone: {type}</p>
            )
        })
    )
} 

但是,console.log当我期待一个对象返回时,上面的内容会返回:

为什么它返回一个值,而不是一个对象？

Answer 1

严格来说,这是一个ecmascript-2017答案,但它可以轻松地填充到旧版本的Javascript中.

您希望使用Object.values或Object.entries遍历对象中的所有属性.Where Object.keys为您提供键,Object.values为您提供属性(嗯,duh),并Object.entries为[key, value]对象中的每个条目提供一个数组.

您不在当前代码中使用密钥,因此这里是Object.values选项:

    Object.values(this.props.phones).map((type) => {
        console.log(type)
        return (
            <p>Type of phone: {type}</p>
        )
    })

Object.entries如果你想同时使用这两个选项,这里是选项:

    Object.entries(this.props.phones).map(([make, type]) => {
        console.log(make)
        console.log(type)
        return (
            <p>Make of phone: {make}</p>
            <p>Type of phone: {type}</p>
        )
    })

您将看到我们正在使用ES6解构来从我们得到的数组中获取两个值Object.entries.

垫片在每个功能的MDN页面上链接.

Answer 2

因为您迭代对象键。要在您的情况下返回对象，您必须使用给定的键来获取其值：

render() {
    //this.props.phone contains the objects "Samsung", "iPhone", and "Google"
    return (
        Object.keys(this.props.phones).map((type) => {
            console.log(this.props.phones[type])
            ...
        })
    )

}