关于reactjs：Javascript：迭代JSON对象


Javascript: Iterating over JSON objects

本问题已经有最佳答案，请猛点这里访问。

我有一个JSON对象要迭代。

1
2
3
4
5
6
7
8
9
10
11
"phone": {
   "Samsung": {
       "type":"S7"
    },
   "iPhone": {
       "type":"6S"
    },
   "Google": {
       "type":"Pixel"
    }
}

我正在使用Object.key映射这些值中的每一个，我认为这是处理对象的正确方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
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返回这个值：

enter image description here

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

相关讨论

严格来说，这是一个ECMAScript-2017答案，但它可以很容易地填充到旧版本的JavaScript中。

您希望使用Object.values或Object.entries循环一个对象中的所有属性。当Object.keys给你密钥时，Object.values给你属性(好的，duh)，Object.entries给你对象中每个条目的数组[key, value]。

您在当前代码中不使用密钥，所以这里是Object.values选项：

1
2
3
4
5
6
7
8
    Object.values(this.props.phones).map((type) => {
        console.log(type)
        return (
            <p>
Type of phone: {type}
</p>
        )
    })

这里是Object.entries选项，如果您想同时使用这两个选项：

1
2
3
4
5
6
7
8
9
10
11
12
    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页面上都链接了垫片。

相关讨论

因为您迭代对象键。如果要返回对象，则必须使用给定的键来获取其值：

1
2
3
4
5
6
7
8
9
10
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])
            ...
        })
    )

}

对象的键是字符串，所以当您查看Object.keys(someObject)时，这就是您将得到的。与该键关联的值是您要查找的对象。为了获得该值，在映射迭代中，需要使用键访问对象。

1
2
3
4
5
6
7
8
9
10
11
var self = this;//close over this value for use in map
return (
    Object.keys(this.props.phones).map((type) => {
        console.log(self.props.phones[type]);//this will yield the object
        return (
            <p>
Type of phone: {self.props.phones[type]}
</p>
        )
    })
)

您可以使用arrow函数和参数的析构函数来简化代码的读取。由于Object.keys以数组的形式返回给定对象的键，因此需要对数组进行迭代，并使用当前的key提取值。您需要为react中的列表元素分配一个唯一的键，因此p key={phoneKey}..与之相关，以获取更多信息，签出列表和键

1
2
3
4
5
6
7
8
9
const {phones} = this.props;
const phoneKeys = Object.keys(phones);

render() {
    return (
        phoneKeys.map(phoneKey) => <p key={phoneKey}>Type of phone: {phones[phoneKey].type}
</p>)
    )
}

您已经迭代了这些键。所以循环中的type变量将被设置为Samsung、iPhone和Google。然后使用this.props.phone[type]访问值对象。请在代码中修复与JSON对象中的phone键不同的phones键。

1
2
3
4
5
6
7
8
9
10
11
12
13
render() {
    //this.props.phone contains the objects"Samsung","iPhone", and"Google"
    return (
        Object.keys(this.props.phone).map((type) => {
            console.log(this.props.phone[type])
            return (
                <p>
Type of phone: {this.props.phone[type]}
</p>
            )
        })
    )
}