Je souhaite créer des éléments div dynamiquement dans le succès ajax avec chaque élément div ayant son id comme "id" à partir des données de réponse! Y'a-t'il un quelconque moyen d'y arriver? Quelqu'un peut-il m'aider, s'il vous plaît! j'ai joint un stylo code coupé ci-dessous de mon travail jusqu'à présent aussi.

https://codepen.io/anon/pen/JxXvbb?editors=1111#anon-login

  window.onload = function() {
    $.ajax({
            type: "get", 
            dataType: 'jsonp', 
           url:"https://api.themoviedb.org/3/movie/now_playing?api_key=05b5e7574eac47fdf8f2ac12831493c6&language=en-US&page=1", //url to send to 
            contentType: "application/json; charset=utf-8",
            success: function (msg) { 
                // console.log(msg);

                   for(var i = 0; i < msg.results.length; i++)
   {
let idx=msg.results[i].id
let titlex=msg.results[i].title;
let imagesrcx=msg.results[i].poster_path;
   console.log("ID: " +idx); 
   console.log("title: "+titlex);
   console.log("image src: "+imagesrcx);

   let new_div ='<div><div id="'+ idx +'">'+'</div></div>';

            $("main").append(new_div);
   //console.log(msg);
   }

            }

});

};
0
Faize Shan 27 janv. 2019 à 20:14

3 réponses

Meilleure réponse

Pourquoi ne pas simplement utiliser document.createElement? Il semble que la manière la plus simple soit de créer et de définir dynamiquement id, pas besoin de jQuery ici.

   for(var i = 0; i < msg.results.length; i++){
        const div = document.createElement('div');
        div.id = msg.results[i].id;
        $("#main").append(div);
    }

Vous pouvez maintenant l'utiliser avec jQuery. Si vous souhaitez y ajouter du texte, définissez également innerText.

Voici le code complet: window.onload = function () {

  $.ajax({
            type: "get", 
            dataType: 'jsonp', 
           url:"https://api.themoviedb.org/3/movie/now_playing?api_key=05b5e7574eac47fdf8f2ac12831493c6&language=en-US&page=1", //url to send to 
            contentType: "application/json; charset=utf-8",
            success: function (msg) { 
                // console.log(msg);

              for(var i = 0; i < msg.results.length; i++) {
                 let idx=msg.results[i].id
                 let titlex=msg.results[i].title;
                 let imagesrcx=msg.results[i].poster_path;
                 console.log("ID: " +idx); 
                 console.log("title: "+titlex);
                 console.log("image src: "+imagesrcx);

                 const new_div = document.createElement('div');
                 new_div.id = idx;
                 new_div.innerText = titlex;

                $("#main").append(new_div);
              }
            }
    });
};

Stackblitz de travail; entrez la description du lien ici

EDIT: J'ai également réalisé que vous avez oublié d'ajouter le «#» pour sélectionner le div principal, ce qui pourrait vous aider.

0
mchl18 27 janv. 2019 à 17:23

Cela devrait aider.

#main>div{
  display: inline-block;
  width: 33%;
  margin-bottom: 10px;
}

window.onload = function() {
    $.ajax({
            type: "get", 
            dataType: 'jsonp', 
           url:"https://api.themoviedb.org/3/movie/now_playing?api_key=05b5e7574eac47fdf8f2ac12831493c6&language=en-US&page=1", //url to send to 
            contentType: "application/json; charset=utf-8",
            success: function (msg) { 
                   for(var i = 0; i < msg.results.length; i++)
   {
                     // console.log(msg);


let idx=msg.results[i].id
let titlex=msg.results[i].title;
let imagesrcx=msg.results[i].poster_path;
     console.log(imagesrcx);
$("#main").append(`
<div style='background:#000;' id='`+idx+`'>
  <img src='`+imagesrcx+`' alt='`+titlex+`'>
</div>
`);
   //console.log(msg);
   }

            }

});

};
0
Saurabh Anand 27 janv. 2019 à 17:41

Si vous utilisez jquery, dans le succès de votre rappel

msg.results.forEach((e)=>{
    const div = $(`<div id=${e.id}>${e.title}</div>`);
    $("#main").append(div);
});
0
manas 27 janv. 2019 à 17:38