0

I am using react native to build an app and NodeJS as backend, in the backend I am using MySQL to fetch data from database and send it to frontend. the data in frontend looks like this:

 [{"code": "21500", "dayTime": "On MON 11AM - 13PM", "group_id": "012021106667", "location": "A07"}, {"code": "21503", "dayTime": "On WED 11AM - 15PM", "group_id": "012021106667", "location": "A07"}]

As shown in the data above I have two different values of code attribute, so I want to store the data related to each code in separate objects then each object data I want to display it in the app view to be shown when button clicked.

For example from the data above I have two different codes so, I will have two objects, therefore in the <View> </View> automatically two buttons will show and each button have one of the object data. it may this question sound an easy question but I am really stuck in how to do that.

thanks in advance.

alobe
  • 101
  • 12
  • You can take inspiration from here: https://stackoverflow.com/questions/33786400/break-array-into-multiple-arrays-based-on-first-character-in-values – Pranjal Gore Jan 20 '21 at 09:03

2 Answers2

0

Why would you store the data of the objects in an array? It is much easier to use the objects themselves to display data.

Using the array you retrieve from your database you can make a FlatList to display the buttons, one for each item in the array. In the props of the component you build with the FlatList you can assign the object itself so you can use it within that component. For example rendering a Button that logs the properties of the specific item in the array.

<View>
    <FlatList 
      data={dataFromDatabase}
      keyExtractor={(item) => item.code}
      renderItem={({item}) =>{
        return (
          <Button onPress={() => console.log(item)} title={item.code} />
        )
      }}
    />
</View>

https://snack.expo.io/@stijn2404/flatlist-example

Stijn2404
  • 36
  • 3
  • thank you for answering my question, it is my mistake but what i mean objects not array, and I want to sort the data based on code and store them in separated objects, the reason I want to do that because sometimes I may have more than one item in the object with same code so if i used your way this will button for each one however i want all in one object so all will be in one button – alobe Jan 20 '21 at 08:58
  • i have tried but `FlatList` doesn't accept duplicated keys – alobe Jan 20 '21 at 09:22
  • The key is a unique identifier so it should be different for each item in the `FlatList`, is the `code` property in your object unique for each item in the array? Maybe this also helps: https://stackoverflow.com/questions/45947921/react-native-cant-fix-flatlist-keys-warning – Stijn2404 Jan 20 '21 at 09:26
0

I don't know if it can help you but if you store your data in an array and use the filter method on it ? like : data.filter(data => data.code == "21500");

Maybe this post will help you ? How to filter array of objects in react native?

Dirk
  • 55
  • 6