Convert JSON data to a select dropdown in React

Question

I have seen a similar question here (how to display json data in dropdown using reactj), but it does not answer my query.

I have some JSON data coming in from an ajax request in my react app:

"quotes":{

        "USDAED":3.6732,
        "USDAFN":77.588904,
        "USDALL":103.298421,
        "USDAMD":528.084946,
        "USDANG":1.795181,
        "USDAOA":628.150147,
        "USDARS":92.5812
    }

Its a list of currencies and their conversion rates.

I need to render a select dropdown list out of it in a react component such that the json data is transformed into keys and values:

<select className="dropdown">
<option key="USDAED" value="3.6732">USDAED</option>
<option key="USDAFN" value="77.588904">USDAFN</option>
...

Is there an easy way to traverse the json data and create a select dropdown in JSX?

Object.entries() is your friend.

goto
– goto

2021-04-14 21:33:37 +00:00
Commented Apr 14, 2021 at 21:33 — goto
– goto, Commented Apr 14, 2021 at 21:33

sanjar · Accepted Answer · 2021-04-14 21:50:16Z

1

I see only one difference between your situation and the SO example: in the example the list of items is an array, in your situation it's the fields of an object.

using Object.keys() you can get an array of fields, and use a map on this array to display all the options

<select>
    {Object.keys(quotes).map(element => <option key={element} value={quotes[element]}>{element}</option>)}
</select>

https://codepen.io/sanjar/pen/YzNLRWE?editors=0011

edited Apr 14, 2021 at 21:50

answered Apr 14, 2021 at 21:45

sanjar

1,1012 gold badges9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nonik · Accepted Answer · 2021-04-14 21:54:57Z

0

you can iterate through your object keys

Updated my answer to show html

var data = {
  "quotes": {

    "USDAED": 3.6732,
    "USDAFN": 77.588904,
    "USDALL": 103.298421,
    "USDAMD": 528.084946,
    "USDANG": 1.795181,
    "USDAOA": 628.150147,
    "USDARS": 92.5812
  }
};
var result=[];
for (let key in data.quotes) {
 var ele = document.getElementById('sel');
  result.push({key:key,value:data.quotes[key]})
   ele.innerHTML += '<option value="' + key + '">' + data.quotes[key] + '</option>';
}



console.log(result)

<select className="dropdown" id="sel">
  <option value="">-- Select --</option>
</select>

edited Apr 14, 2021 at 21:54

answered Apr 14, 2021 at 21:40

Nonik

6454 silver badges11 bronze badges

2 Comments

Husman Over a year ago

I see. So this converts the data into an array of objects. How then do I convert this array to a select/option list in my render function?

Husman Over a year ago

Thank you. I’ve upvoted your answer, but someone else has provided a much cleaner solution, which I’ve accepted.

Collectives™ on Stack Overflow

Convert JSON data to a select dropdown in React

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related