CODEWITHSUNDEEP
jsonreact-nativejsxreact-native-flatlist
lios
lios

Reputation: 148

React Native - Filter JSON based on another const JSON inside FlatList

I am trying to create a FlatList and set leftAvatar image based on the value of my fetched JSON and my const JSON. My example:

    const myicons = [
          {
            title: 'Cotton',
            file: require('../assets/images/cotton.png'),
          },
          {
            title: 'Beef',
            file: require('../assets/images/beef.png'),
          },
        ];
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <ListItem
              leftAvatar={{ source: myicons.filter(myitem => myitem.title === item.product)[0].file }}
              title={item.description}
              subtitle={`${item.product} ${item.description}`}
            />
          )}
          keyExtractor={item => item.index}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
        />
      </View>
    );

When the code is as above, I get an error of undefined for item.product, while if i hardcode it as myitem.title === 'Beef' it works like a charm. The next lines also work fine with item.*

What is the right syntax for this? I believe this is the best way to go, but, if I don't surpass this, I will have to set the file value in the fetched JSON which means more KB's for the user and I don't want that.

EDIT My this.data.state values are 

[{"date":"Thu, 31 May 2018 00:00:00 GMT","description":"Banana, Europe,($/kg)","index":0,"price":0.96277169112575,"product":"Bananas"},{"date":"Thu, 31 May 2018 00:00:00 GMT","description":"Banana, US,($/kg)","index":1,"price":1.1505360625,"product":"Bananas"},{"date":"Thu, 31 Oct 2019 00:00:00 GMT","description":"Bananas, Central American and Ecuador, FOB U.S. Ports, US$ per metric ton","index":2,"price":1136.5001201057,"product":"Bananas"},{"date":"Wed, 30 May 2018 00:00:00 GMT","description":"Beef - Choice 1","index":3,"price":192.98,"product":"Beef"},{"date":"Wed, 30 May 2018 00:00:00 GMT","description":"Beef - Select 1","index":4,"price":169.31,"product":"Beef"},{"date":"Thu, 31 May 2018 00:00:00 GMT","description":"Beef,($/kg)","index":5,"price":4.15019715,"product":"Beef"},{"date":"Wed, 30 May 2018 00:00:00 GMT","description":"Butter, AA Chicago, lb","index":6,"price":2.425,"product":"Butter"},{"date":"Thu, 31 May 2018 00:00:00 GMT","description":"Cocoa,($/kg)","index":7,"price":2.65994,"product":"Cocoa"},{"date":"Thu, 31 May 2018 00:00:00 GMT","description":"Coffee Price, Arabica, cents/kg","index":8,"price":2.989685182,"product":"Coffee"}]

Upvotes: 0

Views: 75

Answers (1)

SDushan
SDushan

Reputation: 4631

According to your code, the first object that passes to flatlist

{
    date: "Thu, 31 May 2018 00:00:00 GMT",
    description: "Banana, Europe,($/kg)",
    index: 0,
    price: 0.96277169112575,
    product: "Bananas"
}

Now your filter function will like this

myicons.filter(myitem => myitem.title === 'Bananas')[0].file

But you don't have any value in myicons array according to Bananas. So it return an undefined.

In order to fix this error, modify your myicons to handle all titles or provide a default property to display when your result isundefined

Important

You can use find instead of filter in JS

myicons.find(myitem => myitem.title === item.product).file

Hope this helps you. Feel free for doubts.

Upvotes: 1

Related Questions