How to populate json in a dropdown with Semantic UI

Question

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>

Sitian Liu · Accepted Answer · 2018-02-14 22:32:59Z

2

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

answered Feb 14, 2018 at 22:32

Sitian Liu

1,16610 silver badges14 bronze badges

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

Comments

BSMP · Accepted Answer · 2018-02-14 23:11:28Z

0

You have two ways:

Change your data to be like the schema that dropdown accept
You can map your data to the dropdown.item and put it in the dropdown as a variable

edited Feb 14, 2018 at 23:11

BSMP

4,8808 gold badges36 silver badges46 bronze badges

answered Feb 14, 2018 at 22:37

Ali Najafi

1436 bronze badges

Collectives™ on Stack Overflow

How to populate json in a dropdown with Semantic UI

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related