Javascript: Iterating over JSON Objects

Question

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

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

I use Object.key to match 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 ( <p>Type of phone: {type}</p> ) }) ) } 

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

Why does it return a value, not an object?

Answer 1

Strictly speaking, ecmascript-2017 is the answer, but it can be easily reinforced in earlier versions of Javascript.

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

You are not using the key in your current code, so here Object.values :

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

and here is the parameter Object.entries if you want 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 will see that we are using ES6 destructuring to get two values ​​from the array that we get from Object.entries .

Gaskets are linked on MDN pages for each function.

Answer 2

Because you iterate over the keys of objects. To return an object in your case, you must use the 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]) ... }) ) } 

Answer 3

The object key is the string, so you will return when viewing Object.keys(someObject) . The value associated with this key is the object you were looking for. To get the value, in your iteration of the map you will need to access the object using 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> ) }) ) 

Answer 4

You have iterated over the keys. Thus, the type variable in your loop will be set to Samsung , iPhone and Google . Then you use this.props.phone[type] to access value objects. Correct the phones key in the code, which is different from phone in the JSON object.

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

Answer 5

You can use the arrow function and restructure parameters to make it easier to read your code. Since Object.keys returns the keys of the given object as an array, you need to iterate through the array and extract the value using the current key . You need to assign a unique key to the list of items in React, so p key={phoneKey}.. is associated with this, for more information 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>) ) }