Pull data from API?

Question

JavaScript

Hello! Tell me how to be. I want to display data from api star wars https://swapi.co/documentation. It is necessary to display all the series of the film, as well as the characters from this film.
Displaying movie titles is very easy, but with the characters I'm slowing down. To get the name of the movie, just write:

const title = document.createElement('h3');
title.textContent=film.title;

if you do the same with characters, then only links to them are displayed, but the data that is needed
https://swapi.co/api/films/1/

code:

const list = document.createElement('div');
list.setAttribute('class', 'sw-list');
const chlist = document.createElement('div');
chlist.setAttribute('class', 'characters-list');
const cap = document.createElement('h2');
cap.textContent='Characters';
chlist.appendChild(cap);

document.getElementById('sw-wrap').appendChild(list);
document.getElementById('sw-wrap').appendChild(chlist);
////////////////////////////////////////////
var swapi = new XMLHttpRequest();
swapi.open("GET", "http://swapi.co/api/films/", true);

swapi.onload=function(){
  var data=JSON.parse(this.response);
  
  data.results.forEach( film => { 
   
    const item = document.createElement('div');
    item.setAttribute('class', 'sw-item');
    list.appendChild(item);
    
    const info = document.createElement('div');
    info.setAttribute('class', 'sw-item__info');
    item.appendChild(info);
   
   const title = document.createElement('h3');
    title.textContent=film.title;
    info.appendChild(title); 
    
   const episode = document.createElement('h3');
    episode.textContent=film.episode_id;
    info.appendChild(episode);
    
   const director = document.createElement('div');
    director.textContent=film.director;
    info.appendChild(director);
   
    const release = document.createElement('div');
    release.textContent=film.release_date;
    info.appendChild(release);	    
     
    });
  }
  swapi.send();

What is the best way to complete the code, please tell me?

Answer 1

Try to practice on the API easier, it's too early for you. Read about async/await, Promise, asynchrony. CodePen.io
example

(function() {
  'use strict';

  const Films = new Swapi('films')

  Films.init({
    category: ['planets', 'characters'],
    container() {
      return document.querySelector('.sw-list')
    },
    item(data) {
      return `
        <div class="sw-item">
          <div class="sw-item__info">
            <h3 class="title">${data.title}</h3>
            <h3 class="episode_id">${data.episode_id}</h3>
            <div class="director">${data.director}</div>
            <div class="producer">${data.producer}</div>
            <div class="release_date">${data.release_date}</div>
          </div>
          <br>
          <div class="opening_crawl">
            ${Films.method('concat', data.characters, (character) => {
              return `
                <h4>Character</h4>
                <div class="name">Name: ${character.name}</div>
                <div class="birth">Birth: ${character.birth_year}</div>
                <hr>
              `
            })}
          </div>
          <div class="planets">
            ${Films.method('concat', data.planets, (planet) => {
              return `
                <h4>Planet</h4>
                <div class="name">Name: ${planet.name}</div>
                <hr>
              `
            })}
          </div>
        </div>
      `
    }
  })

  /**
    * Инициализация Swapi
    * @param {string} endpoint - категория запроса: flims, ...
  **/
  function Swapi(endpoint) {
    this.init = (setting) => {
      const container = setting.container()
      makeRequest(`https://swapi.co/api/${endpoint}/`).then(response => {
        for (const item in response.results) {
          makeCategoryRequest(response.results[item], setting.category).then(results => {
            appendCollection(container, parseHtml(setting.item(results)))
          })
        }
      })
    },
    this.method = (name, value, callback) => {
      switch (name.toLowerCase()) {
        case 'concat':
          return filterStrings(value, callback)
      }
    }
  }

  /**
    * Сделать все запросы на переданные категории
    * @param {object} results - объект данных фильма
    * @param {array} types - категории, которые нужно загрузить
    * @returns {Promise}
  **/
  async function makeCategoryRequest(results, types = ['characters']) {
    const promises = {};
    for (const type of types) {
      promises[type] = makeDeepRequest(results[type])
    }
    for (const [type, promise] of Object.entries(promises)) {
      await promise.then(response => {
        results[type] = response;
      }).catch(console.error)
    }
    return results
  }

  /**
    * Сделать запрос на url
    * @param {string} url - ссылка
    * @returns {Promise}
  **/
  function makeRequest(url) {
    return new Promise(resolve => {
      fetch(url, {
        method: 'GET',
        mode: 'cors'
      }).then(response => {
        return response.json()
      }).then(resolve).catch(error => {
        resolve(null)
      })
    })
  }

  /**
    * Сделать запросы на переданные url
    * @param {array} urls - массив ссылок
    * @returns {Promise}
  **/
  function makeDeepRequest(urls) {
    return new Promise(resolve => {
      const promises = []
      for (const url of urls) {
        promises.push(makeRequest(url))
      }
      Promise.all(promises).then(resolve)
    })
  }


  /**
    * Вставка HTMLCollection на страницу
    * @param {Node} element - Node элемент, куда будет вставлятся коллекция
    * @param {HTMLCollection} collection - масив HTMLCollection
  **/
  function appendCollection(element, collection) {
    element.appendChild(collection[0])
  }

  /**
    * Парсинг HTML из строки
    * @param {string} string - html строка
    * @returns {HTMLCollection} - html коллекция node узлов
  **/
  function parseHtml(string) {
    const template = document.implementation.createHTMLDocument()
    template.body.innerHTML = string
    return template.body.children
  }

  /**
    * Фильтрация массва, запись в строку
    * @param {array} - массив данных
    * @param {function} filter - функция фильтрации
    * @returns {string} - строка с отфильтрованными данными из массива
  **/
  function filterStrings(array, filter) {
    let strings = ''
    if (filter) {
      for (let i = 0; i < array.length; i++) {
        strings += filter(array[i], i)
      }
    } else {
      for (let i = 0; i < array.length; i++) {
        strings += array[i]
      }
    }
    return strings
  }

  /**
    * Фильтр и перебор по массиву
    * @param {array} data - массив данных
    * @param {function} filter - функция для фильтрации
    * @returns {array} - отфильтрованный массив данных
  **/
  function filterArray(data, filter) {
    const array = []
    for (let i = 0; i < data.length; i++) {
      array.push(filter(data[i], i))
    }
    return array
  }

})()