Отправить ajax запрос и вывести данные на страницу?

Question

[Stud]

надо отправить ajax запрос https://ajax.test-danit.com/api/swapi/films и вывести все фильмы, а также список персонажей в каждом фильме (находится в свойстве characters). Как дополнить код и использовать правильно Promise.all?

const URL = 'https://ajax.test-danit.com/api/swapi/';
const root = document.querySelector('#root');

class Requests {
    constructor(url) {
        this.url = url;
    }

    getEntity(entity) {
        return fetch(this.url + `${entity}`).then(response => {
            return response.json();
        });
    }
    // getDeepEntity(entity, keyword) {
    //  return fetch(this.url + `${entity}?search=${keyword}`).then(response => {
    //      return response.json();
    //  });
    // }
}

class StarWars {
    constructor(root) {
        this.root = root;
    }

    renderEntity(data) {
        const infoEntity = document.createElement('div');

        const infoItems = data.map(({ name, episodeId, openingCrawl, characters }) => {
            const entityContainer = document.createElement('div');
            const title = document.createElement('h4');
            title.textContent = `Film name: "${name}"`;
            // const people = characters.map(elem => {
            //  console.log(elem);
            // });
            const id = document.createElement('p');
            id.textContent = `Episode: ${episodeId}`;
            id.style.fontStyle = 'italic';
            const description = document.createElement('p');
            description.textContent = `Description:${openingCrawl}`;
            entityContainer.append(title, id, description);
            return entityContainer;
        });
        infoEntity.append(...infoItems);
        this.root.append(infoEntity);
    }
}

Comments

[Модератор]

На вопрос «как сделать» отвечает документация и поиск в интернет.

Тут отвечают на вопросы «почему я сделал, как в документации, а оно не работает. Поискал в интернет, вот запросы, в ответах не нашел. Что я делаю не так?»

Покажите, как вы пробовали решить проблему, приведите код попытки (пусть неудачной), опишите, как запускали, что ожидали и что получилось.
За готовыми решениями - на фриланс. В текущем виде это не вопрос, а задание. Нарушен п.5.12 Регламента.

[Stud]

Модератор, у меня не получается вывести само имя персинажа на страницу, в консоль смогла добраться до свойства:

const URL = 'https://ajax.test-danit.com/api/swapi/';
const root = document.querySelector('#root');

class Requests {
	constructor(url) {
		this.url = url;
	}

	getEntity(entity) {
		return fetch(this.url + `${entity}`).then(response => {
			return response.json();
		});
	}
	// getDeepEntity(entity, keyword) {
	// 	return fetch(this.url + `${entity}?search=${keyword}`).then(response => {
	// 		return response.json();
	// 	});
	// }
}

class StarWars {
	constructor(root) {
		this.root = root;
	}

	renderEntity(data) {
		const infoEntity = document.createElement('div');

		const infoItems = data.map(({ name, episodeId, openingCrawl, characters }) => {
			const entityContainer = document.createElement('div');
			const title = document.createElement('h4');
			title.textContent = `Film name: "${name}"`;
			// const people = characters.map(elem => {
			// 	console.log(elem);
			// });
			const id = document.createElement('p');
			id.textContent = `Episode: ${episodeId}`;
			id.style.fontStyle = 'italic';
			const description = document.createElement('p');
			description.textContent = `Description:${openingCrawl}`;
			entityContainer.append(title, starWarsChar, id, description);
			return entityContainer;
		});
		infoEntity.append(...infoItems);
		this.root.append(infoEntity);
	}
}

class StarWarsChar {
	renderChar(data) {
		const listChar = document.createElement('ul');
		data.forEach(elem => {
			//console.log(elem.name);
			let li = document.createElement('li');
			li.textContent = elem.name;
			listChar.append(li);
			console.log(listChar);
		});
	}
}

const request = new Requests(URL);
const starWars = new StarWars(root);
const starWarsChar = new StarWarsChar();

// request
// 	.getEntity('films')
// 	.then(data => {
// 		console.log(data);
// 		starWars.renderEntity(data);
// 	})
// 	.catch(e => {
// 		console.log(e);
// 	});
request.getEntity('films').then(data => {
	//console.log(data);
	starWars.renderEntity(data);
	//console.log(starWarsChar.renderChar(data));
});
request.getEntity('people').then(data => {
	console.log(data);
	starWarsChar.renderChar(data);
});

[Михаил Ливач]

Stud, не, так не пойдет. Смотрите:

getEntity(entity) {
    return fetch(this.url + `${entity}`).then(response => {
      return response.json();
    });
  }

Этот метод класса Requests делает fetch + разбор json . Плюс он сам сооружает URL из частей, а Вам это не нужно, так как в полученном JSON уже полные URL ( https://ajax.test-danit.com/api/swapi/people/1 https://ajax.test-danit.com/api/swapi/people/2 и т.д. ).
Я заменил закомментированный код:

// const people = characters.map(elem => {
      // 	console.log(elem);
      // });

на такой ( основу взял отсюда ):

let requests = characters.map(url => fetch(url));

            Promise.all(requests)
              .then(responses => Promise.all(responses.map(r => r.json())))
  .then(characters => console.info(characters));

У этого кода есть недостаток: персонажи в разных фильмах одни и те же, а у меня каждый раз делается fetch() . Надо переделать так, чтобы результат кешировался.