Блог

Моя структура файла JSON выглядит следующим образом :

 {
     "shopData": [
      {
         "shop_id" : "1",
         "shop_name":"NTUC",
         "itemData":[
             {
             "id" : "3",
             "shop_name":"NTUC",
             "image" :"https://i2.wp.com/www.downshiftology.com/wp-content/uploads/2021/01/Baked-Salmon-1-2.jpg",
             "name":"Salmon fillet",
             "price": 16,
             "purchase_limit": "5",
             "stock": "20"
         },
         {
             "id" : "1",
             "shop_name" :"NTUC",
             "image" : "https://images.unsplash.com/photo-1603664454146-50b9bb1e7afa?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fG9yYW5nZXxlbnwwfHwwfHw=amp;ixlib=rb-1.2.1amp;w=1000amp;q=80",
             "name" : "Orange",
             "price": 10,
             "purchase_limit": "3",
             "stock": "15"
          },
          {
             "id" : "2",
             "shop_name" :"NTUC",
             "image" :"https://upload.wikimedia.org/wikipedia/commons/8/89/Tomato_je.jpg",
             "name":"Tomato",
             "price": 5,
             "purchase_limit": "7",
             "stock": "18"
          } ,
         {
             "id" : "4",
             "shop_name" : "NTUC",
             "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIK0wJschQcumCEBOnWbs6qcjZHcPpHPRETQamp;usqp=CAU",
             "name":"Greens",
             "price": 3,
             "purchase_limit": "3",
             "stock": "25"
         }
 
 
         ]
         
       },
       {
         "shop_id" : "2",
         "shop_name":"GIANT",
         "itemData": [
             {
                 "id" : "5",
                 "shop_name" : "GIANT",
                 "image": "https://www.jocooks.com/wp-content/uploads/2020/05/dark-rye-bread-1-17.jpg",
                 "name" : "RyeBread",
                 "price": 20,
                 "purchase_limit": "5",
                 "stock": "15"
              },
              {
                "id" : "6",
                "shop_name" : "GIANT",
                "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFca-tLIQoXKEBi8EkM4eAmh0cWccPtE34fAamp;usqp=CAU",
                "name" : "Carrot",
                "price": 7,
                "purchase_limit": "6",
                "stock": "15"
             }
 
         ]
 
 
       }
            
     ]   
}

 

Для этого есть ли способ, с помощью которого я могу выборочно выбирать, какой только один набор данных отображать в моем Flatlist?

Например, я хочу отображать данные только с shop_name = "GIANT"

Редактировать: есть ли какой-нибудь способ выбрать определенный товар (магазин) из shopData массива, а затем отобразить их с помощью FlatList ?

В React Native (и Javascript) вам нужно сопоставлять данные JSON, которые анализируются как объекты Javascript. И при циклическом просмотре их (например, map()) вы можете условно отображать их.

Однако в примере с плоским списком вы можете заранее подготовить данные, используя useMemo, чтобы запомнить отфильтрованные данные.

 import React, { useMemo } from 'react'

const Component = (data) => {

    const finalDataToDisplay = useMemo(() => {
        return data.filter( x => x.shop_name === "GIANT")
    },[data])

    return       <FlatList
                        data={finalDataToDisplay}
                        renderItem={renderItem}
                        keyExtractor={item => item.id}
                  />
}
 

Затем мы можем удобно использовать finalDataToDisplay in flat list в качестве источника данных.

.filter() — https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

<FlatList /> — https://reactnative.dev/docs/flatlist