How can I store the json data into a array list

Question

I'm a beginner for the React native. Right now I'm trying to develop a mobile application and I have some issues about storing the JSON data into an array list. For example, the JSON data looks like this

[{"ID":"1", "Name":"wonderful"},{"ID":"2","Name":"happy"}].

And right now I'm using a third-party library which is called react-native-tag-select. To use this library, the data must be stored in this way,

 const data = [
      { id: 1, label: 'Money' },
      { id: 2, label: 'Credit card' },
      { id: 3, label: 'Debit card' },
      { id: 4, label: 'Online payment' },
      { id: 5, label: 'Bitcoin' },
    ];

In this one, the props for the id is a string and also label is a string. So how can I just store my JSON data separately like this? For example, like this

id:1, name: "wonderful".

I have tried to use the map method to do this. The code will be

this.state.data.map(function(data,index){
      return data.ID})

but it's still not working.

The code is in the below:

export default class select_page extends Component {
  constructor() {
    super()
  this.state = {
    data: [],
  }
}
  //updateSearch = search => {
   // this.setState({ search });
  //};

  componentDidMount(){
    return fetch('url')
    .then((response) => response.json())
    .then(response => this.setState({data:response}))
    .catch((error) => {
      console.error(error);
    });
  }

 render() {

    var getId=this.state.data.map(function(data,index){
      return data.ID
  })


  var getlabel=this.state.data.map(function(data,index){
    return data.Name
    })

    const { search } = this.state;
    const data=[{id:getId,label:getlabel}]

return (
 <View style={styles.TagSelected}>
          <Text style={styles.labelText}>Select Name from below:</Text>
          <SearchBar
            inputStyle={{ backgroundColor: 'white' }}
            inputContainerStyle={{ backgroundColor: 'white', borderRadius: 10 }}
            containerStyle={{ backgroundColor: '#ecf0f1', borderBottomColor: 'transparent', borderTopColor: 'transparent' }}
            placeholder="Search for a trait"
            onChangeText={this.updateSearch}
            value={search}
          />

          <TagSelect
            data={data}
            ref={(tag) => {
              this.tag = tag;
            }}
          />
        </View>
)

You can use `array#map` `[{"ID":"1", "Name":"wonderful"},{"ID":"2","Name":"happy"}].map(({ID:id, Name: label}) => ({id, label}));` — Hassan Imam, Oct 07 '19 at 07:08
What do you mean *"not working"*? That just gives you an array of the IDs, `["1", "2"]`. You need to return *the object you actually want in the new array* from the map callback. — jonrsharpe, Oct 07 '19 at 07:10
@jonrsharpe probably I didn't write it very clearly. So what I mean is I understand this will return an array of IDs. However, I want it separately add it to the ID that props. But I don't know how to do this. — Tomscat, Oct 07 '19 at 07:26
Check out this questions and the answers, seems highly relevant to your question: https://stackoverflow.com/questions/40348171/es6-map-an-array-of-objects-to-return-an-array-of-objects-with-new-keys#40348205 — rishat, Oct 07 '19 at 07:34

Tarreq · Accepted Answer · 2019-10-07T07:52:10.850

0

From what your desired data form looks like, this can achieve what you're looking for:

const data = [{ ID: "1", Name: "wonderful" }, { ID: "2", Name: "happy" }];

const result = data.map(item => {
  return {
    id: parseInt(item.ID),
    label: item.Name
  };
});

console.log(result);

edited Oct 07 '19 at 07:52

answered Oct 07 '19 at 07:19

Tarreq

1,282
9
17

1

This should work if you update `name: item.Name` to `label: item.Name` – Matt Aft Oct 07 '19 at 07:23
@MattAft It's still are not working. It is said undefined is not an object(evaluating 'u.map'). I have uploaded a part of my code in this question, probably I would like to ask your help to have a look about my code. – Tomscat Oct 07 '19 at 07:45

How can I store the json data into a array list

1 Answers1