我正在一家电影院的网站上,我有一个约会清单。当您单击某个日期时,我想显示当天正在播放的电影。
我尝试使用以下代码进行操作:
const handleDayClick = ({currentTarget: $li}) => {
loadFilmData($li);
};
const loadFilmData = $li => {
setActiveElement($li);
fetch(`./assets/data/buda.json`)
.then(r => r.json())
.then(data => parseMovieDetail(data));
}
const setActiveElement = $li => {
const $old = document.querySelector(`.active`);
if ($old) {
$old.classList.remove(`active`);
}
$li.classList.add(`active`);
}
const parseMovieDetail = date => {
const $container = document.querySelector(`.movies`);
$container.innerHTML = ``;
date.schedule.forEach(m => {
$movieList = document.querySelector(`.movies`);
const $article = document.createElement(`article`);
$article.classList.add(`movie`);
$movieList.appendChild($article);
const $h3 = document.createElement(`h3`);
$h3.textContent = `${m.title}`;
$article.appendChild($h3);
const $img = document.createElement(`img`);
$img.setAttribute(`src`, `assets/img/${m.img}`);
$img.setAttribute(`width`, 200);
$img.setAttribute(`height`, `auto`);
$article.appendChild($img);
const $p = document.createElement(`p`);
$p.classList.add(`description`);
$p.textContent = `${m.description}`;
$article.appendChild($p);
const $div = document.createElement(`div`);
$div.classList.add(`meta`);
$article.appendChild($div);
const $ul = document.createElement(`ul`);
$ul.classList.add(`screenings`);
$div.appendChild($ul)
const $li = document.createElement(`li`);
$li.textContent = `${m.screenings}`;
$ul.appendChild($li);
const $p2 = document.createElement(`p`);
$p2.textContent = `Zaal ${m.room}`;
$div.appendChild($p2);
})
};
所有HTML元素的输出为undefined
。我想我搞砸了要求正确的JSON数据。
这是我的json文件的一小部分:
"schedule": [
{
"day": "Maandag",
"date": "22/05/2017",
"movies": [
{
"title": "I Am Not Your Negro",
"description": "In deze Belgische coproductie vertrekt Raoul Peck van een onafgewerkte roman van de Afro-Amerikaanse schrijver James Baldwin voor een reis door de zwarte geschiedenis die de Burgerrechtenbeweging uit de jaren zestig verbindt met het huidige #BlackLivesMatter. De tekst, geschreven in 1979, is helaas nog altijd heel actueel en bespreekt een diep geworteld racisme. De film is een treffend betoog op basis van archiefbeelden, filmfragmenten en actuele nieuwsbeelden die aan elkaar gepraat worden door de bezwerende stem van Samuel L. Jackson.",
"img": "negro.jpg",
"room": 1,
"screenings": [
"20:25"
],
"kids":false
},
{
"title": "Lady MacBeth",
"description": "De jonge Katherine leeft Northumberland in 1865. Ze is er gevangene in eigen huis en wordt er door haar sadistische echtgenoot en diens autoritaire vader tot op het bot vernederd. Leven in zo’n liefdeloze wereld moet in deze krachtige kostuumfilm wel tot excessen leiden. Wanneer Katherine een allesverzengende relatie aanknoopt met een knecht gaat het mis. Een indrukwekkende speelfilmdebuut van theater- en operaregisseur William Oldroyd.",
"img": "macbeth.jpg",
"room": 2,
"screenings": [
"20:15"
],
"kids":false
},
{
"title": "Tarde para la Ira",
"description": "Na acht jaar in de gevangenis als gevolg van een misgelopen sieradenroof wil Curro maar één ding: een nieuw leven beginnen met zijn familie. Zijn komst leidt echter tot spanningen bij zijn broer en diens vriendin, die een rustig leventje leiden. Bovendien verandert de ontmoeting met Joseph, een mysterieuze vreemdeling, zijn plannen. Hij komt terecht in een onomkeerbare, donkere reis terug naar het verleden, vol wraak. Deze debuutfilm van acteur Raúl Arévalo won recent 4 Goyas (de Spaanse variant van de Oscar) waaronder die voor Beste Film.",
"room": 3,
"img": "tarde.jpg",
"screenings": [
"20:15"
],
"kids":false
}
]
},
{
"day": "Dinsdag",
"date": "23/05/2017",
"movies": [
{
"title": "Django",
"description": "De virtuoze gitarist Django Reinhardt, geboren in een Henegouws dorp, was een Roma. Op het moment dat hij in Parijs concertzalen laat vollopen, vallen de Duitsers Frankrijk binnen. De film focust op de oorlogsjaren van de virtuoze gitarist en zoomt in op zijn poging om naar Zwitserland te vluchten. De aandacht ligt op het droevige lot van de Roma-zigeuners, een bevolkingsgroep die door de nazi’s vervolgd werden, tijdens die oorlogsjaren. De aanstekelijke muziek wordt vertolkt door het Rosenberg Trio.",
"room": 1,
"img": "django.jpg",
"screenings": [
"20:15"
],
"kids":false
},
{
"title": "March of the Penguins 2",
"description": "In March of The Penguins 2 keert regisseur Luc Jacquet terug met een even verbluffend vervolg, en voert de kijker met behulp van drones en onderwatercamera’s mee naar onherbergzame plekken op Antarctica. Ditmaal volgen we een jonge pinguïn die op het punt staat zijn eerste grote reis te maken, vol gevaar en obstakels. Het vervolgverhaal vertelt de lotsbestemming van één pinguïn, wiens krachtige en mysterieuze instincten hem in staat stellen om te overleven.",
"room": 3,
"img": "march.jpg",
"screenings": [
"20:15"
],
"kids":true
},
{
"title": "Their Finest",
"description": "In deze charmante komedie staan twee scenarioschrijvers centraal. Tijdens WOII krijgen ze de opdracht een fictiefilm te maken die het moreel van de Britten moet opschroeven. Tijdens het schrijversproces krijgen ze voortdurend nieuwe richtlijnen van het ministerie van Oorlog om het script aan te passen. Om uiteindelijk de Amerikanen ook over de streep te trekken om deel te nemen aan de oorlog moeten ze de hoofdrol herschrijven met een Amerikaanse held. Een puike verzameling Britse acteurs zijn de kers op de verrukkelijke taart.",
"room": 3,
"img": "finest.jpg",
"screenings": [
"20:15"
],
"kids":false
}
]
}
有人看到我在做什么错吗?