如何访问电影应用原型的 JavaScript 对象数组中的元素

问题描述

我只展示了我的代码的 JS 部分，因为 .html 部分在表单中只有一个 name="my-input" 的输入框。在这个函数中发生的事情是，如果我在输入框中输入“冒险”，它会给我明日边缘作为电影的标题，如果我输入浪漫，它也会给我拉拉兰。现在我想要的是，显示在 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: 'Tactical,Adventure',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='';
 }

 });
 }

解决方法

我猜这就是你想要做的。

输出：

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

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

认为你期待这样的输出：(Method movieList1)

对于 inputGenre=战术输出将是 DarkForce,LalaLand
对于 inputGenre=Adventure 输出将是 Edge of Tomorrow,DarkForce

document.getElementById("txtGenre").addEventListener("keyup",searchMovies)

function searchMovies(){
let inputGenre=document.getElementById("txtGenre").value;
 const objList = [{
       title:'Edge of Tommorow',{
    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>

您只得到一个电影名称的原因是，每次 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 语句。

arrayobject javascript javascript-objects