Javascript 通过JSON字段搜索名称

我正在尝试构建一个小型web应用程序，它可以提取JSON文件的格式。我能够获得显示的信息，但我希望根据所选值限制显示内容

这是我的html

<div class="wrapper">
<div class="profile">
    <select>
    <option value="default" selected>Choose a superhero...</option>
    <option value="1111">Superman</option>
    <option value="2222">Batman</option>
    <option value="3333">Spiderman</option>
</select>
<button id="showPeopleButton">Show People</button>
<table id="userdata" border="2" style="display: none">
  <thead>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
    <th>City</th>
  </thead>
  <tbody>

  </tbody>
</table>

</div>
</div>

选择一个超级英雄。。。
超人
蝙蝠侠
蜘蛛侠
向人们展示
名字
姓
电子邮件地址
城市

现在是我的JavaScript。我已经将JSON数据放在JavaScript中

/* Listen for the Show People button to be clicked */
$('#showPeopleButton').click(function() {
    // Call the showPeople() function
    showPeople();
});

// Json data
var people = [{
        "firstName": "Clark",
        "lastName": "Kent",
        "job": "Reporter",
        "roll": 20,
        "heroId": 1111
    },
    {
        "firstName": "Bruce",
        "lastName": "Wayne",
        "job": "Playboy",
        "roll": 30,
        "heroid": 2222
    },
    {
        "firstName": "Peter",
        "lastName": "Parker",
        "job": "Photographer",
        "roll": 40,
        "heroId": 3333
    }];

// Show People function will draw the table
function showPeople() {
    // Show table
    $('#userdata').show();

    //Populate table  
    $.each(people, function(index, person) {
        var tableRow =
            "<tr>" +
            "<td>" + person.firstName + "</td>" +
            "<td>" + person.lastName + "</td>" +
            "<td>" + person.job + "</td>" +
            "<td>" + person.roll + "</td>" +
            "</tr>";
        $(tableRow).appendTo("#userdata tbody");
    });

}

/*收听要单击的显示人员按钮*/
$（“#showPeopleButton”）。单击（函数（）{
//调用showPeople（）函数
showPeople（）；
});
//Json数据
var people=[{
“名字”：“克拉克”，
“姓氏”：“肯特”，
“工作”：“记者”，
“滚动”：20，
“英雄”：1111
},
{
“名字”：“布鲁斯”，
“姓氏”：“韦恩”，
“工作”：“花花公子”，
“滚动”：30，
“英雄”：2222
},
{
“名字”：“彼得”，
“姓氏”：“帕克”，
“工作”：“摄影师”，
“滚动”：40，
“英雄”：3333
}];
//显示人物功能将绘制表格
函数showPeople（）{
//展示台
$（'#userdata'）.show（）；
//填充表
$。每个（人员、职能（索引、人员）{
var表格行=
"" +
“”+person.firstName+“”+
“”+person.lastName+“”+
“”+person.job+“”+
“”+person.roll+“”+
"";
$（tableRow）.appendTo（“#userdata tbody”）；
});
}

我怎样才能让它为我工作？

• 您需要清空

  tbody

  元素
• 使用

  $（'#hero option:checked'）.val（）检查horeId和所选选项

/*收听要单击的显示人员按钮*/
$（“#showPeopleButton”）。单击（函数（）{
//调用showPeople（）函数
showPeople（）；
});
//Json数据
var people=[{
“名字”：“克拉克”，
“姓氏”：“肯特”，
“工作”：“记者”，
“滚动”：20，
“英雄”：1111
},
{
“名字”：“布鲁斯”，
“姓氏”：“韦恩”，
“工作”：“花花公子”，
“滚动”：30，
“英雄”：2222
},
{
“名字”：“彼得”，
“姓氏”：“帕克”，
“工作”：“摄影师”，
“滚动”：40，
“英雄”：3333
}
];
//显示人物功能将绘制表格
函数showPeople（）{
//展示台
$（'#userdata'）.show（）；
var hero=$（“#hero选项：选中”）.val（）；
//填充表
$（“#userdata tbody”）.empty（）
$。每个（人员、职能（索引、人员）{
if（hero==person.herod）{
var表格行=
"" +
“”+person.firstName+“”+
“”+person.lastName+“”+
“”+person.job+“”+
“”+person.roll+“”+
""
$（tableRow）.appendTo（“#userdata tbody”）；
}
});
}

选择一个超级英雄。。。
超人
蝙蝠侠
蜘蛛侠
向人们展示
名字
姓
电子邮件地址
城市

