Assurance of retrieving information

Question

Assurance of retrieving information

I am looking to extract specific information from the following website . I have implemented Promises in order to retrieve data about planets, then films associated with a particular planet object. My next goal is to access data within the species array nested inside the films array. So far, everything is functioning correctly up to this stage.

Below is my code for fetching the necessary information:

const task = planetId => {
  const url = `https://swapi.co/api/planets/${planetId}/`;
  const getPlanet = () => { // retrieving the planet by its Id
    return new Promise(function(resolve, reject) {
      https
        .get(`${url}`, function(res) {
          res.on("data", function(d) {
            const planetData = JSON.parse(d.toString());
            resolve(planetData);
          });
        })
        .on("error", function(e) {
          reject(e);
          console.error(e);
        });
    });
  };
  getPlanet().then(gotPlanet => {
    const planet = gotPlanet;
    const filmsArray = planet.films;
    const filmsArrayUrl = filmsArray.map(it => {
      return new Promise(function(resolve, reject) { // retrieving films array
        https
          .get(it, function(res) {
            res.on("data", function(d) {
              const films = JSON.parse(d.toString());
              resolve(films);
            });
          })
          .on("error", function(e) {
            reject(e);
            console.error(e);
          });
      });
    });
    Promise.all(filmsArrayUrl).then(gotFilms => {
      const filmsNew = gotFilms;
      planet.films = filmsNew;
      const speciesArray = planet.films.map(it => it.species);
      const speciesArrayUrl = speciesArray.map(it => it.map(el => { // attempting to retrieve species data
        return new Promise(function(resolve, reject) {
          https.get(el, function(res) {
            res.on('data', function(d) {
              const speciesFetched = JSON.parse(d.toString())
              resolve(speciesFetched)
            })
          }).on('error', function(e) {
            reject(e)
            console.error(e)
          })
        })
      }))
      Promise.all(speciesArrayUrl).then(species => {console.log(species)})
    });
  });
};

The final line displayed in the console shows as [Array[5], Array[20], Array[9]], where each element within the array appears as Promise {<pending>}. What modifications should be made to the code to properly fetch all species objects and present the end result - a planet containing the retrieved information on films and species within those films?

javascript promise

Answer 1

Answer №1

It would be beneficial to refactor your code for better readability. Consider abstracting out reusable components into separate promises like the getDataObject function below. This way, you can easily reuse this promise whenever an HTTP request is needed.

const getDataObject = url => fetch(url).then(res => res.json());

const task = planetId => {
    const planetUrl = `https://swapi.co/api/planets/${planetId}/`;
    let planet

    return getDataObject(planetUrl)
        .then(planetResponse => {
            // Retrieve and store planet response
            planet = planetResponse

            // Obtain all film data for the planet
            let filmsArrayUrls = planet.films.map(filmUrl => getDataObject(filmUrl));

            return Promise.all(filmsArrayUrls)
        })
        .then(allFilms => {
            // Update the planet object with film information
            planet.films = allFilms;

            // Extract species data from the films
            let speciesArray = planet.films.map(film => film.species);

            // Fetch and resolve each species element using Promise.All
            let speciesArrayUrl = speciesArray.map(species => Promise.all(species.map(el => getDataObject(el))))

            // Resolve the array of Promise.All objects inside of speciesArrayUrl
            return Promise.all(speciesArrayUrl)
      })
      .then(species => {
        // Assign species information to respective films in the planet object
        for (let i = 0; i < species.length; i ++) { 
            planet.films[i].species = species[i] 
        }
        console.log(planet)
        return planet
      })
  };
  
task(2)

Answer 2

It would be beneficial to refactor your code for better readability. Consider abstracting out reusable components into separate promises like the getDataObject function below. This way, you can easily reuse this promise whenever an HTTP request is needed.

const getDataObject = url => fetch(url).then(res => res.json());

const task = planetId => {
    const planetUrl = `https://swapi.co/api/planets/${planetId}/`;
    let planet

    return getDataObject(planetUrl)
        .then(planetResponse => {
            // Retrieve and store planet response
            planet = planetResponse

            // Obtain all film data for the planet
            let filmsArrayUrls = planet.films.map(filmUrl => getDataObject(filmUrl));

            return Promise.all(filmsArrayUrls)
        })
        .then(allFilms => {
            // Update the planet object with film information
            planet.films = allFilms;

            // Extract species data from the films
            let speciesArray = planet.films.map(film => film.species);

            // Fetch and resolve each species element using Promise.All
            let speciesArrayUrl = speciesArray.map(species => Promise.all(species.map(el => getDataObject(el))))

            // Resolve the array of Promise.All objects inside of speciesArrayUrl
            return Promise.all(speciesArrayUrl)
      })
      .then(species => {
        // Assign species information to respective films in the planet object
        for (let i = 0; i < species.length; i ++) { 
            planet.films[i].species = species[i] 
        }
        console.log(planet)
        return planet
      })
  };
  
task(2)

Answer 3

Answer №2

