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();
})
}