put the JSON array data from fetch to dropdown

Question

I'm trying to build a simple app which will show a dropdown, the value of the dropdown gained from a fetch's return. Furthermore, I want to show the location only in the dropdown/picker/or any other component where I can pick 1 option.

Should I put the return in an array or anything?

When I console the return, it is like this

[
  {
    "ID": "BOGOR~10~522",
    "Location": "BOGOR"
  },
  {
    "ID": "JADETABEK~16~502",
    "Location": "JADETABEK"
  }
]

Here is the testing class

import React , { Component } from 'react';
import { View , StyleSheet , Text , Dimensions , Picker } from 'react-native';
import { Dropdown } from 'react-native-material-dropdown';
import { Item } from 'native-base';

const ScreenWidth = Dimensions.get('window').width;
const Screenheight = Dimensions.get('window').height;

export default class testing extends Component {

    constructor(props) {
        super(props)
        this.state = {
            data: []
        }
    } 

    componentDidMount() {
        fetch(url, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({"lokasi":
                {

                }
            })
        })
        .then(response => response.json())
        .then(res => {
            console.log(res.PilihLokasiResult.Lokasi)
            this.setState({
                data: res.PilihLokasiResult.lokasi
            })
        })
    }

    render() {
        return(
            <View style={styles.container}>

                    {this.state.data.map((index) => {
                        return(
                            <Dropdown/>
                        )
                    })}

            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
})

so now the data[] in the constructor has the value of the response like in the first box. but I don't know how to set the values of location to the dropdown item. can anyone help? thanks

this is the console.log(res)

github.com/n4kz/react-native-material-dropdown It waits for a data prop as an array. So, you need to pass an array for the options. You can create this array from your fetch result. I can't understand your other question, related to the "location" one. If you can explain it more clearly maybe someone can help. — devserkan
– devserkan, Commented Sep 17, 2018 at 2:18
when i call the fetch method, it will return a result where the value of res.PilihLokasi.Lokasi is like the first box above. so i need the location value from the return, to be put to the dropdown item. — rondi
– rondi, Commented Sep 17, 2018 at 2:25
Do I get it right? Do you want an array including the Location values from the response to pass the Dropdown component right? — devserkan
– devserkan, Commented Sep 17, 2018 at 2:27
yeah, you're right.. so i want the dropdown has the item : -)BOGOR -)JADETABEK . i'm a beginner at react native, so please help if i did a mistake — rondi
– rondi, Commented Sep 17, 2018 at 2:29
No mistake, you need to get the desired data and pass it to the component. I've provided an answer, I hope it works. — devserkan
– devserkan, Commented Sep 17, 2018 at 2:39

devserkan · Accepted Answer · 2018-09-17 04:45:26Z

1

The library you want to use waits for a prop data array including objects key named value as your option values. So, you can create it, then pass it something like this (not tested) :

createData() {
  return this.state.data.map( el => ({value: el.Location}));
}

render() {
        const data = this.createData();
        return(
            <View style={styles.container}>
                <Dropdown data={data} />
            </View>
        )
}

Update after discussion on chat

Somehow, res.PilihLokasiResult.Lokasi is coming as a JSON string. So using JSON.parse and setting the state like that solved the second problem:

this.setState({
    data: JSON.parse( res.PilihLokasiResult.Lokasi )
})

edited Sep 17, 2018 at 4:45

answered Sep 17, 2018 at 2:37

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

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

8 Comments

rondi Over a year ago

I've tried the .map function. it throw an error saying "this.state.map is not a function"

devserkan Over a year ago

Of course, it says because it is this.state.data.map :) I've updated my answer.

rondi Over a year ago

hahaha now it says "TypeError: TypeError: cannot read property 'map' of undefined" :(

devserkan Over a year ago

Just comment out or remove this line const data = this.createData(); Then, add a console.log(this.state) right below the render() line. Then look the console for logs.

devserkan Over a year ago

Let us continue this discussion in chat.

|

Collectives™ on Stack Overflow

put the JSON array data from fetch to dropdown

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related