Request for an additional url

Question

Request for an additional url

Navigation

#1 by (0 votes)

1

Dear I have this code consuming this api in json, I need to show in the div or class homeworld, the name of the planet, they tell me that I have to make an additional request entering the service route figure the homeworld item which has a url with the corresponding planet but as I can do to show the name what I have been able to show the url text but not the name its help please, and I have not been able to structure how to do it, I leave the code that I have. thanks.

$(document).ready(function() {
    $.getJSON('https://swapi.co/api/people/', function(datos) {
        var output = '<article class="row">';
        $.each(datos.results, function(i, item) {
            output += '<div class="col">';
            output += '<div class="inner">';
            output += '<div class="name">' + item.name + '</div>';
            output += '<div class="height"><strong>Altura :</strong> ' + item.height + '</div>';
            output += '<div class="hair_color"><strong>Color de Cabello :</strong> ' + item.hair_color + '</div>';
            output += '<div class="birth_year"><strong>Cumpleaños :</strong> ' + item.birth_year + '</div>';
            output += '<div class="homeworld">' + item.homeworld + '</div>';
            output += '</div>';
            output += '</div>';
        });

        output += '</article>';
        $('.container').html(output);

    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section>
        <h2>Personajes Star Wars</h2>
        <div class="container">
            <div class="row"><span>Cargando...</span></div>
        </div>
    </section>

ajax

asked by Sixto Mujica 15.05.2018 в 07:27

source

1 answer

How to create sliding below the toolbar Datepicker jQuery

score 0 · Accepted Answer

Here you have the code, I have put comments for you to understand it better, basically I have retrieved the url where I get the planets and then I have tried to recover the name and add it to the html.

$(document).ready(function() {
    var urlsPlanetas = [];//contendra todas las url de los planetas que debemos recuperar
    $.getJSON('https://swapi.co/api/people/', function(datos) {
        var output = '<article class="row">';
        $.each(datos.results, function(i, item) {
            output += '<div class="col">';
            output += '<div class="inner">';
            output += '<div class="name">' + item.name + '</div>';
            output += '<div class="height"><strong>Altura :</strong> ' + item.height + '</div>';
            output += '<div class="hair_color"><strong>Color de Cabello :</strong> ' + item.hair_color + '</div>';
            output += '<div class="birth_year"><strong>Cumpleaños :</strong> ' + item.birth_year + '</div>';
            output += '<div class="homeworld"></div>';
            output += '</div>';
            output += '</div>';
            
           urlsPlanetas.push(item.homeworld);


            
        });
        output += '</article>';
        //tratamos url planetas y lo añadimos a output, esto se ejecuta cuando ya tenemos el html
        urlsPlanetas.forEach(function(item,index){
          $.getJSON(item,null,function(datos){
              var prova = datos.results;
              $.each(datos, function(key, val) {
                if(key.indexOf('name')!=-1){//cuando encuentre el nombre lo añadimos a nuestro html
                  $($(".homeworld")[index]).replaceWith("<div/><strong>Planeta :</strong> "+val);
                }
              });
          });
        });
        $('.container').html(output);
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section>
        <h2>Personajes Star Wars</h2>
        <div class="container">
            <div class="row"><span>Cargando...</span></div>
        </div>
    </section>