CODEWITHSUNDEEP
javascriptreactjsecmascript-6semantic-ui
colin_dev256
colin_dev256

Reputation: 815

How to populate json in a dropdown with Semantic UI

If I have the following json data, How can I populate Bird_Name in the dropdown list with semantic?

Note: I'm using react with es6. 

var birds = [
            {
                "ID": "001",
                "Bird_Name": "Eurasian Collared-Dove"
            },
            {
                "ID": "002",
                "Bird_Name": "Bald Eagle"
            },
            {
                "ID": "003",
                "Bird_Name": "Cooper's Hawk"
            },
        ];

Semantic dropdown

            <Container>
                <Divider hidden />
                <Dropdown 
                placeholder='Select...' 
                selection
                search
                options={options}
                />
            </Container>

Upvotes: 0

Views: 1467

Answers (2)

Ali Najafi
Ali Najafi

Reputation: 143

You have two ways:

  1. Change your data to be like the schema that dropdown accept

  2. You can map your data to the dropdown.item and put it in the dropdown as a variable

Upvotes: 0

Sitian Liu
Sitian Liu

Reputation: 1166

One way you could do this is by mapping the Bird_Name fields as text, and assuming you want the ID as the value:

const options = birds.map(({ ID, Bird_Name }) => ({ value: ID, text: Bird_Name }))

Now you can pass the options into your Dropdown component

You can check out the codepen here: https://codepen.io/poda/pen/BYwZNB

Upvotes: 2

Related Questions