如何在Javascript中列出所有数据？

Question

我从Firebase数据库中检索了所有电影的（Id，名称，img，score）信息。之后，在编辑精选部分列出了所有电影。

同时，我也尝试获取“本周上映”的所有电影，但是我无法做到。它只出现在编辑精选部分。我该怎么做？

var movieNo = 0;
let html = '';
var body = document.getElementById('body');

function AddItemsToTable(name, score, img, id) {
  let ul = document.createElement("ul");
  let li1 = document.createElement("li");
  let li2 = document.createElement("li");
  let li3 = document.createElement("li");
  let li4 = document.createElement("li");
  li1.innerHTML = img;
  li2.innerHTML = name;
  li3.innerHTML = score;
  li4.innerHTML = id;
  const movies = `<div class="content"><img src="${img}" ><p><a href="${id}">${name}</a></p> <p> <img src="img/mutlu.png" class="emoji"><a class="scoretxt">${score}</a> </p> </div>`;

  html = movies;
  body.innerHTML += html;
}


        function AddAllItemsToTable(TheMovies){
            movieNo=0;
            TheMovies.forEach(element => {
                AddItemsToTable(element.movieName, element.movieScore, element.movieImage,element.movieId);
        });
      }

        function getAllDataOnce(){
            const dbRef=ref(db);
            get(child(dbRef,"Movies"))
                    .then((snapshot)=>{
                        var movies=[];
                snapshot.forEach(childSnapshot => {
                    movies.push(childSnapshot.val())
                });
                AddAllItemsToTable(movies);
            });
        }
            window.onload= getAllDataOnce;

<div class="body" id="body">

  <div class="baslik">Opening This Week</div>
  <div class="baslik2"><a href="movies.html">See all</a></div>

  <div class="baslik">Editor's Picks</div>
  <div class="baslik2"><a href="movies.html">See all</a></div>


</div>

- beytullahdanis

---

我为您制作了一个适当的代码片段。请添加相关对象和如何调用函数。 - mplungjan

Answer 1

这是因为您正在使用body.innerHTML += html;将所有内容附加到body上。

现在我不确定函数AddItemsToTable从哪里调用，但您可以执行以下操作：

JS：

var movieNo = 0;
let html = '';

function AddItemsToTable(wrapperDOMElement, name, score, img, id) {
  let ul = document.createElement("ul");
  let li1 = document.createElement("li");
  let li2 = document.createElement("li");
  let li3 = document.createElement("li");
  let li4 = document.createElement("li");
  li1.innerHTML = img;
  li2.innerHTML = name;
  li3.innerHTML = score;
  li4.innerHTML = id;
  const movies = `<div class="content"><img src="${img}" ><p><a href="${id}">${name}</a></p> <p> <img src="img/mutlu.png" class="emoji"><a class="scoretxt">${score}</a> </p> </div>`;

  html = movies;
  wrapperDOMElement.innerHTML += html;
}

// For "Opening This Week". Pass the 'otherArgs' as passed earlier
AddItemsToTable(document.querySelector('#week', ...otherArgs)

// For "Editorial Pick"
AddItemsToTable(document.querySelector('#editor', ...otherArgs)

HTML:

<div class="body" id="body">

  <div class="baslik" id="week">Opening This Week</div>
  <div class="baslik2"><a href="movies.html">See all</a></div>

  <div class="baslik" id="editor">Editor's Picks</div>
  <div class="baslik2"><a href="movies.html">See all</a></div>


</div>

- Kanishk Anand

---

@beytullahdanis 在调用 AddItemsToTable 函数时，您需要传递 wrapperDOMElement。我相信它应该可以工作。 - Kanishk Anand

Answer 2

你正在将项目添加到 <div class="body">，但你想要的是将 API 结果填充到 <div class="body"> 的子 div 中，即 <div class="baslik">，由于这两个 div 包含不同的信息，因此你可以分别向两个 div 添加 id，如 id="openingThisWeek" 和 id="editorsPicks"，然后编写两个函数来填充数据！

function AddItemsToTable(name, score, img, id) {
  const movies = `<div class="content"><img src="${img}" ><p><a     href="${id}">${name}</a></p> <p> <img src="img/mutlu.png" class="emoji"><a class="scoretxt">${score}</a> </p> </div>`;
 
  return movies;
}

(function newMovies() {
  const openingThisWeek = document.getElementById("openingThisWeek");
  const html = AddItemsToTable('name', 'score', 'img', '_id');
  openingThisWeek.innerHTML += html ? html : 'Error';
})();

(function editorsPicks() {
  const editorsPicks = document.getElementById("editorsPicks");
  const html = AddItemsToTable('name', 'score', 'img', '_id');
  editorsPicks.innerHTML += html ? html : 'Error';
})();

.content {
  height: 100px;
  width: 100px;
  background-color: #444;
}

<div class="body" id="body">

  <div class="baslik" id="openingThisWeek">Opening This Week</div>
  <div class="baslik2"><a href="movies.html">See all</a></div>

  <div class="baslik" id="editorsPicks" >Editor's Picks</div>
  <div class="baslik2"><a href="movies.html">See all</a></div>


</div>

- Rishu kumar