Partage

Problème avec boucle ?

(freeCodeCamp)

16 décembre 2017 à 15:43:54

Bonjour à tous,

Je fais en ce moment le parcours freeCodeCamp, et sur les mini-projets que j'ai à faire, j'en ai un où je dois faire appel à l'api de twitch sur ça pas de soucis, mais je dois avoir un problème avec ma boucle vu qu'a chaque fois le dom qui est généré change à chaque refresh...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <div id="result">
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
  <script src="script.js"></script>
</body>
</html>
$(document).ready(function () {
  getStream();
});

function getStream() {
  const names = ["ESL_SC2", "esl_overwatch", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
  const clientID = 'sghb75wxpwf2urfreo6i8xl5w2zt2s';

  for (let name of names) {
    let twitchUrl = `https://api.twitch.tv/kraken/streams/${name}`;

    $.ajax({
      method: 'GET',
      url: twitchUrl,
      headers: {
        'Client-ID': clientID
      },
      success: function (data) {
        if (data.stream === null) {
          $('#result').append(`
          <div>
            <p>
           ${name} offline
            </p>
            </div>
          `)
        } else {
          $('#result').append(`
        <div>
        <p>
          ${data.stream.game}
          </p>
          <p>
          ${data.stream.stream_type}
          <img src="${data.stream.channel.logo}">
          </p>
          <p>
          <a href="${data.stream.channel.url}">Channel</a>
         </p>
      </div>
        `)
        }
      }
    })
  }
}

Si vous avez une idée de la chose ce serait cool ! merci :)


16 décembre 2017 à 17:07:24

Salut,

c'est pas parce que tu fais tes requêtes tout le temps dans le meme ordre que les réponses vont arrivés dans le même ordre 

tu dois prévoir un conteneur d'arrivé pour chaque requete pour pas que ce soit influencé par l'ordre d'arrivée 

2 janvier 2018 à 11:16:02

bonjour!

Désolé de la réponse très tardive, mais je fus grandement malade ces 3 dernières semaines...

De quelle manière je peux prévoir un conteneur d'arrivée ? je saisis pas vraiment :/

3 janvier 2018 à 15:01:17

Au lieu d'avoir un conteneur #result dans lequel tu ajoutes toutes les résultats de requetes, tu dois créer la div qui reçoit le résultat de la requete au moment où la boucle for s'exécute et pas au moment ou la réponse arrive :

$result = $('#result');

for (const name of names) {
  const $div = $('<div>').appendTo($result)
  // pour chaque name, une div est créé
  // et insérée dans le DOM, DANS L ORDRE

  const twitchUrl = // ...

  $.ajax({
    // ...
    success: function(e) {
      // ici tu ajoute le résultat dans $div
      // peut importe l ordre d arrivée des
      // requetes, les conteneur qui doivent
      // accueullir le résultat ont déjà été 
      // inséré dans le DOM dans l ordre
    }
  })
}

Note : dans la plupart des cas, on peut, et il est préférable d'utiliser const au lieu de let (http://putaindecode.io/fr/articles/js/es2015/const-let-var/)

7 janvier 2018 à 16:42:29

ok super!

Merci je vais tester ça :)

Problème avec boucle ?

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown