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": []
                    }
                ]
            }
        ]
    }
}

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

https://controlc.com/9636357f (désolé pour l'upload, openclassroom ne me permet pas de coller ce bout de code...)

ç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 !

-
Edité par PouneyDisign 20 octobre 2021 à 16:40:01

Bonjour est-ce que tu peut nous posté le contenue de ton composant, si quand tu fait un tutorials.map l'erreur t'indique TypeError: tutorials.map is not a function, c'est automatiquement que tutorials ne contient pas un tableau.

Tu peut au dessus du return de la fonction faire un console.log de tutorials pour voir  ce qu'il contient.

Au moment où tu récupère tes données JSON tu doit donnée à la constantes tutorials la valeur de response.data.favorite_conseils pour qu'il ne contienne que le tableau JSON, où alors au moment de mappé tu doit appliqué le map sur tutorials.data.favorite_conseils pour itéré sur le tableau. 

SamuelGaborieau3 a écrit:

Bonjour est-ce que tu peut nous posté le contenue de ton composant, si quand tu fait un tutorials.map l'erreur t'indique TypeError: tutorials.map is not a function, c'est automatiquement que tutorials ne contient pas un tableau.

Tu peut au dessus du return de la fonction faire un console.log de tutorials pour voir  ce qu'il contient.

Au moment où tu récupère tes données JSON tu doit donnée à la constantes tutorials la valeur de response.data.favorite_conseils pour qu'il ne contienne que le tableau JSON, où alors au moment de mappé tu doit appliqué le map sur tutorials.data.favorite_conseils pour itéré sur le tableau. 

Merci pour ta réponse, voici le contenu de mon composant entier :
https://controlc.com/c2a16968

Et voici le console.log de tutorials :

mais si je fais console.log de response.data j'obtient bien ce que j'ai dans mon retour d'API

Et si tu logges response.data.favourite_conseils ?

Ici il semble que tutorials soit un array vide. Je n'y connais hélas pas assez en react pour pouvoir aider :/

LucasWerquin a écrit:

Et si tu logges response.data.favourite_conseils ?

Ici il semble que tutorials soit un array vide. Je n'y connais hélas pas assez en react pour pouvoir aider :/

Hey !
Merci de m'aider tout de même.
Je ne peux pas log ça car même problème : je n'ai pas la propriété favorite_conseils :

Et si tu fais un console.log(response.data.favorite_conseils) avant d'appeler la fonction setTutorials ?

LucasWerquin a écrit:

Et si tu fais un console.log(response.data.favorite_conseils) avant d'appeler la fonction setTutorials ?

Il me dit undifinded dans ma console.
Mais il y a quelque chose que je trouve bizarre, quand je fais un console.log de response.data il m'affiche bien mon retour d'API, mais quand je fais console.log de tutorials après avoir fait setTutorials(response.data); je n'ai pas le même retour, du moins pas a chaque fois je comprend pas...

Undefined ?

Attends, juste avant la ligne qui appelle setTutorials, donc dans ton .then(response => {}), si tu fais console.log(response.data), tu as quoi ?

Bon, pour le peu que je comprend, le souci se situerait dans la fonction setTutorials(), ou dans le retour de tutorialDataService.getAll().
Quoi qu'il en soit, tutorials se voit bien attribuer le type array, mais le contenu n'est pas défini.

Et là j'ai beau regarder ton code, je ne comprend pas, n'ayant aucune connaissance dans le fonctionnement de react.

LucasWerquin a écrit:

Undefined ?

Attends, juste avant la ligne qui appelle setTutorials, donc dans ton .then(response => {}), si tu fais console.log(response.data), tu as quoi ?

Bon, pour le peu que je comprend, le souci se situerait dans la fonction setTutorials(), ou dans le retour de tutorialDataService.getAll().
Quoi qu'il en soit, tutorials se voit bien attribuer le type array, mais le contenu n'est pas défini.

Et là j'ai beau regarder ton code, je ne comprend pas, n'ayant aucune connaissance dans le fonctionnement de react.

C'est vrais que React c'est particulier.
J'ai déjà tenté un console.log de response.data avant le setTutorials et il est bon, j'ai bien un succes avec ma data dedans... mais rien dans tutorials après le setTutorials

Bon, ben en toute logique c'est setTutorials qui va pas bien.
J'enfonce une porte ouverte, je parie, hein ?
Bon courage.

