How to access elements inside an array of objects in Javascript for a movieapp prototype

Question

I've only shown the JS part of my code because the.html part only has one input box with name="my-input" inside a form. What happens in this function is, if I enter 'Adventure' in my input box it gives me Edge of Tomorrow as the title of the movie and if I enter Romantic it gives me Lalaland likewise. Now what I want is, shown in the movieList1() function ie I have two objects with same genre 'Adventure' for example, then I would want both the movie title, 'Edge of Tomorrow' and 'Dark Force' to be shown in my empty list with id 'here'. I want title of all the movies to be shown if the genre is similar but I'm able to only get one movie title at a time that is shown. I'm new to JS and object and array of objects looks a little confusing. Any help would be very much appreciated.

 function movieList(){
 //This function is called in an 'onkeyup' event inside the input box.
 var x = document.forms["my-form"]["my-input"].value; // x has what the user enters inside the 
 inputbox.
 const objList = [{
       title:'Edge of Tommorow',
       Genre: 'Adventure',
 },
 {
    title:'DarkForce',
    Genre: 'Tactical',
 },
 {
    title:'LalaLand',
    Genre:'Romantic'

 }];
  objList.forEach((ele,index) => {
 if(ele.Genre=='Adventure' && x==ele.Genre) {
    var ans = ele.title;
    document.getElementById('here').innerHTML = ans; // 'here' has the id of an empty <li></li> where 
   the title is shown.
    
 }
 else if(ele.Genre=='Tactical' && x==ele.Genre)
 {
    var ans = ele.title;
    document.getElementById('here').innerHTML = ans;
 }
 else if(ele.Genre=='Romantic' && x==ele.Genre)
 {
    var ans = ele.title;
    document.getElementById('here').innerHTML = ans;
 }
 else if(x=='')
 {
    document.getElementById('here').innerHTML='';
 }

 });
 }

 function movieList1(){
 //This function is called in an 'onkeyup' event inside the input box.
 var x = document.forms["my-form"]["my-input"].value; // x has what the user enters inside the input 
 box.
 const objList = [{
       title:'Edge of Tommorow',
       Genre: 'Adventure',
 },
 {
    title:'DarkForce',
    Genre: 'Tactical, Adventure',
 },
 {
    title:'LalaLand',
    Genre:'Romantic,Tactical'

 }];
 objList.forEach((ele,index) => {
 if(ele.Genre=='Adventure' && x==ele.Genre) {
    var ans = ele.title;
    document.getElementById('here').innerHTML = ans; // 'here' has the id of an empty <li></li> where 
 the title is shown.
    
 }
 else if(ele.Genre=='Tactical' && x==ele.Genre)
 {
    var ans = ele.title;
    document.getElementById('here').innerHTML = ans;
 }
 else if(ele.Genre=='Romantic' && x==ele.Genre)
 {
    var ans = ele.title;
    document.getElementById('here').innerHTML = ans;
 }
 else if(x=='')
 {
    document.getElementById('here').innerHTML='';
 }

 });
 }

Answer 1

I'm guessing this is what you want to do.

const objList = [{
    title: 'Edge of Tommorow',
    Genre: 'Adventure',
},
{
    title: 'DarkForce',
    Genre: 'Tactical',
},
{
    title: 'LalaLand',
    Genre: 'Adventure'

}];

let Gen = "Adventure";  // suppose this is from your input 
let temp = [];   // create an array to store all similar genre title

objList.forEach(x => {
    if (x.Genre == Gen) {
        temp.push(x.title);
    }
})
console.log(temp);

Output:

[ 'Edge of Tommorow', 'LalaLand' ]

you can also store objects in the temp array.

Answer 2

Thinking you are expecting the output like:: (Method movieList1)

1. for inputGenre=Tactical output will be DarkForce,LalaLand
2. for inputGenre=Adventure output will be Edge of Tommorow,DarkForce

 document.getElementById("txtGenre").addEventListener("keyup",searchMovies) function searchMovies(){ let inputGenre=document.getElementById("txtGenre").value; const objList = [{ title:'Edge of Tommorow', Genre: 'Adventure', }, { title:'DarkForce', Genre: 'Tactical, Adventure', }, { title:'LalaLand', Genre:'Romantic,Tactical' }]; let filterdData =objList.filter(r=>r.Genre.includes(inputGenre)); console.log(filterdData); document.getElementById("result").innerHTML=filterdData.map(r=>r.Genre).join(","); }

 #result{ background-color:green; }

 Genre input: <input type="text" id="txtGenre" onClick="searchMovies"/> <br/> Output Movies List: <div id="result"> </div>

Answer 3

There reason you are getting only one movie name is, you are re-writing the HTML again with the latest movie that matched the criteria each time forEach runs. You need to adjust your variables and how you assign your result to HTML.

Lets keep ans out of the loop, so it doesn't get overwrittern. And write to html at the end, after you have filtered all per your input.

var ans = [];
objList.forEach((ele,index) => {
 if(ele.Genre=='Adventure' && x==ele.Genre) {
    ans.push(ele.title);
 } else if(ele.Genre=='Tactical' && x==ele.Genre) {
    ans.push(ele.title);
 } else if(ele.Genre=='Romantic' && x==ele.Genre) {
    ans.push(ele.title);
 }
 // We dont need this
 // else if(x=='') {
 //    document.getElementById('here').innerHTML='';
 // }
 });
document.getElementById('here').innerHTML = ans.join(', ');

At last, you join the answer using the in-built array function.

Now if you notice, your if statements are pretty much the same except for the hardcoded genre . So you could further refactor it.

var ans = [];
var genre = 'Adventure'; // assign your genre from input box here.
objList.forEach((ele,index) => {
  if (ele.Genre == genre && x==ele.Genre) {
    ans.push(ele.title);
  }
});
document.getElementById('here').innerHTML = ans.join(', ');

Now you would have a single if statement which is easy to understand and modify.