Javascript: Iterating over JSON objects

This question already has an answer here:

How do I loop through or enumerate a JavaScript object? 29 answers

---

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

You want to use either Object.values or Object.entries to loop through all the properties in an object. Where Object.keys gives you the keys, Object.values gives you the properties (well, duh) and Object.entries gives you an array [key, value] for each entry in the object.

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

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

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

    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 .

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

---

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.

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

---

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

}

链接地址: http://www.djcxy.com/p/28824.html

上一篇: 如何使用PHP中的jQuery / AJAX调用遍历JSON数组？

下一篇: Javascript：遍历JSON对象