Question

我有一个像这样的小JSON：

   const filmsBase = {
      "films": [
          { "id": 1, "posterId": 111, "title": "The Matrix" },
          { "id": 2, "posterId": 222, "title": "Joker" },
          { "id": 3, "posterId": 333, "title": "The Green Mile" },
      ],
      "posters": [
          { "id": 111, "url": "https://m.media-amazon.com/images/M/MV5BNzQzOTk3OTAtNDQ0Zi00ZTVkLWI0MTEtMDllZjNkYzNjNTc4L2ltYWdlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_UX182_CR0,0,182,268_AL_.jpg" },
          { "id": 222, "url": "https://m.media-amazon.com/images/M/MV5BNGVjNWI4ZGUtNzE0MS00YTJmLWE0ZDctN2ZiYTk2YmI3NTYyXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_UX182_CR0,0,182,268_AL_.jpg" },
          { "id": 333, "url": "https://m.media-amazon.com/images/M/MV5BMTUxMzQyNjA5MF5BMl5BanBnXkFtZTYwOTU2NTY3._V1_UX182_CR0,0,182,268_AL_.jpg" }
      ]
  }

我想使用它来呈现HTML中的电影库。我需要显示title和posters以及相应的posterID。

这是我已经做的：

<body>
    <div id="films"></div>
</body>

filmsBase.films.forEach(function(film){
    titles +=`<h2 class="title">${film.title}</h2>`
})
filmsBase.posters.forEach(function(poster){
    posters +=`<img class="cover" src="${poster.url}">`
})

document.getElementById("films").innerHTML = posters
document.getElementById("films").innerHTML = titles

我知道不多，但是我不知道如何继续其余的代码。所有代码都必须使用纯Javascript。每部电影应位于单独的div中，例如：

<body>
    <div id="films">
        <div class="film">
            <h2 class="title">film.title</h2>
            <img class="poster" src="poster.url">
        </div>
    </div>
</body>

对于处理此问题的任何反馈和建议，我将不胜感激。

Answer 1

您可以循环播放每部电影，并使用array.filter()根据ID查找正确的海报。然后，您只需将新的div添加到正确的DOM节点

const filmsBase = {
  "films": [
      { "id": 1, "posterId": 111, "title": "The Matrix" },
      { "id": 2, "posterId": 222, "title": "Joker" },
      { "id": 3, "posterId": 333, "title": "The Green Mile" },
  ],
  "posters": [
      { "id": 111, "url": "https://m.media-amazon.com/images/M/MV5BNzQzOTk3OTAtNDQ0Zi00ZTVkLWI0MTEtMDllZjNkYzNjNTc4L2ltYWdlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_UX182_CR0,0,182,268_AL_.jpg" },
      { "id": 222, "url": "https://m.media-amazon.com/images/M/MV5BNGVjNWI4ZGUtNzE0MS00YTJmLWE0ZDctN2ZiYTk2YmI3NTYyXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_UX182_CR0,0,182,268_AL_.jpg" },
      { "id": 333, "url": "https://m.media-amazon.com/images/M/MV5BMTUxMzQyNjA5MF5BMl5BanBnXkFtZTYwOTU2NTY3._V1_UX182_CR0,0,182,268_AL_.jpg" }
  ]
}

。

const filmsNode = document.getElementById("films");    

// Loop over films
filmsBase.films.forEach(film => {
  // Find correct poster
  const poster = filmsBase.posters.filter(
    poster => poster.id === film.posterId
  );

  // Create div to put content in
  const newFilm = document.createElement("div");
  newFilm.classList.add("film");

  // Add html to div
  newFilm.innerHTML = `
    <h2 class="title">${film.title}</h2>
    <img class="poster" src="${poster[0].url}" />
  `;

  // Add film to the DOM
  filmsNode.appendChild(newFilm);
});

Answer 2

尝试一下。

const filmsBase = {
      "films": [
          { "id": 1, "posterId": 111, "title": "The Matrix" },
          { "id": 2, "posterId": 222, "title": "Joker" },
          { "id": 3, "posterId": 333, "title": "The Green Mile" },
      ],
      "posters": [
          { "id": 111, "url": "https://m.media-amazon.com/images/M/MV5BNzQzOTk3OTAtNDQ0Zi00ZTVkLWI0MTEtMDllZjNkYzNjNTc4L2ltYWdlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_UX182_CR0,0,182,268_AL_.jpg" },
          { "id": 222, "url": "https://m.media-amazon.com/images/M/MV5BNGVjNWI4ZGUtNzE0MS00YTJmLWE0ZDctN2ZiYTk2YmI3NTYyXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_UX182_CR0,0,182,268_AL_.jpg" },
          { "id": 333, "url": "https://m.media-amazon.com/images/M/MV5BMTUxMzQyNjA5MF5BMl5BanBnXkFtZTYwOTU2NTY3._V1_UX182_CR0,0,182,268_AL_.jpg" }
      ]
  }

const placeholder = document.getElementById("films");
filmsBase.films.forEach(function(film){
  let el = document.createElement("h2");
  el.setAttribute("title", film.title);
  el.innerText = film.title;
  placeholder.appendChild(el);
  let el2 = document.createElement("img");
  var pic = filmsBase.posters.find(function(element) { 
      return element.id === film.posterId; 
      }); 
  el2.setAttribute("src", pic.url);
  placeholder.appendChild(el2);
})

<body>
    <div id="films"></div>
</body>

使用JSON数据以HTML格式显示

2 个答案: