Call Ajax with a click

Question

Call Ajax with a click

Navigation

#1 by (0 votes)

1

I am very lost with this project and I need a guide.

I'm filling a list with characters whose information comes from an Api, these are 10, within this information is the link of the movies in which they appear, my idea is to click on each of these characters and I see the Information (Text, description and image) of the movie in which it appears.

Here is my code with two Ajax calls, so when I click on a character it shows me information about the movie, but it tells me this error

caught SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at peliculas (four.js:43)
    at HTMLAnchorElement.onclick (VM22962 index_3.html:1)

being my error in

films=JSON.parse(xmlhttp.responseText);

I leave my complete code

    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) {


        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 class='ajax_item' onClick= 'peliculas()' href='#' > "+ persons[i].name + "</a></li>";

           // var item = document.querySelectorAll(".ajax_item").setAttribute('films', JSON.stringify(el.films));
             //item.setAttribute('films', JSON.stringify(data.films));

           }

    })

    function peliculas()
    {
        var xmlhttp = new XMLHttpRequest();

        films=JSON.parse(xmlhttp.responseText);

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

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

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

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

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

                }

            }
        }

            xmlhttp.open('GET', url);
            xmlhttp.send();
        })
    }

This is my html

    </ul>

</div>

<div class="results">
<ul>
</ul>
</div>

I'm very lost and I do not know how to do it.

javascript html5 ajax

asked by Bella 05.02.2018 в 04:34

source

1 answer

Double call Ajax with Vanilla How can I upload the map.py to the app.py using html and python?

score 0 · Answer 1

Your problem is that the movies function does not work the same as the characters function, which is the one that is well implemented. In fact, you could rename that function and reuse it for movies:

 function personajes(url, callback) { //se podría renombrar a obtenerDatos
        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 gestionoPersonajes(data) {
      console.log(data.results[0])
    });

    personajes("https://swapi.co/api/films/", function gestionoPeliculas(data) {
      console.log(data.results[0])
    });