• 您需要清空

  tbody

  元素
• 使用

  $（'#hero option:checked'）.val（）检查horeId和所选选项

/*收听要单击的显示人员按钮*/
$（“#showPeopleButton”）。单击（函数（）{
//调用showPeople（）函数
showPeople（）；
});
//Json数据
var people=[{
“名字”：“克拉克”，
“姓氏”：“肯特”，
“工作”：“记者”，
“滚动”：20，
“英雄”：1111
},
{
“名字”：“布鲁斯”，
“姓氏”：“韦恩”，
“工作”：“花花公子”，
“滚动”：30，
“英雄”：2222
},
{
“名字”：“彼得”，
“姓氏”：“帕克”，
“工作”：“摄影师”，
“滚动”：40，
“英雄”：3333
}
];
//显示人物功能将绘制表格
函数showPeople（）{
//展示台
$（'#userdata'）.show（）；
var hero=$（“#hero选项：选中”）.val（）；
//填充表
$（“#userdata tbody”）.empty（）
$。每个（人员、职能（索引、人员）{
if（hero==person.herod）{
var表格行=
"" +
“”+person.firstName+“”+
“”+person.lastName+“”+
“”+person.job+“”+
“”+person.roll+“”+
""
$（tableRow）.appendTo（“#userdata tbody”）；
}
});
}

选择一个超级英雄。。。
超人
蝙蝠侠
蜘蛛侠
向人们展示
名字
姓
电子邮件地址
城市

您可以从

获取英雄：

然后进行比较，使用

返回

退出当前的

迭代。每个

（相当于for循环中的

继续

，而不是像

中断

那样的完全退出）

/*收听要单击的显示人员按钮*/
$（“#showPeopleButton”）。单击（函数（）{
//调用showPeople（）函数
showPeople（）；
});
//Json数据
var people=[{
“名字”：“克拉克”，
“姓氏”：“肯特”，
“工作”：“记者”，
“滚动”：20，
“英雄”：1111
},
{
“名字”：“布鲁斯”，
“姓氏”：“韦恩”，
“工作”：“花花公子”，
“滚动”：30，
“英雄”：2222
},
{
“名字”：“彼得”，
“姓氏”：“帕克”，
“工作”：“摄影师”，
“滚动”：40，
“英雄”：3333
}
];
//显示人物功能将绘制表格
函数showPeople（）{
//展示台
$（'#userdata'）.show（）.find（“tbody”）.empty（）；
var海洛因=$（“.profile>select”）.val（）；
//填充表
$。每个（人员、职能（索引、人员）{
如果（person.海洛因！=海洛因）返回；
var表格行=
"" +
“”+person.firstName+“”+
“”+person.lastName+“”+
“”+person.job+“”+
“”+person.roll+“”+
""
$（tableRow）.appendTo（“#userdata tbody”）；
});
}

选择一个超级英雄。。。
超人
蝙蝠侠
蜘蛛侠
向人们展示
名字
洛杉矶
var heroid = $(".profile>select").val();

$.each(people, function(index, person) {
    if (person.heroId != heroid) return;

    /* Listen for the Show People button to be clicked */
$('#showPeopleButton').click(function() {
  // Call the showPeople() function
  showPeople();
});

var heroes = [{id: 1111, name: 'Superman'}, {id: 2222, name:'Batman'}, {id: 3333, name: 'Spiderman'}];
// Json data
var people = [{
    "firstName": "Clark",
    "lastName": "Kent",
    "job": "Reporter",
    "roll": 20,
    "heroId": 1111
  },
  {
    "firstName": "Bruce",
    "lastName": "Wayne",
    "job": "Playboy",
    "roll": 30,
    "heroId": 2222
  },
  {
    "firstName": "Peter",
    "lastName": "Parker",
    "job": "Photographer",
    "roll": 40,
    "heroId": 3333
  }
];

// Show People function will draw the table
function showPeople() {
  // Show table
  $('#userdata').show();

  // Reset table
  $("#userdata tbody").empty();

  //Populate table  
  var heroId = Number($(".profile select").val());
  var filteredPeople = people.filter(person => person.heroId === heroId);

  $.each(filteredPeople, function(index, person) {
    var tableRow =
      "<tr>" +
      "<td>" + person.firstName + "</td>" +
      "<td>" + person.lastName + "</td>" +
      "<td>" + person.job + "</td>" +
      "<td>" + person.roll + "</td>" +
      "</tr>"
    $(tableRow).appendTo("#userdata tbody");
  });

}