IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

Utiliser la méthode map()


Sujet :

React

  1. #1
    Membre expérimenté
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    3 132
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2005
    Messages : 3 132
    Par défaut Utiliser la méthode map()
    Bonjour,

    Je parcourir des donnes que je recois grâce à une API.
    Je dois récupérer les mesures des stations pour les afficher dans un graph.

    Si vous regarder ce json ici https://api.eco-sensors.ch/dashboard/getstation/1, sous

    stations:measures:datasets j'aimerais réécupérer data: . C'est le contenu de data que je dois passer dans mon componment Charts.

    Voici d'autres info:

    Ici, je fais ma requete sur mon serveur et les données sont stockée dans getstation

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    const {data: getstation, isFetching} = useFetchQuery("/getstation/[id]", {id: params.id})
    Ici je stock dans 'const measures', toutes les mesures de ma station afin d'utiliser que ce que j'ai besoin

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    const measures = getstation?.stations?.[0].measures
    Je veux donc maintenant parcourir 'measures' pour récupérer les valeurs, sans succès. 'measures' contient les mesures de trois capteurs.
    Donc je map() 'measures' pour avoir les measures pour chaque capteur, puis je passe data dans mon componemnt

    Je commence ainsi
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    <ThemedText>{measures?.[0].datasets?.label}</ThemedText>
    <View style={{alignItems:'center'}}>
                  {measures?.map((d,i) => {
                        d.datasets?.data
                      }
                    )
                  }
     
     </View>
    Nom : Screenshot 2025-01-05 at 00.22.19.png
Affichages : 70
Taille : 101,5 Ko

    Nom : Screenshot 2025-01-05 at 00.23.30.png
Affichages : 63
Taille : 98,4 Ko

    Mais pourtant VS Code semble ne pas aimer ceci
    Nom : Screenshot 2025-01-05 at 00.25.01.png
Affichages : 64
Taille : 189,9 Ko

    Je ne comprends pas pourquoi???

    En attendans, je vais essayer de faire autrement, mais j'aimerais bien comprendre comment le faire ainsi

    Belle soirée

  2. #2
    Membre expérimenté
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    3 132
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2005
    Messages : 3 132
    Par défaut
    Par exemple, j'ai ceci qui fonctionne... et qui ne fonctionne pas.

    Avant le return, j'ai fait ca

    Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     const charts:any = []
        measures?.map((d,i) => {
          console.log("C")
          console.log(i)
          console.log(d.datasets?.data)
          charts.push(d.datasets?.data)
         })

    mais plus bas ceci ne va pas

    {charts?.map((c,i) =>{
    <LineChart key={i} data={c} />
    })}

    Je crois que je n'arrive pas à faire un tablea imbriqué

    En d'autres mots, mon console.log(), ci dessus, affiche l'équivalence de ca

    Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
     
    const lineData = [
          {value: 0, dataPointText: '0'},
          {value: 10, dataPointText: '10'},
          {value: 8, dataPointText: '8'},
          {value: 58, dataPointText: '58'},
          {value: 56, dataPointText: '56'},
          {value: 78, dataPointText: '78'},
          {value: 74, dataPointText: '74'},
          {value: 98, dataPointText: '98'},
        ];
     
        const lineData2 = [
          {value: 0, dataPointText: '0'},
          {value: 20, dataPointText: '20'},
          {value: 18, dataPointText: '18'},
          {value: 40, dataPointText: '40'},
          {value: 36, dataPointText: '36'},
          {value: 60, dataPointText: '60'},
          {value: 54, dataPointText: '54'},
          {value: 85, dataPointText: '85'},
        ];

    Mais je dois avoir tout cela dans un tableau que je vais ensuite parcourir pour exploiter chaque set de mesures

    Ici des mesures de deux capteur
    Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
     
    const lineData = [[ // capteur 1
          {value: 0, dataPointText: '0'},
          {value: 10, dataPointText: '10'},
          {value: 8, dataPointText: '8'},
          {value: 58, dataPointText: '58'},
          {value: 56, dataPointText: '56'},
          {value: 78, dataPointText: '78'},
          {value: 74, dataPointText: '74'},
          {value: 98, dataPointText: '98'},
        ],
        [ // Capteur 2
          {value: 0, dataPointText: '0'},
          {value: 20, dataPointText: '20'},
          {value: 18, dataPointText: '18'},
          {value: 40, dataPointText: '40'},
          {value: 36, dataPointText: '36'},
          {value: 60, dataPointText: '60'},
          {value: 54, dataPointText: '54'},
          {value: 85, dataPointText: '85'},
        ]];

    Puis donc, je le parcours pour afficher deux graph. Si j'arrivais faire ca, ca serait top

  3. #3
    Membre expérimenté
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    3 132
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2005
    Messages : 3 132
    Par défaut
    Je suis toujours bloqué avec ca.

    J'avance et ecci me semble bien pour faire mon tableau

    Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const charts:any = []
        measures?.map((d,i) => {
          console.log("A")
          console.log(i)
          console.log(d.datasets?.data)
     
          charts[i] =d.datasets?.data
     
          console.log("B")
          console.log(i)
          console.log(charts, [])
     
         })
         console.log("CCC:")
         console.log(charts)

    Je vois que ceci se construit bien

    CCC:
    (NOBRIDGE) LOG [[{"date": "2021-04-30 11:44:11", "label": "11:44", "value": 9.7}, {"date": "2021-04-30 11:57:24", "label": "11:57", "value": 10.1}, {"date": "2021-04-30 12:10:38", "label": "12:10", "value": 9.9}, {"date": "2021-04-30 12:23:51", "label": "12:23", "value": 9.5}, {"date": "2021-04-30 12:37:05", "label": "12:37", "value": 9.1}], [{"date": "2021-04-30 11:44:11", "label": "11:44", "value": 9.4}, {"date": "2021-04-30 11:57:24", "label": "11:57", "value": 9.8}, {"date": "2021-04-30 12:10:38", "label": "12:10", "value": 9.6}, {"date": "2021-04-30 12:23:51", "label": "12:23", "value": 9.2}, {"date": "2021-04-30 12:37:05", "label": "12:37", "value": 8.8}], [{"date": "2021-04-30 11:44:11", "label": "11:44", "value": 3.81}, {"date": "2021-04-30 11:57:24", "label": "11:57", "value": 3.82}, {"date": "2021-04-30 12:10:38", "label": "12:10", "value": 3.81}, {"date": "2021-04-30 12:23:51", "label": "12:23", "value": 3.82}, {"date": "2021-04-30 12:37:05", "label": "12:37", "value": 3.82}]]
    Maintenant je suis mon return, je vois que mon foreach n'affiche rien et me retourne une erreur et mon map n'affiche rien

    Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
     
     
    return (
            <RootView>
     
     
              <Card style={[styles.card, {backgroundColor: "#FFFFFF"}]}>
                <ThemedText variant="subtitle1">{station?.station_longname}</ThemedText>
     
                <View style={{alignItems:'center'}}>
     
                  <ThemedText>{measures?.[0].datasets?.label}</ThemedText>
     
                  {charts.foreach((ttt) => {
                      <View>
                        <Text>TTTT ➡️</Text>
                      </View>
                    })}
     
                  {/*
          
                  {charts?.map((dd:any,ii) => {
                      {dd.datasets?.data}
                    })}
                  */}
     
     
     
                </View>
     
     
     
              </Card>
            </RootView>
          )

Discussions similaires

  1. Conditions d'utilisation de Google Map
    Par 585512 dans le forum Services
    Réponses: 3
    Dernier message: 12/03/2007, 18h50
  2. [DEBUTANT] Utiliser le type Map
    Par Battosaiii dans le forum Collection et Stream
    Réponses: 4
    Dernier message: 05/10/2006, 18h09
  3. utilisation des std::map
    Par guillaume16 dans le forum SL & STL
    Réponses: 9
    Dernier message: 25/07/2006, 17h56
  4. Réponses: 5
    Dernier message: 26/05/2005, 16h40
  5. Quel format de fichier utiliser pour les maps ?
    Par fb57 dans le forum OpenGL
    Réponses: 3
    Dernier message: 23/09/2004, 21h22

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo