Salut, je débute avec React Native (je suis en parallèle le tutoriel de sAr63) et je rencontre un problème au niveau de la récupération de données JSON de l'API d'OpenFoodFact
Je me suis donc basé sur le même principe comme son tutoriel lorsqu'il récupère des données de l'API TheMovieDB
Donc en résumé j'aimerai en fonction d'un code barre entré, récupérer les informations d'un produit (pour le moment pour des test j'entre manuellement le code barre dans ma fonction)
J'ai donc un fichier Search.js qui est l'activité principal affiché
import React from 'react'
import{StyleSheet,View, Button, TextInput, FlatList} from 'react-native'
import FoodItem from './FoodItem.js'
import { getFoodFromApi } from '../API/OFFApi.js'
//import itemFood from '../Helpers/data.js'
class Search extends React.Component
{
//On définit les propriétés dans le constructeur du component
constructor(props)
{
super(props)
this.state = {
food:[]
}
this.searchedText=""
}
_loadFood()
{
getFoodFromApi("3029330003533").then(data => {
this.setState({ food: data.product })
})
console.log(this.state.food)
}
render()
{
return(
<View style={styles.mainContainer}>
<TextInput style={styles.textInput} placeholder="Insere the food's barcode">
</TextInput>
<Button style={{height: 100}} title="Search" onPress={()=>{this._loadFood()}} ></Button>
<FlatList
//correspond à mon aliment
data = {this.state.food}
// On identifie une proriété qui va servir d'identifiant unique
//keyExtractor={(item) => item.code.toString()}
// Correspond au rendu des données de la liste
renderItem={({item}) => <FoodItem food={item}/>}
/>
</View>
)
}
}
const styles = StyleSheet.create(
{
mainContainer:
{
flex:1
},
textInput:
{
marginLeft:5,
marginRight: 5,
height:50,
borderColor:'#FFFF',
borderWidth:1,
paddingLeft: 5
}
})
export default Search
Un fichier FoodItem.js pour l'affichage du produit trouvé
Dans celle d'OpenFoodFact, les informations sont contenues dans "product" mais pas dans un un tableau, je pense que ça pose problème mais je ne sais pas comment y remédier
Si vous avez une idée, n'hésitez pas, merci d'avance pour votre aide
PS: ce topic est un doublon mais j'ai mal mis en forme le code dans le premier donc j'en ai refais un autre, désolé
Tu as tout à fait raison, tu rencontres cette erreur car, pour qu'une FlatList fonctionne, il faut lui donner un tableau. Ici, le retour de ton API data.product est un objet.
Dans le cours, j'utilise une FlatList car l'API TMDB renvoie un tableau de films pour un texte donné. Ton API ici ne renvoie qu'un élément pour un code barre donné, ce qui remet en cause l'utilisation d'une FlatList ici. Pour ton cas d'usage tu dois te passer d'une FlatList et afficher directement ton FoodItem, comme ceci :
J'ai in problème similaire à TestTes146. Je n'est qu'une seule donnée JSON à récupérer mais elle est dans un tableau ( comme votre exemple du tableau qui contient des films). Je ne pense pas qu'il soit nécessaire d'afficher ma donnée dans une flatlist puisqu'elle est seule mais je n'arrive pas à y accéder. Sauriez-vous comment y remédier ?
Cordialement,
LS
[React Native] Récupération de données JSON
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Développeur mobile : un peu d'Android, beaucoup de React Native et surtout de l'iOS. Cours React Native / Applications réalisées en React Native