javascript - How to get JSON dynamic value in Picker React-native

Question

Here am trying to get value in Picker , I am getting value in JSON format and trying to show that value in Picker like DropDown . Please help. Below code am trying like hit and trial but not working . Below is my code and JSON value also . Do I need to install and dependencies ?

 import React, { Component } from 'react';

    import { AppRegistry, StyleSheet, View, Platform, Picker, ActivityIndicator, Button, Alert} from 'react-native';

    export default class AddInventory extends Component {

     componentDidMount() {

          return  fetch('http://1/Dsenze/userapi/inventory/viewinventorytype', {  
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              "username" :"admin",
              "password" :"admin"
            })
          }).then((response) => response.json())
          .then((responseJson) => {
            var count = Object.keys(responseJson.message.Obj).length;
            let PickerValueHolder = [];
            for(var i=0;i<count;i++){
              console.log(responseJson.message.Obj[i].name) // I need to add 
              PickerValueHolder.push({ value: responseJson.message.Obj[i].name }); // Create your array of data
            }
            this.setState({ PickerValueHolder }); // Set the new state
          })
          .catch((error) => {
            console.error(error);
          });
        }

        GetPickerSelectedItemValue=()=>{

          Alert.alert(this.state.PickerValueHolder);
        }

     render() {

       return (

        <View style={styles.MainContainer}>

              <Picker
                selectedValue={this.state.PickerValueHolder}
                onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} >
                { this.state.dataSource.map((item, key)=>(
                <Picker.Item label={item.name} value={item.name} key={key} />)
                )}

              </Picker>

              <Button title="Click Here To Get Picker Selected Item Value" onPress={ this.GetPickerSelectedItemValue } />

        </View>

       );
     }
    }

    const styles = StyleSheet.create({

    MainContainer :{

    justifyContent: 'center',
    flex:1,
    margin: 10
    }

    });

// below is JSON response

{
  "inventoryTypeData": [{
    "id": 1,
    "name": "scanning equipment"
  }, {
    "id": 2,
    "name": "ecg machine"
  }, {
    "id": 3,
    "name": "ct-scan machine"
  }, {
    "id": 7,
    "name": "x-ray machine"
  }],
  "success": "true"
}

Thanks

Answer 1

You've got a few issues in your code

1. You don't need a return statement in your componentDidMount
2. You're not accessing the values correctly in your responseJson, there is no key called messages
3. You are using a for-loop when you could just use the array from the responseJson.
4. In your picker you are overwriting the PickerValueHolder which holds all the values each time you move the picker.

I have made some changes to your code, and this is a working example, which you can see here at this snack https://snack.expo.io/@andypandy/picker-example

import * as React from 'react';
import { Text, View, StyleSheet, Alert, Picker } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {

  // add a selectValue to your state to stop the overwriting
  state = {
    PickerValueHolder: [],
    selectedValue: ''
  }

  componentDidMount() {
    // remove the return 
   fetch('http://1/Dsenze/userapi/inventory/viewinventorytype', {  
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          "username" :"admin",
          "password" :"admin"
        })
      }).then((response) => response.json())
      .then((responseJson) => {
        // use the inventoryTypeData as it is already an array
        let PickerValueHolder = responseJson.inventoryTypeData;
        this.setState({ PickerValueHolder }); // Set the new state
      })
      .catch((error) => {
        console.error(error);
      });
    }

  GetPickerSelectedItemValue=()=>{
    Alert.alert(this.state.PickerValueHolder);
  }

  render() {


    return (
      <View style={styles.container}>
        {<Picker
                selectedValue={this.state.selectedValue}
                onValueChange={(itemValue, itemIndex) => this.setState({selectedValue: itemValue})} >
                { this.state.PickerValueHolder.map((item, key)=>
                  <Picker.Item label={item.name} value={item.name} key={key} />
                )}
              </Picker>}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});