Не выводятся данные из api?

Question

[furcifer]

Здравствуйте! Помогите пожалуйста разобраться. Нужно создать js приложение, данные берутся из api, и должны выводиться веб странице. Ошибок в консоле нет, но ничего не выводится. С api данные доходят, проверял через console.log. Что написал не так и где может быть ошибка?

const wrap = document.createElement('div');
wrap.setAttribute('class', 'sw-wrap');
const list = document.createElement('div');
list.setAttribute('class', 'sw-list');

wrap.appendChild(list);


////////////////////////////////////////////
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 => {
		console.log(film.title);
		const wrap = document.createElement('div');
		wrap.setAttribute('class', 'sw-wrap');
		const list = document.createElement('div');
		list.setAttribute('class', 'sw-list');

		const item = document.createElement('div');
		item.setAttribute('class', 'sw-item');
		const info = document.createElement('div');
		info.setAttribute('class', 'sw-item__info');
		const description = document.createElement('div');
		description.setAttribute('class', 'opening_crawl');
		
		const title = document.createElement('h3');
		title.textContent=film.title;
		const episode = document.createElement('h3');
		episode.textContent=film.episode_id;
		const director = document.createElement('div');
		director.textContent=film.director;
		const release = document.createElement('div');
		release.textContent=film.release_date;
		
		list.appendChild(item);
		item.appendChild(info);
		item.appendChild(description);
		info.appendChild(title);
		info.appendChild(episode);
		info.appendChild(director);
		info.appendChild(release);
	});
}
swapi.send();

Должна получиться вот такая разметка.

<div class="sw-wrap">
			<div class="sw-list">
				<div class="sw-item">
					<div class="sw-item__info">
						<h3 class="title">A New Hope</h3>
						<h3 class="episode_id">4</h3>
						<div class="director">George Lucas</div>
						<div class="producer">Gary Kurtz, Rick McCallum</div>
						<div class="release_date">1977-05-25</div>
					</div>
					<div class="opening_crawl">.</div>
				</div>
			</div>
			
		</div>

Заранее спасибо за ответы

Answer 1

[Владимир Проскурин]

Вы никуда не добавляете созданные элементы. Вы заново создаете wrap и list, и никуда их не добавляете. Попробуйте так

const wrap = document.createElement('div');
wrap.setAttribute('class', 'sw-wrap');
const list = document.createElement('div');
list.setAttribute('class', 'sw-list');

wrap.appendChild(list);


////////////////////////////////////////////
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 => {
    console.log(film.title);
   
    const item = document.createElement('div');
    item.setAttribute('class', 'sw-item');
    const info = document.createElement('div');
    info.setAttribute('class', 'sw-item__info');
    const description = document.createElement('div');
    description.setAttribute('class', 'opening_crawl');
    
    const title = document.createElement('h3');
    title.textContent=film.title;
    const episode = document.createElement('h3');
    episode.textContent=film.episode_id;
    const director = document.createElement('div');
    director.textContent=film.director;
    const release = document.createElement('div');
    release.textContent=film.release_date;
    
    list.appendChild(item);
    item.appendChild(info);
    item.appendChild(description);
    info.appendChild(title);
    info.appendChild(episode);
    info.appendChild(director);
    info.appendChild(release);
  });
}
swapi.send();

UPD: Плюс еще вы не добавили wrap на страницу. Для этого в html создайте блок, например
<div id="content"></div>
и в него добавьте wrap

document.getElementById('content').appendChild(wrap);

Comments

[furcifer]

document.getElementById('content').appendChild(wrap);

Сделал это, в консоли выбивает ошибку Uncaught TypeError: Cannot read property 'appendChild' of null
тоже не могу понять почему

[Владимир Проскурин]

furcifer, вы в html (до скрипта) не создали блок с id="content"

[furcifer]

Владимир Проскурин, в том то и дело что создал

[Владимир Проскурин]

furcifer, выложите что сделали на jsfiddle.net
Вот что у меня выходит jsfiddle.net/p0aeqn95

[furcifer]

Владимир Проскурин, jsfiddle.net/furcifer21/dge5Lz1t/1
тут все действительно работает... но если запускать здесь
https://stackblitz.com/edit/js-gxscze
ничего не выводится...
Вам спасибо огромное за помощь, еще большее спасибо, если подскажите почему у меня в других редакторах не получается

[Владимир Проскурин]

furcifer, у меня ваш пример работает

Смотрите консоль, или может у вас блокировкищ рекламы какой-то не дает.

Answer 2

[Ihor Bratukh]

В таких задачах я бы Вам порекомендовал отделить логику и вывод.
Всего несколько строк на логику и вы получаете чистый шаблон для вывода данных на страницу.

(function() {
    'use strict';

    // Инициализируем объект методов swapi
    const swapi = {
        // Метод инициализации, принимает массив объектов данных из API и объект настроек
        init(response, setting) {
            // Зададим основной контейнер куда будут вставлятся данные
            // Можно явно указать в свойстве container или создать и вернуть в свойстве create()
            const element = setting.container || setting.create()
            // Выводим данные на страницу
            appendCollectionOutput(element, filterArray(response, (data, index) => {
                return parseHtml(setting.items(data, index))
            }))
        }
    }

    // Инициализация запроса к API
    ajax({
        url: 'https://swapi.co/api/films/',
        method: 'GET',
        contentType: 'application/json; charset=UTF-8',
        success(response) {
            // Инициализируем плагин, передаем данные из API и пишем объект настроек
            swapi.init(JSON.parse(response).results, {
                // Определяем куда будет вставлятся html из функции items(data)
                container: document.querySelector('.swapi-container'),
                // Определяем шаблон вывода
                items(data) {
                    return `
                        <div class="sw-wrap">
                            <div class="sw-list">
                                <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>
                                    <div class="opening_crawl">.</div>
                                </div>
                            </div>
                        </div>
                    `
                }
            })
        }
    })

    /**
      * Вставка HTMLCollection на страницу
      * @param {Node} element - Node элемент, куда будет вставлятся коллекция
      * @param {HTMLCollection} collection - масив HTMLCollection
    **/
    function appendCollectionOutput(element, collection) {
        for (let i = 0; i < collection.length; i++) {
            element.appendChild(collection[i][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} 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;
    }

    /**
      * XMLHttpRequest
      * @param {object} params - параметры запроса
      * url (string), method (string), contentType (string), data (any), async (boolean), success (function), error (function)
    **/
    function ajax(params) {
        var request = new XMLHttpRequest();
        request.open(params.method || 'GET', params.url || window.location.href, params.async || true);
        request.setRequestHeader('Content-Type', params.contentType || 'application/x-www-form-urlencoded; charset=UTF-8');
        request.onreadystatechange = function() {
            if (this.readyState === 4) {
                if (this.status >= 200 && this.status < 400) {
                    if (params.success) params.success(this.response, this.statusText, this.status);
                } else {
                    if (params.error) params.error(this);
                }
            }
        };
        request.send(params.data ? JSON.stringify(params.data) : '');
        request = null;
    }

})()

В объекте инициализации Вы можете указать куда вставлять html из функции items().
Или указать уже созданный элемент:

container: document.querySelector('.swapi-container')

Или создать и вернуть:

create() {
	document.body.insertAdjacentHTML('afterBegin', function() {
		return '<div class="swapi-container"></div>'
	}())
	return document.querySelector('.swapi-container')
}