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

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 i.e. 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

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.

Leave a Reply

Your email address will not be published. Required fields are marked *