如何在Javascript中访问movieapp原型的对象数组中的元素

Question

我只展示了我的代码的 JS 部分，因为 .html 部分在一个表单中只有一个 name="my-input" 的输​​入框。 在此功能中发生的情况是，如果我在输入框中输入“冒险”，它会给我明日边缘作为电影的标题，如果我输入浪漫，它也会给我 Lalaland。现在我想要的是，显示在 movieList1() 函数中，例如，我有两个具有相同类型“冒险”的对象，然后我希望同时显示电影标题“明日边缘”和“黑暗力量”我的 ID 为“此处”的空列表。如果类型相似，我希望显示所有电影的标题，但我一次只能获得一个电影标题。我是 JS 新手，对象和对象数组看起来有点混乱。任何帮助将不胜感激。

 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

我猜这就是你想要做的。

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

输出：

[ 'Edge of Tommorow', 'LalaLand' ]

您还可以将对象存储在临时数组中。

Answer 2

认为您期望的输出如下:: (Method movieList1)

1. 对于 inputGenre=Tactical 输出将为 DarkForce,LalaLand
2. 对于 inputGenre=Adventure 输出将是明日边缘，黑暗力量

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

您只获得一个电影名称的原因是，您在每次 forEach 运行时使用符合条件的最新电影重新编写 HTML。您需要调整变量以及如何将结果分配给 HTML。

让ans 退出循环，这样它就不会被覆盖。在您根据输入过滤完所有内容后，最后写入 html。

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(', ');

最后，您使用内置数组函数加入答案。

现在，如果您注意到，您的if statements 几乎相同，除了硬编码类型。所以你可以进一步重构它。

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(', ');

现在您将拥有一个易于理解和修改的 if 语句。