Discussion :

[rlelamer]

Bonjour,
Je cherche mon erreur qui fait que je n'arrive pas à attribuer la valeur de [[PromiseResult]] à une variable ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
async function getRaceId(nameRace) {
    var response = await fetch('http://zezo.org/races2.json');
    var datas = await response.json();
    //console.log(datas);
    for (var i = 0; i < datas.races.length; i++) {
        if (datas.races[i].name === nameRace) {
          return datas.races[i].id;
        } else {}
    }
}
 
var raceId = getRaceId("TJV ULTIM");
console.log(raceId);

getRaceId() me retourne ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
Promise*{<pending>}[[Prototype]]: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: "490.1"

je vois et je sais que "490.1" est bien la valeur que je souhaite obtenir donc jusqu'a preuve du contraire ça c'est ok (j'en doute maintenant ...)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var raceId = getRaceId("TJV ULTIM");
console.log(raceId);                         // <- Retourne undefined

Ou je me craque ? ça c'est la question que je me pose, un coup de pouce serait le bienvenu merci

[Toufik83]

Bonjour,

Ce n'est pas possible de récupérer la valeur d'une fonction asynchrone avec une méthode synchrone, il faudrait utiliser le callback then() comme c'est montré dans cet exemple.

[rlelamer]

J'ai beau retourner le problème dans tous les sens, rien n'y fait ... j'arrive pas à "sortir" le 490.1

Code JS :

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
 
var raceId;
 
function getRaceId(nameRace) {
    return fetch('http://zezo.org/races2.json', {
        method: 'GET',
    })
    .then(function(response) {
        return response.json();
    })
    .then(function(datas) {
        for (var i = 0; i < datas.races.length; i++) {
            if (datas.races[i].name === nameRace) {
                raceId = datas.races[i].id;
            } else {}
        }
        console.log(raceId);
        return raceId;
    })
}
 
getRaceId("TJV ULTIM").then(raceId => {raceId;});

J'ai undefined et le console.log(raceId) me retourne bien 490.1.
C'est à s'arracher les cheveux ce truc ...

[Toufik83]

Bonjour,

Au lieu de stocker la valeur de la fonction getRaceId dans la variable raceId (qui n'est pas possible techniquement), essaies plutôt de mettre le traitement à l'intérieur de then comme ça :

Code :

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
 
function getRaceId(nameRace) {
    /* le return est inutile */
    fetch('http://zezo.org/races2.json', {
        method: 'GET',
    })
    .then(function(response) {
        return response.json();
    })
    .then(function(datas) {
        for (var i = 0; i < datas.races.length; i++) {
            if (datas.races[i].name === nameRace) {
                console.log(datas.races[i].id);
                /* c'est ici qu'il faut utiliser la valeur de datas.races[i].id et pas ailleurs !*/
            }
        }
 
        //return raceId; inutile de retourner ceci !
    })
}
 
//Puis tu fais appel à la fonction sans then, parce qu'il déjà géré par la fonction :
getRaceId("TJV ULTIM");

[rlelamer]

Ok mais je souhaite la récupérer et la stocker pour pouvoir la réutiliser donc je dois pas utiliser la bonne méthode alors ?

[Toufik83]

Montre comment tu veux la réutiliser, probablement on aura une solution...

[rlelamer]

Code :

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
 
function getRaceId(nameRace) {
    fetch('http://zezo.org/races2.json', {
            method: 'GET',
        })
        .then(function(response) {
            return response.json();
        })
        .then(function(datas) {
            for (var i = 0; i < datas.races.length; i++) {
                if (datas.races[i].name === nameRace) {
                    console.log(datas.races[i].id);
                }
            }
        })
    }
 
    function createCellPolar(value, el, row) {
        var cell = document.createElement('td');
        var raceId = getRaceId(el.race);
        var ltwa = el.twa.replace(/°/g,'').replace(/-/g,'').trim();
        var ltws = el.tws.replace(/kt/g,'').trim();
        var url = "http://toxcct.free.fr/polars/?race_id=" + raceId + "&tws=" + ltws + "&twa="+ ltwa + "&utm_source=RouteZezo.org";
        console.log(url);
        cell.innerHTML = '<a href="' + url + '" target="_blank" rel="noopener noreferrer" style="color: black">' + value + '</a>';
        cell.title = 'View in Toxcct\'s Polars';
        row.appendChild(cell);
    }

http://toxcct.free.fr/polars/?race_id=undefined&tws=9.0&twa=140&utm_source=RouteZezo.org

[Toufik83]

L'idée est d'appeler la fonction à l'intérieur de then comme ça :

Code :

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
 
function getRaceId(nameRace) {
    return fetch('http://zezo.org/races2.json', {
        method: 'GET',
    })
    .then(function(response) {
        return response.json();
    })
    .then(function(datas) {
        for (var i = 0; i < datas.races.length; i++) {
            if (datas.races[i].name === nameRace) {
                datas.races[i].id;
                //ici tu fais appel à createCellPolar avec les variables nécessaires
		createCellPolar("une valeur"
			,{"raceId":datas.races[i].id,"twa":"valeur de twa","tws":"valeur de tws"}
			,document.getElementById("table").querySelector('tbody').children[0]
		);
            }
        }
    });
}
function createCellPolar(value, el, row) {
        var cell = document.createElement('td');
        var raceId = el.raceId;//ici raceId au lieu de race
        var ltwa = el.twa.replace(/°/g,'').replace(/-/g,'').trim();
        var ltws = el.tws.replace(/kt/g,'').trim();
        var url = "http://toxcct.free.fr/polars/?race_id=" + raceId + "&tws=" + ltws + "&twa="+ ltwa + "&utm_source=RouteZezo.org";
        console.log(url);
        cell.innerHTML = '<a href="' + url + '" target="_blank" rel="noopener noreferrer" style="color: black">' + value + '</a>';
        cell.title = 'View in Toxcct\'s Polars';
        row.appendChild(cell);
    }
getRaceId("TJV ULTIM");

La ligne document.getElementById("table").querySelector('tbody').children[0] récupère le premier enfant du tbody de la table ayant l'id id="table".
Tu peux utiliser un id ou une classe pour faciliter la sélection sinon...

[NoSmoking]

Bonjour,
en complément de ce qu'a écrit Toufik83, ce que tu cherches à faire c'est du synchrone, blocage du script en attendant la réponse, avec des fonctions asynchrones.

Avec un objet XMLHttpRequest on faisait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const URL = "http://zezo.org/races2.json";
function getDatas(filtre) {
  const xhr = new XMLHttpRequest();
  // mode synchrone activé
  xhr.open("GET", URL, false);
  xhr.send(null);
  // traitement retour
  const dataJson = JSON.parse(xhr.responseText);
  const result = dataJson.races.filter(value => value.name == filtre);
  return result[0].id;
}
const recupId = getDatas("TJV ULTIM");
// la suite du code
console.log("getDatas", recupId);

méthode bloquante faisant partie des mauvaises pratiques, mais qui fonctionne.

Avec les promises le retour n'est autre qu'une promise et ce que tu utilises la voie asyn/wait ou then, le résultat est le même
Que tu fasses, j'ai modifié la récupération de la valeur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
async function getDonnees(filtre) {
  const response = await fetch('http://zezo.org/races2.json');
  const dataJson = await response.json();
  const result = dataJson.races.filter(value => value.name == filtre);
  return result;
}

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function getDonnees(filtre) {
  fetch('http://zezo.org/races2.json')
    .then(response => response.json())
    .then(dataJson => {
      const result = dataJson.races.filter(value => value.name == filtre);
      return result;
    })
}

L'exploitation ce fera de la façon suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
getDonnees("TJV ULTIM")
  .then((datas) => {
    // ici on peut traiter les données reçues  
  });

Comme expliqué avant, l'utilisation d'une fonction « callback » simplifie le code et sa lisibilté.

Cela pourrait ressembler au schéma suivant :
Une fonction de traitement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
// la fonction de traitement
function traiteDonnees(param, datas) {
  console.log("traiteDonnees :", JSON.stringify(datas, null, 2));
  // là tu mets le code que tu veux !
}

Une fonction de requête :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
// la fonction requête
function getDonnees(filtre, callback) {
  fetch('http://zezo.org/races2.json')
    .then(response => response.json())
    .then(dataJson => {
      const result = dataJson.races.filter(value => value.name == filtre);
      callback(filtre, result);
    })
}

et la fonction d'appel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
// appel de la fonction 
getDonnees("TJV ULTIM", traiteDonnees);

Je rajoutes que comme tu récupérés toutes les données d'un coup, cela vaut sûrement le coup de les « mettre en cache » si tu dois utiliser un autre filtre.


[Edit] légère correction des codes

[rlelamer]

Merci à vous 2
Je vais tenter de mettre ça en application (et je rame sérieux ...)