It appears that the issue lies in how speciesArrayUrl is structured as an array within another array of promises. To resolve this, you must first flatten out the array.

An effective approach to flattening the array is by utilizing a reducer function on speciesArray, where you append

.reduce((items, item) => items.concat(item), [])

.

I have modified your example by incorporating the use of fetch for browser compatibility:

const task = planetId => {
  const url = `https://swapi.co/api/planets/${planetId}/`;
  const getPlanet = () => { // retrieving the planet based on its Id
    return fetch(url).then(res => res.json());
  };
  getPlanet().then(gotPlanet => {
    const planet = gotPlanet;
    const filmsArray = planet.films;
    const filmsArrayUrl = filmsArray.map(it => {
      return fetch(it).then(res => res.json());
    });
    Promise.all(filmsArrayUrl).then(gotFilms => {
      const filmsNew = gotFilms;
      planet.films = filmsNew;
      const speciesArray = planet.films.map(it => it.species)
        .reduce((items, item) => items.concat(item), []);
      const speciesArrayUrl = speciesArray.map(it => { // attempting to retrieve species data
        return fetch(it).then(res => res.json());
      })
      Promise.all(speciesArrayUrl).then(species => {console.log(species)})
    });
  });
};

task(2);

I have also refactored the code for improved readability:

function getPlanet(planetId) {
  return fetch(`https://swapi.co/api/planets/${planetId}/`)
    .then(res => res.json());
}

function getFilms(planet) {
  return Promise.all(planet.films.map(f => fetch(f).then(res => res.json())));
}

function getSpecies(film) {
  return Promise.all(film.species.map(s => fetch(s).then(res => res.json())));
}

getPlanet(2)
  .then(planet => getFilms(planet))
  .then(films => Promise.all(films.map(film => getSpecies(film))))
  .then(filmSpecies => [].concat(...filmSpecies)) // flattening array of films and film species
  .then(species => {
    console.log(species);
  });

Answer 4

It appears that the issue lies in how speciesArrayUrl is structured as an array within another array of promises. To resolve this, you must first flatten out the array.

An effective approach to flattening the array is by utilizing a reducer function on speciesArray, where you append

.reduce((items, item) => items.concat(item), [])

.

I have modified your example by incorporating the use of fetch for browser compatibility:

const task = planetId => {
  const url = `https://swapi.co/api/planets/${planetId}/`;
  const getPlanet = () => { // retrieving the planet based on its Id
    return fetch(url).then(res => res.json());
  };
  getPlanet().then(gotPlanet => {
    const planet = gotPlanet;
    const filmsArray = planet.films;
    const filmsArrayUrl = filmsArray.map(it => {
      return fetch(it).then(res => res.json());
    });
    Promise.all(filmsArrayUrl).then(gotFilms => {
      const filmsNew = gotFilms;
      planet.films = filmsNew;
      const speciesArray = planet.films.map(it => it.species)
        .reduce((items, item) => items.concat(item), []);
      const speciesArrayUrl = speciesArray.map(it => { // attempting to retrieve species data
        return fetch(it).then(res => res.json());
      })
      Promise.all(speciesArrayUrl).then(species => {console.log(species)})
    });
  });
};

task(2);

I have also refactored the code for improved readability:

function getPlanet(planetId) {
  return fetch(`https://swapi.co/api/planets/${planetId}/`)
    .then(res => res.json());
}

function getFilms(planet) {
  return Promise.all(planet.films.map(f => fetch(f).then(res => res.json())));
}

function getSpecies(film) {
  return Promise.all(film.species.map(s => fetch(s).then(res => res.json())));
}

getPlanet(2)
  .then(planet => getFilms(planet))
  .then(films => Promise.all(films.map(film => getSpecies(film))))
  .then(filmSpecies => [].concat(...filmSpecies)) // flattening array of films and film species
  .then(species => {
    console.log(species);
  });

Assurance of retrieving information

Answer №1

Answer №2

Similar questions

Strategies for temporarily storing values within md-list-item in AngularJS

issue encountered when filling out a dropdown menu using a JSON data structure

Variables for NPM Configuration

What is the most effective method for verifying a selected item in Jquery UI selectable?

Correctly referencing a variable in a delayed AJAX request is crucial for ensuring the proper execution

Verifying Content in JavaScript

Click the "Login" button using Jquery to gain access

Tips for automating file uploads in HTML

Mastering the management of various events within React Material UI components

Solidjs: Implementing a Map in createStore does not trigger updates upon changes

Select a user at random from the reactions in the message

What is the reason behind the NextJS logo not being displayed when accessing the page via its URL?

Incorrect measurement of text size

Vows: proceed to the subsequent error handling process

Switching from using jQuery to Mootools in a short script that helps to balance the heights of

What is the process for including an SVG file in my JavaScript .textContent?

Remove the hyphen from a user input field using Angular 2 and reactive forms

Trigger a function when <a> is clicked, which will then increment the count by one and reflect this change in the database

Obtain template from AngularJS and transmit data to template

Distinguishing between a regular JavaScript variable and one annotated with a dollar sign