reactjs - Javascript: Iterating over JSON objects

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

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

        "type": "Pixel"
    }
}

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

render() {
    //this.props.phone contains the objects "Samsung", "iPhone", and "Google"
    return (

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

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

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

Answer

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 (
            
Type of phone: {type}
        )
    })

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 (
            
Make of phone: {make}
            
Type of phone: {type}
        )
    })

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.