Les questions sur la technique

[magellan]

Ici, c'est pour assister pour comprendre des concepts/architectures techniques... je laisse @thomade54 nous poser des questions et je vous invite à lui répondre aussi clairement que possibe

 

[thomade54]

Ici, c'est pour assister pour comprendre des concepts/architectures techniques... je laisse @thomade54 nous poser des questions et je vous invite à lui répondre aussi clairement que possibe

Hello !

Bon je vais enfin vous embêter avec des questions ici (encore merci @magellan d'avoir créé ce topic)

j'ai bientôt un contrôle sur les différents modules javascript qu'on a étudié. Les cours qu'on a eu ont été séparés en 2 parties :
- une partie vraiment orientée code (syntaxe de base, exécution js dans le navigateur, objets, prototypes, classes, erreurs, fonctions, modules, tableaux)
Là dedans y a déjà qlq notions un peu complexes à appliquer mais je comprends globalement le cours)

- une partie sur des éléments qui sont plus de l'architecture js : traitement des listes et tableaux (map, reduce, filter, find, forEach...), appels asynchrones, accès au API et fetch(), génération de templates (twig)

J'ai un peu de mal à comprendre comment s'utilisent certains de ces outils. Les exemples du cours ne m'aident pas beaucoup et connaissant le prof de la ressource, il va nous donner des sujets avec du code à compléter et un problème à résoudre et on devra utiliser le bon outil, avec la bonne syntaxe et les bonnes pratiques de code (traitement des url, export des fonctions, etc)
j'ai peur de m'embrouiller et de passer à côté des questions sans comprendre quel outil il cherche à nous faire utiliser, pour quel élément il cherche à vérifier qu'on a retenu la bonne manière de faire, etc...

Si certains ont des conseils, connaissances à me fournir, je suis preneur !
je peux fournir des extraits de mes cours si vous voulez plus de détails

 

[magellan]

C'est joliment vaste tout ça!

Exécution js dans le navigateur

objets
Techniquement... tout est plus moins objet en Js. Un objet, c'est une ressource que tu trimballes qui a des propriétés. Pour vulgariser à mort, tu as l'exemple de la voiture.
L'objet voiture a les propriétés suivantes
- Nb de portes
- Nb de roues
- Moteur
etc

Ces mêmes propriétés peuvent elles-mêmes être des objets

Reprenons le même exemple de voiture
On va avoir une collection de moteurs

let moteurs=['essence','diesel']
Objet voiture
voiture.options=['climatisation','ABS','direction assistee']
voiture.moteur=moteur[0] // On a donc le moteur essence

etc etc

L'idée de l'objet est que tu peux enrichir, traiter, tronquer et bidouiller le contenu selon ton gré. L'inconvénient... c'est qu'on peut y coller tout ce qu'on veut et surtout n'importe quoi!

Tu as des types primitifs. Par exemple

let t  ='taat' // c'est une String (texte)
let a = 155 // Du numérique
let b = [] // un tableau

Et techniquement ils sont tous des objets.

L'avantage fondamental d'un objet est l'héritage. Reprenons le concept de l'objet voiture. Une voiture est un véhicule...
Donc du dérives vehicule pour l'objet voiture.

Admettons que véhicule ait comme propriété terrestre true/false. Tu as donc un voiture.terrestre = true et un bateau.terrestre = false car terrestre provient de l'héritage de véhicule.

prototypes
Le prototype.. .c'est la racine même d'un objet
Si tu vois le concept de prototype, c'est pour en général l'enrichir. Admettons que tu prototypes l'objet Date. Tu peux enrichir le prototype en ajoutant une méthode à celui-ci. C'est pratique ET dangereux car tu peux AUSSI écraser la méthode native. Cela peut faire sens parfois, mais je proscris généralement cela sauf à savoir ce qu'on fait.

classes
C'est vicieux. Les classes permettent la gestion de l'héritage et de l'enrichissement.

Vous devez être connecté pour voir les liens.

Cette doc est SUPER bien foutue je trouve.

erreurs
Là c'est autre chose. Pour éviter de faire des cochonneries, on gère globalement son code avec des try/catch.
Grossièrement

