React native Material下拉从json数据获取id

问题描述 投票:2回答:2

我在我的反应原生项目中使用了react-native-material-dropdown。我从API获得数据。

问题是我在下拉列表中成功获得名称,但我想要一个选定名称的hotelId。我无法在下拉列表中解析整个JSON

JSON

    {
            "message": "Success",
            "notificationCount": 0,
            "result": [{
                "hotelId": "india3c71a2b8-05d3-476e-825a-f31e08ac3bdc",
                "name": "Hotel Samrat"
            }, {
                "hotelId": "indiae4ef0d05-f46e-48f3-9bce-a37bfde089a4",
                "name": "Hotel Kalinga Ashok"
            }],
            "status": 1,
            "totalRecord": 2,
            "scopeId": ""
   }

我通过以下方式解析数据:

var count = Object.keys(responseJSON.result).length;
            let drop_down_data = [];
            for (var i = 0; i < count; i++) {
                console.log(responseJSON.result[i].name) // I need to add 
                drop_down_data.push({ value: responseJSON.result[i].name }); // Create your array of data
            }

并在下拉列表中添加了该数组:

  <Dropdown
       label={'Select hotel name'}
       data={this.state.data}
       baseColor='#79292F'
  />

我已经完成了所有堆栈溢出的答案。但我无法得到确切的答案。

android reactjs react-native dropdown
2个回答
3
投票

您可以将数据作为{value : "", label : ""}传递

var count = Object.keys(responseJSON.result).length;
            let drop_down_data = [];
            for (var i = 0; i < count; i++) {
                console.log(responseJSON.result[i].name) // I need to add 
                drop_down_data.push({
                value : responseJSON.result[i]. hotelId
                label: responseJSON.result[i].name 
               }); // Create your array of data
            }

//pass your drop_down data to dropdown component 
  <Dropdown
       label={'Select hotel name'}
       data={YOURFINALDATAOBJECT}
       baseColor='#79292F'
  />

3
投票
const drop_down_data = responseJSON.result.map(element => ({
  value: element.name,
  label: element.hotelId
}));

valueExtractor = val => {
  console.log(val);
};

<Dropdown
  label={"Select hotel name"}
  data={this.state.data}
  baseColor="#79292F"
  valueExtractor={this.valueExtractor}
/>;
© www.soinside.com 2019 - 2024. All rights reserved.