Javascript：遍历 JSON 对象

Javascript: Iterating over JSON objects

提问by patrickhuang94

I have a JSON object that I want to iterate through.

我有一个要遍历的 JSON 对象。

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

I'm using Object.keyto map through each of these values, which I THINK is the correct way to work with objects:

我正在使用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>
            )
        })
    )
} 

However, the console.logabove returns this when I was expecting an object to return:

但是，console.log当我期待一个对象返回时，上面会返回这个：

Why is it returning a value, and not an object?

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

回答by lonesomeday

This is strictly speaking a ecmascript-2017answer, but it can easily be shimmed into older versions of Javascript.

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

You want to use either Object.valuesor Object.entriesto loop through all the properties in an object. Where Object.keysgives you the keys, Object.valuesgives you the properties (well, duh) and Object.entriesgives you an array [key, value]for each entry in the object.

您想使用Object.values或Object.entries循环遍历对象中的所有属性。WhereObject.keys为您提供键，Object.values为您提供属性（好吧，废话）并Object.entries为[key, value]对象中的每个条目提供一个数组。

You don't use the key in your current code, so here's the Object.valuesoption:

您当前的代码中没有使用密钥，所以这里有一个Object.values选项：

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

and here's the Object.entriesoption, if you wanted to use both:

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>
        )
    })

You'll see that we're using ES6 destructuring to get the two values out of the array we get from Object.entries.

您会看到我们使用 ES6 解构从我们从 中获得的数组中取出两个值Object.entries。

The shims are linked on the MDN pages for each function.

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

回答by Bartek Fryzowicz

Because you iterate over object keys. To return object in your case you have to use given key to get its value:

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

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])
            ...
        })
    )

}

回答by Travis J

The keys of an object are strings, so that is what you will get back when looking at Object.keys(someObject). The value associated with that key is the object you were looking for. In order to obtain the value, in your map iteration, you would need to access the object with your key.

对象的键是字符串，因此当您查看Object.keys(someObject). 与该键关联的值是您要查找的对象。为了获得该值，在您的地图迭代中，您需要使用您的键访问该对象。

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>
        )
    })
)

回答by cubbuk

You can use arrow function and destructuring of params to make it easier to read your code. Since Object.keysreturn the keys of the given object as an array, you need to iterate over the array and extract the value using the current key. You need to assign a unique key to list elements in React, so p key={phoneKey}..is related to that, for more information checkout Lists and Keys

您可以使用箭头函数和参数解构来更轻松地阅读您的代码。由于Object.keys将给定对象的键作为数组返回，因此您需要遍历数组并使用 current 提取值key。您需要为 React 中的列表元素分配一个唯一键，因此p key={phoneKey}..与此相关，有关更多信息，请查看Lists and Keys

const {phones} = this.props;
const phoneKeys = Object.keys(phones);

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

回答by uautkarsh

You have iterated over the keys. So the typevariable in your loop will be set to Samsung, iPhoneand Google. Then you use this.props.phone[type]to access the value objects. Please fix the phoneskey in your code which is different from phonekey in the JSON object.

您已经迭代了键。因此，type循环中的变量将设置为Samsung,iPhone和Google。然后您使用它this.props.phone[type]来访问值对象。请修复phones代码phone中与 JSON 对象中的键不同的键。

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>
            )
        })
    )
}