try {
   monCode
}
catch (error) {
alert(error)
}

Selon l'erreur (error) on peut enrichir le retour d'alerte (là une popup) en mettant par exemple une procédure dédiée à cela (affichage d'une pop formatée, écriture de log...)

fonctions
Ah les fonctions... une fonction c'est un bout de code qu'on appelle pour qu'il soit modulaire.

Exemple concret: on veut calculer une tva et remonter le montant de celle-ci

let calctva(montant, taux) {
   return round((montant/100)*taux;2)
}

tu peux aussi déclarer une fonction imbriquée. L'avantage? Elle sera déclarée et exécutée que quand tu en auras l'usage.

Vous devez être connecté pour voir les liens.

(encore un excellent cours)


La méthode (fonction) retournera montant divisé par 100 multiplié par le taux le tout arrondi à deux chiffres après la virgule!

modules
tu crées un groupe de fonctions, ça te fait un fichier module qui te sert de réserve à méthodes!

 

[magellan]

- une partie sur des éléments qui sont plus de l'architecture js : traitement des listes et tableaux (map, reduce, filter, find, forEach...), appels asynchrones, accès au API et fetch(), génération de templates (twig)

Là y a à boire et à manger.
Les map (tableaux) ont des méthodes permettant de trier, filtrer, ranger, ou itérer.

Je m'explique:
Imagine une liste comme suit
let tab = ['a','b','c','d']

Tu veux pouvoir manipuler cette liste:

* le filter te permet d'exclure les données du tableau dans un nouveau
let resultatFiltre = tt.filter(item => item.valeur=== 'zz');
tt contient une liste d'éléments divers et tu ne veux que seules les valeurs ayant "zz" soient retournées.

* le reduce itère chaque élément. Cela peut te permettre, par exemple, d'en sommer toutes les valeurs. C'est redoutablement efficace quand tu as par exemple un énorme tableau, et que tu veux afficher ou connaitre la somme de tous les éléments.
Par exemple (repris chez Mozilla)

const array1 = [1, 2, 3, 4];
// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue,
);
//output: 10

* Le find est une recherche efficace pour retrouver un élément immédiatement
* Foreach est itérer dessus. L'avantage? Admettons que tu aies un tableau d'objets identiques, mais auquel tu veux appliquer un raisonnement. Reprenons le cas des voitures
let car1= New Voiture()
let car2= New Voiture()
...
// Tu as une série de voitures ensuite différentes et paramétrées

