Код скрипта не втягивает данные Json в div
поэтому у меня есть файл javascript, который извлекает содержимое из файла json и использует данные для заполнения div на странице индекса с именем 'content', это мой файл javascript, но в настоящее время моя страница индекса пуста:
var wrapper = document.getElementById("content");
function init() {
loadJSON(function(e) {
for (var t = JSON.parse(e), n = Object.keys(t.film).length, a = 0; a < n; a++) {
var i = document.createElement("img");
i.src = t.films[a].url, i.setAttribute("class", "filmimage"), wrapper.appendChild(i)
}
})
}
function loadJSON(e) {
var t = new XMLHttpRequest;
t.overrideMimeType("application/json"),
t.open("GET", "dist/json/data.json", !0),
t.onreadystatechange = function() {
4 === t.readyState && "200" === t.status && e(t.responseText)
}, t.send(null)
}
document.addEventListener("DOMContentLoaded", function() {
init()
});
@RobinB Сейчас он у меня только локально, есть ли способ отправить вам файлы или что-то в этом роде?
Пожалуйста, заархивируйте файл и поделитесь ссылкой здесь. Поделюсь решением
Некоторые предложения, в том числе относительно вашего запутанного стиля кодирования: pastebin.com/AY7fU7sF
@RobinB Я добавил ссылку для скачивания в вопрос, дайте мне знать, если вам что-нибудь понадобится!
Во-первых, вам понадобится 200 вместо "200", если вы собираетесь использовать ===. И у вас есть Object.keys(t.film), но он должен быть t.films.
В своем ответе я разместил новый js .. было две ошибки: одна - удалить "из 200", а другая - пленка должна быть пленкой.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вот исправленный скрипт, использующий fetch() вместо устаревшего XMLHttpRequest:
var wrapper = document.getElementById("content");
function init() {
fetch("dist/json/data.json").then(r => r.json())
.then(data => {
data.films.forEach(film => {
var i = document.createElement("img");
i.src = film.url;
i.classList.add("filmimage"); // use CSS instead: #content img { ... }
wrapper.appendChild(i)
});
})
.catch(e => console.info(e));
}
document.addEventListener("DOMContentLoaded", init);
Вы можете использовать этот код в своем файле js
var wrapper = document.getElementById("content");
function init() {
loadJSON(function(e) {
console.info(e);
for (var t = JSON.parse(e), n = Object.keys(t.films).length, a = 0; a < n; a++) {
var i = document.createElement("img");
i.src = t.films[a].url, i.setAttribute("class", "filmimage"), wrapper.appendChild(i)
}
});
}
function loadJSON(e) {
var t = new XMLHttpRequest;
t.overrideMimeType("application/json"),
t.open("GET", "dist/json/data.json", !0),
t.onreadystatechange = function() {
4 === t.readyState && "200" == t.status && e(t.responseText)
}, t.send(null)
}
init();
Часть Object.keys() - ерунда; t.films - это массив. Это не ваша вина, но все равно нужно исправить.
Ах, это работает, спасибо! Извините, я пропустил эту часть, но еще раз большое вам спасибо!
Код в порядке, пожалуйста, поделитесь URL-адресом, где я могу это проверить