Afficher data API call

Par Pouney Disign, il y a 4 ans

Javascript
Javascript React

Salut à tous,

Je suis bloqué depuis plusieurs jours, j'ai une réponse (stocké dans response.data) qui ressemble à sa (je peux déjà la loger) :

{ "success": true, "data": { "favourite_conseils": [ { "id": 1, "title": "Le titre de mon conseil 1", "speciality": [ 1, 2 ], "attachments": [ "https://placekitten.com/200/200", "https://placekitten.com/200/300" ], "isFavourite": true, "isPack": false, "message": "Message conseil 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar sed augue non sodales. Sed orci ex, aliquam vel maximus ac, posuere eu ex. Sed et est felis." }, { "id": 2, "title": "Le titre de mon conseil 2", "speciality": [ 1, 3 ], "isFavourite": true, "isPack": true, "messages": [ { "message": "Message conseil 2.1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar sed augue non sodales. Sed orci ex, aliquam vel maximus ac, posuere eu ex. Sed et est felis.", "duration": "48", "attachments": [ "https://placekitten.com/200/200" ] }, { "message": "Message conseil 2.2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar sed augue non sodales. Sed orci ex, aliquam vel maximus ac, posuere eu ex. Sed et est felis.", "duration": "75", "attachments": [ "https://placekitten.com/200/200" ] }, { "message": "Message conseil 2.3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar sed augue non sodales. Sed orci ex, aliquam vel maximus ac, posuere eu ex. Sed et est felis.", "duration": "9360", "attachments": [] } ] }, { "id": 3, "title": "Le titre de mon conseil 3", "speciality": [], "attachments": [], "isFavourite": true, "isPack": false, "message": "Message conseil 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar sed augue non sodales. Sed orci ex, aliquam vel maximus ac, posuere eu ex. Sed et est felis." } ] } }

Cependant je n'arrive pas à afficher mes valeurs, je met response.data dans une constante tutorials avec setTutorials, puis j'essaie de faire ceci :

{tutorials && tutorials.map((tutorial, index) => ( <li className={ "list-group-item " + (index === currentIndex ? "active" : "") } onClick={() => setActiveTutorial(tutorial, index)} key={index} > {tutorial.title} </li> ))}

ça compile mais quand j'essaie d'afficher la page il me dit que tutorials.map n'est pas une fonction...
Je sais que je peux pas mapper sur un objet mais j'ai bien "favourite_conseils": [...] comme tableau, mais je n'arrive pas à y accéder.

Je suis novice en react veuillez m'excuser si des choses sont incompréhensibles ou incohérentes.

Merci de votre aide !

5 réponses

Pouney Disign, il y a 4 ans

Merci MickaelTD pour ta réponse.
Cependant, je n'arrive pas à ajouter la propriété favourite_conseils que ce soit dans setTutorial ou au moment ou j'utilise .map car j'utilise axios, et favorite_conseils fait parti d'une api que nous avons fait...
Cordialement

MickaelTD, il y a 4 ans

Hello

D'apres ton JSON ton membre "data" commence par un membre "favourite_conseils" qui lui meme est un array.

Donc ton map devrait plutôt ressembler à ceci

{tutorials && tutorials.favourite_conseils.map((tutorial, index) => ( <li className={ "list-group-item " + (index === currentIndex ? "active" : "") } onClick={() => setActiveTutorial(tutorial, index)} key={index} > {tutorial.title} </li> ))}

sinon au lieu de faire

setTutorials(response.data)

tu fais

setTutorials(response.data.favourite_conseils)

et la ton code devrait fonctionner

MickaelTD, il y a 4 ans

Je penses avoir mal compris du coup.

Ton appel API tu le fait dans un service, dans ton composant directement ?
Le log de la response dont tu parles plus haut tu le vois ou dans le composant dans un service coté server (node j'imagine) ?
tu fais bien un truc de ce type la

On fait la version ultra courte pour l'exemple axios(l'url de ton api).then(response => setTutorials(response.data)) ?
Pouney Disign, il y a 4 ans

alors je fais bien un truc dans le genre, mais j´ai un service ou j´ai toutes mes requetes dessus, voila le code complet de mon composant :
https://controlc.com/c2a16968

l´url de mon api est dans fichier tout seul

EDIT :
Ah c'est bon !
En fait mon response.data contient toute la réponse, mais mon response.data.data contient seulement les données dont j'ai besoin, j'ai donc du écrire response.data.date.favorite_conseils

Pouney Disign, il y a 4 ans

Je fais mon appel au moment ou j'ai besoin de mes données oui