let liste = [car1,car2...]
liste.foreach(uneVoiture =>{
// La liste va tourner une à une, et chaque item sera "uneVoiture"
if(uneVoiture.revisee==false){
alert("La voiture " + uneVoiture.immat" + " n'est pas révisée")
}
})

* tu as le push qui ajoute à droite, unshift à gauche... il y a plein de possibilités diverses et variées de jouer avec les map.

asynchrone

Le Web est en principe le plus ansynchrone possible. En gros, chaque action déclenche de l'aller-retour, et la nécessité de gérer le DOM (comprendre "l'affichage" sur le web) requiert des procédure soit synchrones (React comme framework le fait pour toi) soit de l'asynchrone. Très schématiquement? si tu lances une procédure qui appelle un machin asynchrone, le code se moquera de savoir si la méthode en question est terminée ou non. En revanche, si c'est synchrone, elle attendra sagement la fin du code.

En pseudo code : cas asynchrone
Etape 1

function onTest() {
//ici début du code
//Appel de "JesuisAsync"
JesuisAsync()
/JesuisAsync s'exécute, mais Ontest va continuer sans attendre
alert("on est passé")
}

Etape 2

function onTest() {
//ici début du code
//Appel de "Jesuissync"
Jesuissync()
/Jesuissync s'exécute, et Ontest va attendre que Jesuisync soit terminé pour avancer)
alert("on est passé. Jesuissync est fini")
}

fetch()
Là... c'est que tu appelles un back pour récupérer de la donnée. En gros, tu donnes l'ordre au back de répondre quelque chose de structuré. Par exemple, tu vas appeler un lien

return fetch(fetchRequest).then(
          function (response) {
// On a la response qui peut être en Json par exemple
}}

Donc le fetch dépendra énormément de ce que tu veux faire. Quoi qu'il en soit il faut un back pour répondre à cette commande.

 

[thomade54]

C'est joliment vaste tout ça!

Exécution js dans le navigateur

objets
Techniquement... tout est plus moins objet en Js. Un objet, c'est une ressource que tu trimballes qui a des propriétés. Pour vulgariser à mort, tu as l'exemple de la voiture.
L'objet voiture a les propriétés suivantes
- Nb de portes
- Nb de roues
- Moteur
etc

Ces mêmes propriétés peuvent elles-mêmes être des objets

Reprenons le même exemple de voiture
On va avoir une collection de moteurs

let moteurs=['essence','diesel']
Objet voiture
voiture.options=['climatisation','ABS','direction assistee']
voiture.moteur=moteur[0] // On a donc le moteur essence

etc etc

L'idée de l'objet est que tu peux enrichir, traiter, tronquer et bidouiller le contenu selon ton gré. L'inconvénient... c'est qu'on peut y coller tout ce qu'on veut et surtout n'importe quoi!

Tu as des types primitifs. Par exemple

let t  ='taat' // c'est une String (texte)
let a = 155 // Du numérique
let b = [] // un tableau

Et techniquement ils sont tous des objets.

L'avantage fondamental d'un objet est l'héritage. Reprenons le concept de l'objet voiture. Une voiture est un véhicule...
Donc du dérives vehicule pour l'objet voiture.

Admettons que véhicule ait comme propriété terrestre true/false. Tu as donc un voiture.terrestre = true et un bateau.terrestre = false car terrestre provient de l'héritage de véhicule.

prototypes
Le prototype.. .c'est la racine même d'un objet
Si tu vois le concept de prototype, c'est pour en général l'enrichir. Admettons que tu prototypes l'objet Date. Tu peux enrichir le prototype en ajoutant une méthode à celui-ci. C'est pratique ET dangereux car tu peux AUSSI écraser la méthode native. Cela peut faire sens parfois, mais je proscris généralement cela sauf à savoir ce qu'on fait.

classes
C'est vicieux. Les classes permettent la gestion de l'héritage et de l'enrichissement.

Vous devez être connecté pour voir les liens.

Cette doc est SUPER bien foutue je trouve.

erreurs
Là c'est autre chose. Pour éviter de faire des cochonneries, on gère globalement son code avec des try/catch.
Grossièrement

try {
   monCode
}
catch (error) {
alert(error)
}

Selon l'erreur (error) on peut enrichir le retour d'alerte (là une popup) en mettant par exemple une procédure dédiée à cela (affichage d'une pop formatée, écriture de log...)

fonctions
Ah les fonctions... une fonction c'est un bout de code qu'on appelle pour qu'il soit modulaire.

Exemple concret: on veut calculer une tva et remonter le montant de celle-ci

let calctva(montant, taux) {
   return round((montant/100)*taux;2)
}

tu peux aussi déclarer une fonction imbriquée. L'avantage? Elle sera déclarée et exécutée que quand tu en auras l'usage.

Vous devez être connecté pour voir les liens.

(encore un excellent cours)


La méthode (fonction) retournera montant divisé par 100 multiplié par le taux le tout arrondi à deux chiffres après la virgule!

modules
tu crées un groupe de fonctions, ça te fait un fichier module qui te sert de réserve à méthodes!

Alors un grand merci à toi pour tout ça.
Globalement la première partie du cours j'avais plutôt compris, mais bizarrement tes explications sont bien mieux faites que celles de mes cours.
Y en a juste une que je comprends vraiment pas, c'est la notion de prototype, ton explication est très bien mais juste une question : est-ce qu'on peut comparer le rapport prototype -> objet en JS, à un rapport interface -> classe en PHP ?

Sinon c'est surtout la deuxième partie du cours ou je suis un peu perdu.

 

[magellan]

Les API
D'abord c'est quoi une API: c'est une liste de jeux de commandes qui permettent de standardiser le code. Très vulgairement dit, ce sont des librairies. En pratique, c'est bien plus riche et complexe.

Dans l'esprit, si tu appelles une API, c'est que tu veux faire un truc que le JS simple ne fait pas.. sauf à se le coder soi-même.
Exemples d'API assez classiques
- Gestion multimédia comme le micro/cam (classique pour les tchat vidéo par exemple)
- Tout ce qui touche au HTML5/CSS pour faire des jeux
- Gestionnaire de fichiers
- Gestion de la vidéo (Youtube, H264...)

Une API, bien utilisée ce sont des heures entières de simplification des problèmes! On appelle le bousin, on lui passe les bons éléments et... c'est parti!

Note tout de même qu'on est loiiin dans la programmation. Je n'utilise moi même pas une seule API Faute d'en avoir l'usage dans mes projets, c'est dire! Mais c'est bien de savoir que ça existe.

 

[thomade54]

Un grand merci à toi @magellan pour ton aide sur ce sujet. J'ai compris des notions importantes que tu m'as expliqué différemment.
Je ne suis pas sûr d'avoir très bien réussi mon partiel, mais j'aurai certainement une meilleure note que si tu ne m'avais pas aidé.

J'ai un autre sujet sur lequel je sollicite vos connaissances pour m'aider
On a un gros cours dédié à Docker, aux conteneurs et aux notions de virtualisation.

Et il y a plusieurs aspects de cette notion que je n'ai pas compris
- l' "état" d'un conteneur, la sauvegarde de cet état et des éléments modifiés dans le conteneur
- lier des services (images) "complémentaires" dans un conteneur docker
- la gestion d'un volume bindé lié à un conteneur (j'ai l'impression que ça marche une fois sur 2 et que les volumes ne s'associent pas correctement)
- le fonctionnement d'un réseau de conteneurs distincts
- le fonctionnement de docker compose

Je comprends le principe général de docker mais je me sens incapable de répondre à des questions précises sur le fonctionnement détaillé d'un conteneur et les différents outils liés.

Si des gens ici ont l'habitude d'utiliser docker, ont de la documentation bien faite, ou des conseils/expérience à me partager pour m'aider, je suis preneur !

Merci d'avance pour vos réponses !

 

[magellan]

Ahhhh Docker... la modularité qui permet à la fois d'être ultra pratique et de rendre dingue ceux qui en font la maintenance!

Déjà c'est quoi Docker?
Un Docker, pour décrire cela vulgairement c'est une gestion de containers. Pour être plus explicite, imagine toi un environnement complet d'exécution que tu mets dans un container virtuel et que tu associes à des containers complémentaires que tu regroupes. (d'où le terme de docker...)
- Plus concrètement: quand tu configures un Docker, tu lui spécifies exactement ce dont tu as besoin pour faire fonctionner tes applications que le container contiendra. Admettons une version de Java, un serveur PHP, une base MySQL... Tu pourras monter plusieurs containers Docker avec des versions précises pour chaque contenu (admettons MySQL), de sorte à monter rapidement une version virtuelle précise, et donc aller bien plus vite pour tester et valider un environnement sans rien casser.

Comment ça bind, stocker, état...
Là c'est joliment vaste. Mais pour expliciter.
- Quand tu te montes un Docker, tu associes des volumes, des composants, des arborescences et une config qui est propre à un container précis. De cette manière, tu cloisonnes tout.
- Quand tu veux affiner, tu peux prendre un container et lui brancher des briques supplémentaires par liaison de service par exemple. Dans l'idée c'est "j'avais une base SQL en 6.3. Je veux QUE la BDD en mise à jour sans rien casser d'autre". Donc, tu rends modulaire la BDD, et tu débranches la 6.3 pour connecter la 6.4. En cas de souci, procédure inverse sans avoir à tout démanteler comme cela serait à faire sur un environnement classique.
- Les états d'un Docker sont un peu comme l'état d'une VM. En ligne, offline... C'est très schématisé et vulgarisé à outrance, mais un container Docker c'est comme avoir une VM dans une VM...

 

[magellan]

Vous devez être connecté pour voir les medias.

La vidéo est assez propre je trouve.

 

[thomade54]

Ahhhh Docker... la modularité qui permet à la fois d'être ultra pratique et de rendre dingue ceux qui en font la maintenance!

Déjà c'est quoi Docker?
Un Docker, pour décrire cela vulgairement c'est une gestion de containers. Pour être plus explicite, imagine toi un environnement complet d'exécution que tu mets dans un container virtuel et que tu associes à des containers complémentaires que tu regroupes. (d'où le terme de docker...)
- Plus concrètement: quand tu configures un Docker, tu lui spécifies exactement ce dont tu as besoin pour faire fonctionner tes applications que le container contiendra. Admettons une version de Java, un serveur PHP, une base MySQL... Tu pourras monter plusieurs containers Docker avec des versions précises pour chaque contenu (admettons MySQL), de sorte à monter rapidement une version virtuelle précise, et donc aller bien plus vite pour tester et valider un environnement sans rien casser.

Comment ça bind, stocker, état...
Là c'est joliment vaste. Mais pour expliciter.
- Quand tu te montes un Docker, tu associes des volumes, des composants, des arborescences et une config qui est propre à un container précis. De cette manière, tu cloisonnes tout.
- Quand tu veux affiner, tu peux prendre un container et lui brancher des briques supplémentaires par liaison de service par exemple. Dans l'idée c'est "j'avais une base SQL en 6.3. Je veux QUE la BDD en mise à jour sans rien casser d'autre". Donc, tu rends modulaire la BDD, et tu débranches la 6.3 pour connecter la 6.4. En cas de souci, procédure inverse sans avoir à tout démanteler comme cela serait à faire sur un environnement classique.
- Les états d'un Docker sont un peu comme l'état d'une VM. En ligne, offline... C'est très schématisé et vulgarisé à outrance, mais un container Docker c'est comme avoir une VM dans une VM...

Je viens de relire tout ça à froid.
La théorie me semble claire, même si je dois encore apprendre rigoureusement les notions techniques pour parer aux questions du partiel.
Juste une question, si tu as des astuces/méthodes pour écrire et exécuter facilement un dockerfile/ docker-compose, ainsi que pour utiliser la commande docker build, je suis preneur car je perds souvent du temps à chercher les bons paramètres et la bonne syntaxe quand je dois le faire

 

[magellan]

Perso je manipule très peu voire pas du tout Docker donc je ne vais pas me lancer sur un sujet que je ne maitrise pas assez.

 

[thomade54]

Hello, petite question javascript :
je programme une appli web en JS qui récupère des données d'une API et les affiche.
J'ai programmé la fonction suivante pour parser les données que je veux afficher dans une <Map> plus simple à manipuler en JS

function parseEntries(data) {
    let datamap = Object.values(data.entrees).map(item => ({
        id: item.entree.id,
        nom: item.entree.nom,
        prenom: item.entree.prenom,
        href: item.links.self.href,
        departement : item.entree.departements
    }));

    //console.log(datamap);
    return datamap;
}

Pour les premiers items, tout fonctionne parfaitement bien.
Mais pour le département, je n'arrive pas à le récupérer. En cause, l'API qui ressemble à ça : (exemple ici pour une entrée, après traitement par une fonction qui fetch les données)

0:
    departement: Array(1)
        0:
            NomDep: "Administration"
            [[Prototype]]: Object
        length: 1
        [[Prototype]]: Array(0)
    href: "/entrees/3"
    id: 3
    nom: "Bernard"
    prenom: "Marie"
    [[Prototype]]: Object

Et dans ma fonction d'affichage, j'arrive à accéder à toutes les variables sauf à entree.departement[].nomDep , la variable reste en undefined alors qu'elle existe dans la console.
J'ai essayé de la traiter directement dans le parsing mais mettre une fonction map à l'intérieur d'une fonction map, ça ne fonctionne pas très bien...

Une idée de comment je pourrais résoudre ça ?
Merci d'avance !

 

[magellan]

Tu rates un truc si je comprends bien:

departement : item.entree.departements <--- cela ressemble à une map dans la map ça...

donc je soupçonne que l'impression répond correctement en log mais quand tu affectes ta variable le machin dit "hé attends c'est quoi l'entité?"

Car...
Tu mets departement[] <-- cela veut dire un tableau/map.
Donc il faut savoir laquelle valeur de cette map tu as!

Explication simplifiée (je mets la correction en spoiler pour te faire bosser)
Tes départements sont listés dans une array... donc l'appel sans préciser à quelle position tu fais appel ne peut QUE merder...

Petit indice

departement: Array(1)
0:
NomDep: "Administration"

Spoiler

item.entree.departement[0].NomDep <-- là ça va marcher car tu as la première position de la map de departements (0) et le NomDep associé

Donc concrètement
Quand tu traites une map tu dois soit itérer dessus (le foreach par exemple) OU identifier une position précise dedans.

Dans ton exemple, on fixe en "dur" la taille de cette map via ce que je t'ai mis en indice ... à savoir une Array de 1 dont la position 0 (puisqu'on compte à partir de zéro en Js...) contient une valeur pour NomDep.

 

[Jolerigolo]

HS : j'adore ce topic. Chaque fois que je le lis, je sais pourquoi je n'ai pas fait dev......

 

[SergioVE]

HS : j'adore ce topic. Chaque fois que je le lis, je sais pourquoi je n'ai pas fait dev......

Et encore... une bonne page html + JS + asp ou php, ça te ferait rêver...

 

[thomade54]

Tu rates un truc si je comprends bien:

departement : item.entree.departements <--- cela ressemble à une map dans la map ça...

donc je soupçonne que l'impression répond correctement en log mais quand tu affectes ta variable le machin dit "hé attends c'est quoi l'entité?"

Car...
Tu mets departement[] <-- cela veut dire un tableau/map.
Donc il faut savoir laquelle valeur de cette map tu as!

Explication simplifiée (je mets la correction en spoiler pour te faire bosser)
Tes départements sont listés dans une array... donc l'appel sans préciser à quelle position tu fais appel ne peut QUE merder...

Petit indice

Spoiler

item.entree.departement[0].NomDep <-- là ça va marcher car tu as la première position de la map de departements (0) et le NomDep associé

Donc concrètement
Quand tu traites une map tu dois soit itérer dessus (le foreach par exemple) OU identifier une position précise dedans.

Dans ton exemple, on fixe en "dur" la taille de cette map via ce que je t'ai mis en indice ... à savoir une Array de 1 dont la position 0 (puisqu'on compte à partir de zéro en Js...) contient une valeur pour NomDep.

Salut magellan et merci pour ta réponse.
Alors effectivement y a un problème par rapport à la position puisque je passe d'une variable 'undefined' à une chaîne vide.
Mais le problème, c'est qu'il y a des cas ou une entree est associée à plusieurs départements. J'ai essayé de gérer ça avec une fonction pour rassembler les éléments, mais ça ne fonctionne pas non plus.
Et j'ai aussi essayé d'imbriquer une map dans une map mais du coup l'index n'est plus accessible.
Je veux dire, il n'y a pas un moyen plus simple de convertir les valeurs en une chaine de caractères ?
Parce que pour info actuellement ça donne ça dans ma fonction d'affichage :

function afficherAnnuaire(annuaire) {
    const annuaireDiv = document.getElementById('annuaire');
    annuaireDiv.innerHTML = `
        <!--<div id="divbtnTri"><button id="btnTrier">Trier (A...Z)</button></div>-->
        `;
    annuaire.forEach(entree => {
        const personDiv = document.createElement('div');
        personDiv.classList.add('entree');
        const dept = entree.departement.map(d => ({
            dpt : d.nomDep
        }));
        personDiv.innerHTML = `
            <div id="entree">
            <h2>${entree.nom}, ${entree.prenom}</h2>
            <p>Département : ${dept.dpt}</p>
            <p class="detailsEntree" data-id="${entree.id}">Voir la fiche détaillée</p>
            </div>
        `;

        annuaireDiv.appendChild(personDiv);
    });

 

[magellan]

C'est là où tu te compliques quelque peu la vie.
Passe étape par étape.

Commence déjà par saisir un truc élémentaire à savoir que tes propriétés du forEach sont celles du composant que tu itères.

data.entrees.foreach(uneEntree=> ({
// A ce niveau chaque uneEntree est une des valeurs de la liste des entrées

// ici donc tu as une des valeurs où pour les sous valeurs tu vas AUSSI itérer
uneEntree.departement.foreach(unDepartement=>{
let lib = unDepartement.nomDep;
Console.log('j'ai le lib : ", lib)
})
 }));

Donc déjà là tu as tes données item par item

Ensuite tu reprends la même méthode pour construire ton retour
Si tu veux en faire un table songe de manière rigoureuse en SORTANT les données de l'élément que tu traites. Ne mélange PAS traitement valeur par valeur mais objet par objet

concrètement?
- Structure sur un schéma ce que tu dois afficher (les div et compagnie) pour UNE valeur. En gros, comment j'affiche pour une entrée de mes datas j'affiche les x itérations des départements qui sont inclus dans l'entrée

Par exemple
Entree contient 3 départements: comment je construis la DIV et son contenu?

- Ensuite si je sais ça, comment faire en sorte que l'inclusion se fasse donc... en fin de code et non à l'arrache de partout?

Je te laisse commencer par itérer les deux map avec des console.log pour ensuite inclure le HTML

 

[thomade54]

C'est là où tu te compliques quelque peu la vie.
Passe étape par étape.

Commence déjà par saisir un truc élémentaire à savoir que tes propriétés du forEach sont celles du composant que tu itères.

data.entrees.foreach(uneEntree=> ({
// A ce niveau chaque uneEntree est une des valeurs de la liste des entrées

// ici donc tu as une des valeurs où pour les sous valeurs tu vas AUSSI itérer
uneEntree.departement.foreach(unDepartement=>{
let lib = unDepartement.nomDep;
Console.log('j'ai le lib : ", lib)
})
 }));

Donc déjà là tu as tes données item par item

Ensuite tu reprends la même méthode pour construire ton retour
Si tu veux en faire un table songe de manière rigoureuse en SORTANT les données de l'élément que tu traites. Ne mélange PAS traitement valeur par valeur mais objet par objet

concrètement?
- Structure sur un schéma ce que tu dois afficher (les div et compagnie) pour UNE valeur. En gros, comment j'affiche pour une entrée de mes datas j'affiche les x itérations des départements qui sont inclus dans l'entrée

Par exemple
Entree contient 3 départements: comment je construis la DIV et son contenu?

- Ensuite si je sais ça, comment faire en sorte que l'inclusion se fasse donc... en fin de code et non à l'arrache de partout?

Je te laisse commencer par itérer les deux map avec des console.log pour ensuite inclure le HTML

Je viens d'essayer, j'ai fait le foreach sur les entrées et sur les départements, et je me retrouve quand même avec une variable undefined.
Je vais commencer à croire que c'est l'API qui est mal fichue.
itérer l'affichage d'une div ou tout autre élément HTML, j'ai compris comment ça marche, j'y arrive pour d'autres éléments. C'est vraiment le fait de récupérer materiellement la valeur de nomDep qui me pose problème.

Vous devez être connecté pour voir les pièces jointes.

Comme tu peux le voir, la variable est bien présente à droite dans la console et donc dans ce que l'affichage traite, mais dans les fiches elle n'est pas là.

 

[magellan]

Je viens d'essayer, j'ai fait le foreach sur les entrées et sur les départements, et je me retrouve quand même avec une variable undefined.
Je vais commencer à croire que c'est l'API qui est mal fichue.
itérer l'affichage d'une div ou tout autre élément HTML, j'ai compris comment ça marche, j'y arrive pour d'autres éléments. C'est vraiment le fait de récupérer materiellement la valeur de nomDep qui me pose problème.

Vous devez être connecté pour voir les pièces jointes.

Comme tu peux le voir, la variable est bien présente à droite dans la console et donc dans ce que l'affichage traite, mais dans les fiches elle n'est pas là.

Je ne pense pas que ce soit pourri. Il faudrait que je puisse t'aider sur ton code. Vers quelle heure tu aurais une dispo?

 

[SergioVE]

Quand ça merde :
- tu débutes, tu cherches ton erreur,
- tu as pris un peu d'assurance, tu accuses l'OS, l'interpréteur, le compilateur, l'API...
- tu as pris une bonne expérience, tu cherches ton erreur,
- tu as pris une véritable et longue expertise, tu accuses l'OS, l'interpréteur, le compilateur, l'API...