如何在Javascript中列出所有資料？

我檢索了 Firebase 資料庫中的所有電影及其（Id、名稱、img、分數）資訊。之后，我在“編輯精選”部分列出了所有電影。

另外，我試圖同時將所有電影都放在“本周上映”部分下，但我做不到。它僅出現在“編輯選擇”部分下。我該怎么做？

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 ><img src="${img}" ><p><a href="${id}">${name}</a></p> <p> <img src="img/mutlu.png" ><a >${score}</a> </p> </div>`;

  html = movies;
  body.innerHTML  = html;
}

<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>

uj5u.com熱心網友回復：

這是因為您正在使用 body.innerHTML = html;

現在我不確定從哪里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 ><img src="${img}" ><p><a href="${id}">${name}</a></p> <p> <img src="img/mutlu.png" ><a >${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>

uj5u.com熱心網友回復：

您將專案添加到<div >，但你想要的是填充在孩子DIV API結果<div >，即<div >由于這些兩個div持有不同的資訊，您可以添加id到兩個DIV作為id="openingThisWeek"和id="editorsPicks"repectively。然后做兩個函式來填充其中的資料！！

function AddItemsToTable(name, score, img, id) {
  const movies = `<div ><img src="${img}" ><p><a     href="${id}">${name}</a></p> <p> <img src="img/mutlu.png" ><a >${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>

標籤：javascript html

上一篇：如何從react-router-dom6中的位置訪問資料

下一篇：當i標簽在DIV內單擊時添加添加新類的最佳方法