如何使用语义UI在下拉列表中填充JSON

Question

如果我具有以下json数据，如何使用语义填充下拉列表中的Bird_Name ？

注意：我正在使用与es6反应。

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

语义下拉

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

Answer 1

一种实现方法是将Bird_Name字段映射为text ，并假设您希望将ID作为值：

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

现在您可以将选项传递到Dropdown组件中

您可以在此处签出Codepen： https ：//codepen.io/poda/pen/BYwZNB

Answer 2

您有两种方法：

1. 将您的数据更改为类似于下拉菜单接受的模式

2. 您可以将数据映射到dropdown.item并将其作为变量放入下拉列表中