LucasWerquin a écrit:

Bon, ben en toute logique c'est setTutorials qui va pas bien.
J'enfonce une porte ouverte, je parie, hein ?
Bon courage.

Mais des fois tutorials s'affiche correctement dans les logs, mais pas systématiquement c'est incompréhensible

Bonjour est-ce que tu nous as posté la photo du log complet où uniquement la partie favourite_conseils du log parce que dans la fonction retrieveTutorials tu affecte à tutorials la valeur response.data qui selon le format de la réponse que tu nous à montré ne contient pas un tableau mais un objet.

const retrieveTutorials = () => {
    TutorialDataService.getAll()
    .then(response => {
	    setTutorials(response.data);
    	console.log(tutorials);
    })
    .catch(e => {
    	console.log(e);
    });
};

Cela normalement doit posé problème avec cette partie du rendu qui essaie de mappé directement l'objet:

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

Si typescript te dit que la propriété favourite_conseils n'existe pas ces que le type de donnée que renvoi la méthode getAll de TutorialDataService et  incomplète car la propriété devrait existait, est ce que tu peut nous montré le code de la fonction getAll de l'objet TutorialDataService (surtout pour voir la valeur de retour) la valeur de retour doit être quelque chose comme cela:

const TutorialDataService = {

	// là où un objet devrait définir la propriété favorite_conseil
	getAll(): Promise<UnObjet> {
    	// ...
        // ...
    }
}

Et UnObjet devrait être un type qui définit le format de la grappe JSON qui et renvoyait par le service, quelque chose comme cela:

type UnObjet = {
	success: boolean;
	data: {
    	favourite_conseils: {
        	id: number;
            title: string;
            speciality: number[];
            attachements: string[];
            isFavourite: boolean;
            isPack: boolean;
            message: string;
        }[]
    }
}

-
Edité par SamuelGaborieau3 21 octobre 2021 à 19:00:25

SamuelGaborieau3 a écrit:

Bonjour est-ce que tu nous as posté la photo du log complet où uniquement la partie favourite_conseils du log parce que dans la fonction retrieveTutorials tu affecte à tutorials la valeur response.data qui selon le format de la réponse que tu nous à montré ne contient pas un tableau mais un objet.

const retrieveTutorials = () => {
    TutorialDataService.getAll()
    .then(response => {
	    setTutorials(response.data);
    	console.log(tutorials);
    })
    .catch(e => {
    	console.log(e);
    });
};

Cela normalement doit posé problème avec cette partie du rendu qui essaie de mappé directement l'objet:

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

Si typescript te dit que la propriété favourite_conseils n'existe pas ces que le type de donnée que renvoi la méthode getAll de TutorialDataService et  incomplète car la propriété devrait existait, est ce que tu peut nous montré le code de la fonction getAll de l'objet TutorialDataService (surtout pour voir la valeur de retour) la valeur de retour doit être quelque chose comme cela:

const TutorialDataService = {

	// là où un objet devrait définir la propriété favorite_conseil
	getAll(): Promise<UnObjet> {
    	// ...
        // ...
    }
}

Et UnObjet devrait être un type qui définit le format de la grappe JSON qui et renvoyait par le service, quelque chose comme cela:

type UnObjet = {
	success: boolean;
	data: {
    	favourite_conseils: {
        	id: number;
            title: string;
            speciality: number[];
            attachements: string[];
            isFavourite: boolean;
            isPack: boolean;
            message: string;
        }[]
    }
}

-
Edité par SamuelGaborieau3 il y a environ 14 heures

Merci pour ta réponse très complète !

En effet, mon retour contient d’autres objects que favorite_conseils mais dans ce cas là c’est celui-ci uniquement que je veux récupérer et j’ai fini par comprendre aussi que c’est à cause de la syntaxe de ce retour que mon code ne fonctionnera pas (c’est un exple trouvé sur le net adapté au mieux à ma structure, j’ai réussi avec le login mais là pour un GET puis display c’est plus compliqué.

Voici mon code de service et mon interface :

const getAll = () => {
return http.get("/conseils/default_conseils");
};

#Voici l’interface :

export default interface ITutorialData {
  id?: any | null,
  username: string,
  password: string,
  token: string,
  message: string,
  title: string,
}

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

-
Edité par PouneyDisign 22 octobre 2021 à 13:03:46