0
283
Views¿Cómo enumerar todos los datos en Javascript?
Recuperé todas las películas en mi base de datos de Firebase con su información (Id, nombre, img, puntuación). Después de eso, enumeré todas las películas en la sección Selecciones del editor.
Además, estoy tratando de obtener todas las películas en la sección "Estreno esta semana" al mismo tiempo, pero no puedo hacerlo. Solo aparece en la sección Elección del editor. ¿Cómo puedo hacerlo?
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> 
2 answers
Answer question0
Esto se debe a que está agregando todo al cuerpo usando body.innerHTML += html;
Ahora no estoy seguro de dónde se llama a la función AddItemsToTable , pero puede hacer lo siguiente:
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>0
Está agregando elementos a <div class="body"> pero lo que desea es completar los resultados de la API en div secundario de <div class="body"> es decir <div class="baslik"> y dado que estos dos divs contiene información diferente que puede agregar id tanto al div como id="openingThisWeek" e id="editorsPicks" respectivamente. ¡Y luego haga dos funciones para completar los datos dentro de ellas!
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>