Double call Ajax with Vanilla

1

I have a lot of time involved with this code, that's why I use forums, I want to do as a movie guide but with the information taken from an API, I know I have two Ajax calls One that fills my list of characters (10) Now when I click on each of the characters I title, image and review of a movie in which they appear, (Information taken from the API) the information appears on the same page, and I know that I call it through Ajax, but here is my error, I do not know how to give attributes to the characters (that have the information of the movies) so when you click to show me these images.

I leave my code, and I thank Infinito for the help

function personajes(url, callback) {
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
if (xmlhttp.status == 200) {

try {
var data = JSON.parse(xmlhttp.responseText);
} catch(err) {

return;
}
callback(data);
}
};

xmlhttp.open("GET", url, true);
xmlhttp.send();
}

personajes("https://swapi.co/api/people/", function(data, el) {


var persons=data.results;
var html ;

var container = document.querySelector(".text ul");

for(var i = 0; i < persons.length; i++){

var item = container.innerHTML += "<li><a id='ajax_item' onClick= 'obtenerDatos()' > "+ persons[i].name + "</a></li>";
//var one = container.innerHTML += persons[i].films;


}
document.getElementbyId("ajax_item").setAttribute( 'persons[i].films', JSON.stringify(el.films));

})



function obtenerDatos(event) {



var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
if (xmlhttp.status == 200) {

try {
var data = JSON.parse(xmlhttp.responseText);
} catch(err) {

return;
}

}
};

xmlhttp.open("GET", url, true);
xmlhttp.send();
}

I need it to work like this code, but in a list and with a movie. I appreciate the help very much, I have struggled a lot this is.

var response;
document.onreadystatechange=function()
{
  if (document.readyState== "complete")
  {
    personajes();

    document.querySelector('.text').onclick=peliculas;
  }
}


function personajes ()
{
  var httpRequest = new XMLHttpRequest();

  httpRequest.onreadystatechange = function ()
  {
    if (httpRequest.readyState ===4)
    {
      if (httpRequest.status === 200){
        //console.log(httpRequest.responseText);
        response=JSON.parse(httpRequest.responseText);


        var list = document.querySelector(".text");
        list.innerHTML = ""

        response.results.forEach(function(el)
        {
          option=document.createElement("option");
          option.innerHTML= el.name;
          option.setAttribute('films', JSON.stringify(el.films))
          list.appendChild(option);
        })


      }
    }
  }

  httpRequest.open('GET', 'http://swapi.co/api/<peo></peo>ple/');
  httpRequest.send();
}


function peliculas(ev)
{
  selected=ev.target;
  films=JSON.parse(selected.selectedOptions[0].getAttribute('films'));

  var list=document.querySelector('#results');
  list.innerHTML= ""

  films.forEach(function(url)
  {
    console.log(43, url);
    var httpRequest= new XMLHttpRequest();

    httpRequest.onreadystatechange= function()
    {
      if (httpRequest.readyState ===4)
    {
      if (httpRequest.status === 200){

        film= JSON.parse(httpRequest.responseText);
        console.log(film.title);

        li=document.createElement("li");
        li.innerHTML=film.title;
        list.appendChild(li);

      }

    }
  }

    httpRequest.open('GET', url);
    httpRequest.send();
  })
}
    
asked by Dnnla 07.02.2018 в 07:13
source

0 answers