如何访问 Javascript 中的对象数组内的元素以获取 movieapp 原型

Question

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

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

Output：

[ 'Edge of Tommorow', 'LalaLand' ]

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

Answer 2

认为您期待 output 喜欢:: (方法movieList1)

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

 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

您只获得一个电影名称的原因是，您正在重新编写 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(', ');

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

现在，如果您注意到，您的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 语句。