How to map a dictionary in reactJS?

Question

I get a dictionary from the online api in the form {{key: object}, {key: object}, ... For 1000 objects}. I would like to use responseJS to do something like

this.props.dict.map(function(object, key)){ //Do stuff } 

This map works with arrays, but obviously does not work with dictionaries. How can I achieve something like this?

Answer 1

Javascript dictionaries are called objects, and you can iterate over very similar arrays.

 var dict = this.props.dict; for (var key in dict) { // Do stuff. ex: console.log(dict[key]) } 

If you thought about using a map so that at the end of the iteration you have a full array, then inside the for..in loop you can click on the array you declare earlier.

 var dict = this.props.dict; var arr = []; for (var key in dict) { arr.push(dict[key]); } 

Answer 2

If you want to use map , as usual, one parameter Object.getOwnPropertyNames() :

 var newArr = Object.getOwnPropertyNames(this.props.dict).map(function(key) { var currentObj = this.props.dict[key]; // do stuff... return val; }); 

Answer 3

If you are targeting modern browsers or using some kind of transpiler, you can use Object.entries to match [key, value] pairs within a single iteration.

 const obj = { foo: 'bar', baz: 42 } console.log('Object.entries') console.log( Object.entries(obj) ) console.log('Mapping') console.log( Object.entries(obj) .map( ([key, value]) => `My key is ${key} and my value is ${value}` ) ) 

---

Use with React

Object.entries function is very convenient with React, because by default there is no simple iteration of objects / dictionaries. React requires that you assign keys to components during iteration in order to execute this algorithm. Using Object.entries , you can use already collected collections without manually entering keys into your data or using array indices, which can lead to undesirable behavior when the indices change after filtering, deleting, or adding items.

The following is an example of using Object.entries using React:

 const buttonCaptions = { close: "Close", submit: "Submit result", print: "print", } const Example = () => <div> { Object.entries(buttonCaptions) .map( ([key, value]) => <button key={key}>{value}</button> ) } </div> ReactDOM.render(<Example />, document.getElementById('react')); 

 <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

---

Common syntax errors

As a side note, when displaying the result of Object.entries you must wrap the array argument in parentheses when using array destructuring. The following code will throw a syntax error:

 console.log( Object.entries({key: 'value'}) .map([key, value] => `${key}: ${value}`) ) 

Do this instead:

 console.log( Object.entries({key: 'value'}) .map( ([key, value]) => `${key}: ${value}` ) ) console.log( Object.entries({key: 'value'}) .map(keyValuePair => `${keyValuePair[0]}: ${keyValuePair[1]}`) ) 

---

Compatibility

For current browser support, see the ECMAScript Compatibility Table in Functions 2017> Static Object Methods.

Answer 4

Assuming you meant: {key: object, key2: object}

You could do something like (not sure about the exact difference from getOwnPropertyNames , but it should do the same, maybe less efficiently):

 Object.keys(this.props.dict) .map(function(key)){ var object = this.props.dict[key] //Do stuff }) 

Edit:

• Object.getOwnPropertyNames vs Object.keys

If you want enumerated objects to use Object.keys