CODEWITHSUNDEEP
arraysjsonrestreact-native
Sugeivan Senthinathan
Sugeivan Senthinathan

Reputation: 129

How to map json data with array in react native

I have array like this in react native 

 const data = [
    { key: 1, label: 'Service1'},
    { key: 2, label: 'Service2' },
    { key: 3, label: 'Service3' },
    { key: 4, label: 'Service4' },
    { key: 5, label: 'Service4' },
 ];

and json data:

 "services": [
    {
      "id": 1,
      "name": "Hotels",
    },
    {
      "id": 2,
      "name": "Embassies",
    },
 ]

How to map id to key and name to label???

Upvotes: 4

Views: 38877

Answers (3)

Sandhya Deshmukh
Sandhya Deshmukh

Reputation: 59

if your data like below (removed services key)

var jsonData = [
    { "id": 1, "name": "Hotels" },
    { "id": 2, "name": "Embassies" }
  ];

var data = jsonData.map(function(item) {
  return {
    key: item.id,
    label: item.name
  };
});

console.log(data);

Upvotes: 2

Aakash Sajjad
Aakash Sajjad

Reputation: 97

i know it to much late,but i hope its helpfull for others,How to fetch the response of JSON array in react native?How to map json data with array in react native

export default class ExpenseNew extends Component {
    constructor(){
        super();
        this.state={
            PickerSelectedVal : '',
            accountnameMain:[],
        }
    }
     componentDidMount(){
         var account_nam=[]
                fetch('your Url', {
                    method: 'GET',
                    headers: { 'Authorization': 'Bearer ' + your token }
                })
                    .then((response) => response.json())
                    .then((customerselect) => {
                        // alert(JSON.stringify(customerselect)) 
                        global.customerdata = JSON.stringify(customerselect)
                        var customername = JSON.parse(customerdata);
                        //alert(JSON.stringify(customername));
                        for (i = 0; i < customername.cus_data.length; i++) {
                            var dataa = customername.cus_data[i]["account_name"];  
                            account_nam.push(dataa)
                        }
                        this.setState({accountnameMain:account_nam});
                    })
                    .done();
    }
                    render() {
                          return (
                               <Picker
                                selectedValue={this.state.PickerSelectedVal}
                                placeholder="Select your customer"
                                mode="dropdown"
                                iosIcon={<Icon name="arrow-down" />}
                                onValueChange={(itemValue, itemIndex) => this.setState({PickerSelectedVal: itemValue})} >

                                {this.state.accountnameMain.map((item, key)=>(
                                    <Picker.Item label={item} value={item} key={key}/>)
                                )}

                            </Picker>


)
}


}

the above example is fetch array of data from json,and map data in to dropdown/picker,i hope its helpfull for others,if you have any query, asked from me

Upvotes: 0

lalkmim
lalkmim

Reputation: 646

You want to fill your const data with values from JSON, correct?

Try this:

var jsonData = {
  "services": [
    { "id": 1, "name": "Hotels" },
    { "id": 2, "name": "Embassies" }
  ]
};

var data = jsonData.services.map(function(item) {
  return {
    key: item.id,
    label: item.name
  };
});

console.log(data);

Upvotes: 5

Related Questions