How to list all data in Javascript?-CodePudding

I retrieved all movies in my Firebase database with their (Id, name, img, score) info. After that, I listed all movies under the Editor's Picks section.

Also, I am trying to get all movies under the "Opening This Week" section at the same time, but I can't do it. It only appears under the Editor's Pick section. How can I do it?

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


        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  id="body">

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

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


</div>

CodePudding user response：

This is because you're appending everything to body using body.innerHTML = html;

Now I'm not sure from where the function AddItemsToTable is getting called from, but you can do the following:

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  id="body">

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

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


</div>

CodePudding user response：

You are adding items to the <div > but what you want is to populate the API results in child div of <div > i.e <div > and since these two divs holds different informations you can add id to both the div as id="openingThisWeek" and id="editorsPicks" repectively. And then make two fuctions to populate data inside them!!

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  id="body">

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

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


</div>