CODEWITHSUNDEEP
reactjsapi
bobb1213131
bobb1213131

Reputation: 287

Populate my options data with react-select from API?

This doesn't seem to be working when i try to populate my data with the data i fetched from my API. I am currently fetching the data, storing it in my array called ProductsAndAirlines which i instantiated in my constructor, then I am setting the data values dynamically in my options,but currently it doesn't. It only inserts the first static value which is PBS.

Code

 getProductsAndAirlines = _ => {
    fetch('http://localhost:4000/allProductAndAirlineValuesInJira')
    .then(res => res.json())
    .then( res =>  
        this.setState({ ProductsAndAirlines: res.data }
    ))
    .catch(err => console.error(err))

  }
 componentDidMount() {

    this.getAirlines();
    this.getProductsAndAirlines();
    setTimeout(() => {
      this.setState({ show: true });
    }, 10);



  }
const optionsProduct = [

       ProductsAndAirlines && ProductsAndAirlines.projects && Object.keys(ProductsAndAirlines.projects).map((issue, i) => (

        ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues  && Object.keys(ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues ).map((product, product_index) => (
          {value: ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues[product_index].value, label: ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues[product_index].value}

        ))

      ))
render(){

 <Select
  placeholder  = {this.state.Product}
  onChange={this.handleChangeProduct}
  options={optionsProduct()}                              
 />
}

Upvotes: 0

Views: 225

Answers (1)

Arthur Almeida
Arthur Almeida

Reputation: 568

It's, probably, because your map function is wrong somehow. If you take a deep look you can check, for each key in ProductsAndAirlines.projects, the map function is returning an entirely new array. in the end, the options are being like 

[
 [{ value: 'PBS', label: 'PBS' },
      { value: 'Pairing', label: 'Pairing' },
      { value: 'MPP - Insight', label: 'MPP - Insight' },
      { value: 'BLISS', label: 'BLISS' },
      { value: 'Shiftlogic', label: 'Shiftlogic'}
 ]],
    [{ value: 'PBS', label: 'PBS' },
      { value: 'Pairing', label: 'Pairing' },
      { value: 'MPP - Insight', label: 'MPP - Insight' },
      { value: 'BLISS', label: 'BLISS' },
      { value: 'Shiftlogic', label: 'Shiftlogic'}
    ]]
]

Upvotes: 1

Related Questions