使用 JSON 数据以 HTML 格式呈现

Question

I have a small JSON like this:我有一个像这样的小 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" }
      ]
  }

I would like to use it in order to present a movie library in HTML.我想用它来以 HTML 格式呈现电影库。 I need to show title and posters with corresponding posterID .我需要使用相应的posterID显示title和posters 。

This is what I've already done:这是我已经做的：

<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

I know that it isn't much, but I have no idea how to continue with the rest of the code.我知道它并不多，但我不知道如何继续其余的代码。 All code needs to be in pure Javascript.所有代码都需要使用纯 Javascript。 Each movie should be in separate div like:每部电影都应该在单独的 div 中，例如：

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

I will appreciate any feedback and suggestions how to handle this.我将不胜感激如何处理此问题的任何反馈和建议。

Answer 1

You can just loop over every movie and find the correct poster based on the ID with array.filter() .您可以使用array.filter()遍历每部电影并根据 ID 找到正确的海报。 Afterwards you just have to add the new div to the correct DOM node之后你只需要将新的 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

Try this.尝试这个。

 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 个解决方案

解决方案1
0 已采纳 2019-12-18 15:11:35

解决方案2
-1 2019-12-18 15:07:27

使用 JSON 数据以 HTML 格式呈现

问题描述

2 个解决方案

解决方案1 0 已采纳 2019-12-18 15:11:35

解决方案2 -1 2019-12-18 15:07:27

解决方案1
0 已采纳 2019-12-18 15:11:35

解决方案2
-1 2019-12-18 15:07:27