Utiliser la méthode map()

Version imprimable

3 pièce(s) jointe(s)

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:

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:

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:

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>
Pièce jointe 663353

Pièce jointe 663354

Mais pourtant VS Code semble ne pas aimer ceci
Pièce jointe 663355

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

Par exemple, j'ai ceci qui fonctionne... et qui ne fonctionne pas.

Avant le return, j'ai fait ca

Code:

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:

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:

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 :)

Je suis toujours bloqué avec ca.

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

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

Citation:

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:

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> )