1

Hola estoy en proceso de aprendizaje, así que ser un poco blando conmigo, la cuestión es: Quiero hacer que la consola me de: //Hola, yo soy Luke Skywalker y soy del planeta Tatooine y en cambio me da el mensaje //Hola, yo soy Luke Skywalker y soy del planeta http://swapi.dev/api/planets/1/(Dirección de la información) o //Hola, yo soy Luke Skywalker y soy del planeta undefined , no he logrado hacer que suceda la primero por ningún medio que sea de mi entender, estoy utilizando la API de Star Wars ( https://swapi.dev/ ).

Básicamente, a través de los Personajes (https://swapi.dev/api/people/1/) lo que quiero es acceder y extraer la información de "HOMEWORD" : http://swapi.dev/api/planets/1/ (planetas). y que se muestre //Hola, yo soy Luke Skywalker y soy del planeta **Tatooine** que tiene un periodo orbital de **304** dias , por ejemplo... Gracias por Adelantado :)

-------------------RECOMIENDO VER LAS IMAGENES------------

Dejo este código por aquí....

const API_URL='https://swapi.dev/api/';
const PEOPLE_URL= 'people/:id';
const HOMEWORD_URL= 'planets/:id';

const options={crossDomain: true};

const onPeopleResponse= function (personaje) {
    // console.log(arguments)
    console.log(`Hola, yo soy ${personaje.name} y soy del planeta ${personaje.homeworld}`) //(Se que asi no se hace)
 }

function obtenerPersonaje(id) {
    const url=`${API_URL}${PEOPLE_URL.replace( `:id`, id )}`;
    $.get(url, options, onPeopleResponse)
}

let obtenerCienPersonajes =78;
for (let i = 1; i < obtenerCienPersonajes; i++) {
    obtenerPersonaje(i)
}
//Esto me da la consola con este codigo:

//Hola, yo soy Luke Skywalker y soy del planeta http://swapi.dev/api/planets/1/

//Hola, yo soy Ratts Tyerel y soy del planeta http://swapi.dev/api/planets/38/

//Quiero que me de:

//Hola, yo soy Luke Skywalker y soy del planeta Tatooine

Imágenes por aquí

Persona

Información del Personaje 1 de la API

Planeta

Información del Planeta 1 en la API

0

2 respuestas 2

0

Sugiero que se revisen los conceptos de Event Driven Programming/Asynchronous programming, JS no es asincrónico, es sincrónico.

Aquí una solución simple basada en el patrón Continuation Passing Style, respetando lo más posible el código original.

  1. Primero se va por personaje endpoint
  2. Luego, se va por planeta endpoint
  3. Finalmente, se ejecuta la función de continuación onPeopleResponse

El código original va bien, solo falta ir por los datos de la API/endpoint planetas, hay diferentes datos en cada endpoint, usamos el método asynchronous JS get de jquery y funciones de continuación (callback):

    //CPS with callback
     $.get(url_people, options, function (data, status){
         //console.log("Data: " + data + "\nStatus: " + status);
         characterName = data.name
         //console.log(characterName);
         //CPS with callback nested
         $.get(url_planet, options, function (data, status){
             //console.log("Data: " + data + "\nStatus: " + status);
             planetName = data.name;
             //console.log(planetName);
             //ultima funcion de continuacion
             onPeopleResponse(characterName, planetName);
         });
    });

CPS es muy usado, tiene sus desventajas en cuestión de cómo se estructura una pieza de código asincrónico, el bien conocido callback hell (muchas funciones de continuación anidadas).

Luego de comprender este patrón CPS, lo mejor es estudiar Promises y async/await, que son otros patrones más actuales, que permiten estructurar el código asincrónico de una forma mas sincrónica (sin callback hell).

const API_URL='https://swapi.dev/api/';
      const PEOPLE_URL= 'people/:id';
      const HOMEWORD_URL= 'planets/:id';

      const options={crossDomain: true};

      const onPeopleResponse= function (personaje, planeta) {
        
          console.log(`Hola, yo soy ${personaje} y soy del planeta ${planeta}`) //(Se que asi no se hace)
      }

      function obtenerPersonaje(id) {
          const options={crossDomain: true};
          const url_people=`${API_URL}${PEOPLE_URL.replace( `:id`, id )}`;
          const url_planet=`${API_URL}${HOMEWORD_URL.replace( `:id`, id )}`;
          let characterName = "";
          let planetName = "";
          //CPS with callback
           $.get(url_people, options, function (data, status){
            //console.log("Data: " + data + "\nStatus: " + status);
            characterName = data.name
            //console.log(characterName);
            //CPS with callback nested
            $.get(url_planet, options, function (data, status){
              //console.log("Data: " + data + "\nStatus: " + status);
              planetName = data.name;
              //console.log(planetName);
              //funcion de continuacion
              onPeopleResponse(characterName, planetName);
            }).fail(function(e){
              if(e.status == 404){
                console.log("No se encontro el recurso:" + e.status);
              }
            });
          }).fail(function(e){
              if(e.status == 404){
                console.log("No se encontro el recurso:" + e.status);
              }
          });
      }

      let obtenerCienPersonajes =78;
      for (let i = 1; i < obtenerCienPersonajes; i++) {
          obtenerPersonaje(i)
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Nota: falta evaluar el status, hay peticiones en la API Star Wars que regresan el estatus 404. Otro tema a estudiar y tomar en cuenta.

0

primero hablemos de tus errores en el código, entiendo que recién estés aprendiendo,

primero: Los string dentro de constantes no es buena practica.

segundo: Tienes mucho código de mas, te lo resumiré en una sola función.

tercero: en la consola se muestra //Hola, yo soy Luke Skywalker y soy del planeta http://swapi.dev/api/planets/1/ por que estas pintando simplemente la url de todos los datos de los planetas, deberías hacer una petición a esa url y así obtener el nombre del planeta.

const options={crossDomain: true};

const buscarPersonaje = async id => {
   try{
    const { name } =  await $.get(`https://swapi.dev/api/people/${id}`, options)
    const response = await $.get(`https://swapi.dev/api/planets/${id}`, options)
    console.log(`Hola yo soy ${name} y vengo del platena ${response.name}`)
    
   }catch(error){
    console.log(error)
   }
}

buscarPersonaje(1)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

te explico lo que hice, cree una función asíncrona para poder obtener los datos, es por eso que agrege las palabras claves async/await, por defecto javascript ejecuta código asíncrono, lo que pasa aca es que estamos haciendo una petición y esto puede tardar, pero javascript dice: ok esto es tema del backend y no mío, y sigue ejecutando código, entonces con las palabras claves async le decimo que vamos a estar trabajando asíncronamente, con la palabra clave await le decimos que dicha función va a tomar algo de tiempo, entonces en esa linea de código javascript va a esperar a que termine, una vez termine voy a guardar la respuesta de la api en una variable, como puedes ver estoy desestructurando la respuesta y solamente estoy obteniendo el nombre del personaje, luego como name ya esta declarada entonces guarda la respuesta completa sin desestructurar, luego imprimo por consola el resultado, como eres nuevo en javascript tal vez te preguntaras, que es ese try y ese catch, y ese error de donde sale? ok, esto se usa comúnmente para ejecutar código asíncrono, lo que hago es ejecutar código asíncrono dentro del try, si por alguna razón hay un error en la petición a la api, el catch lo capturara, es por eso que lo muestro por consola, para ver que error sucedió, creo que eso es todo, bienvenido a javascript, es un lenguaje muy bueno y tiene una sintaxis encantadora, suerte en tu recorrido.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.