Javascript-JSON-DOM选择器:如何告诉JS从基于html选择器的JSON中过滤一些卡片?
所以基本上我有一个JSON,它代表泰坦尼克号上的人(乘客),我必须根据对HTML选择器的选择,通过JSON(乘客)的一部分的字符串值对他们进行过滤。 因此,每个人都是在不同的港口(登船)上船的,我需要使用HTML选择器(id=“bountselect”)根据他们到达的港口对他们进行筛选 这是一个单一的JSON数组:Javascript-JSON-DOM选择器:如何告诉JS从基于html选择器的JSON中过滤一些卡片?,javascript,arrays,json,dom,Javascript,Arrays,Json,Dom,所以基本上我有一个JSON,它代表泰坦尼克号上的人(乘客),我必须根据对HTML选择器的选择,通过JSON(乘客)的一部分的字符串值对他们进行过滤。 因此,每个人都是在不同的港口(登船)上船的,我需要使用HTML选择器(id=“bountselect”)根据他们到达的港口对他们进行筛选 这是一个单一的JSON数组: 'use strict'; let passengers = [{ "PassengerId": 1, "Survive
'use strict';
let passengers = [{
"PassengerId": 1,
"Survived": 0,
"Pclass": 3,
"Name": "Braund, Mr. Owen Harris",
"Sex": "male",
"Age": 22,
"SibSp": 1,
"Parch": 0,
"Ticket": "A/5 21171",
"Fare": 7.25,
"Cabin": "",
"Embarked": "S"
},
这是我需要使用的值
这是我的HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/74f80d89fd.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<!-- Search form -->
<form>
<div class="form-group">
</div>
<div class="form-group">
<select class="form-control" id="embarkSelect">
<option>Choose</option>
<option>C = Cherbourg</option>
<option>Q = Queenstown</option>
<option>S = Southampton</option>
</select>
</div>
</form>
<input type="text" id="txtFiltro">
<section id="sctCards">
</section>
<script src="js/passengers.js"></script>
<script src="js/logic.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
文件
选择
C=瑟堡
Q=昆斯敦
S=南安普敦
这是我的主要工作:
'use strict';
const seccCards = document.querySelector('#sctCards');
const inputFiltro = document.querySelector('#txtFiltro');
const imprimirCards = () => {
seccCards.innerHTML = '';
let filtro = inputFiltro.value.toLowerCase();
passengers.forEach(obj_passenger => {
if (obj_passenger.Name.toLowerCase().includes(filtro)) {
let card = document.createElement('div');
card.classList.add('card');
let passengerbeen = document.createElement('h2');
passengerbeen.innerText = obj_passenger.Name;
if (obj_passenger.Survived == 0) {
passengerbeen.classList.add('fas');
passengerbeen.classList.add('fa-skull');
}
let passengerF = document.createElement('p');
var survivalStatus;
if (obj_passenger.Survived == 1) {
survivalStatus = "sobrevivio";
} else {
survivalStatus = "fallecido";
}
passengerF.innerHTML = survivalStatus;
let voyage = document.createElement('p');
var voyageEmbark = " ";
if (obj_passenger.Embarked == "C") {
voyageEmbark = "Cherbourg";
} else if (obj_passenger.Embarked == "Q") {
voyageEmbark = "Queenstown";
} else {
voyageEmbark = "Southampton";
}
voyage.innerHTML = voyageEmbark;
if (obj_passenger.Embarked == ("C") && obj_passenger.Survived === 1) {
passengerbeen.classList.add('cSurvived');
} else if (obj_passenger.Embarked == ("C") && obj_passenger.Survived === 0) {
passengerbeen.classList.add('cDied');
} else if (obj_passenger.Embarked == ("Q") && obj_passenger.Survived === 1) {
passengerbeen.classList.add('qSurvived');
} else if (obj_passenger.Embarked == ("Q") && obj_passenger.Survived === 0) {
passengerbeen.classList.add('qDied');
} else if (obj_passenger.Embarked == ("S") && obj_passenger.Survived === 1) {
passengerbeen.classList.add('sSurvived');
} else {
passengerbeen.classList.add('sDied');
}
let passengerSex = document.createElement('p');
var passengerGender;
if (obj_passenger.sex == "male") {
passengerGender = "hombre";
} else {
passengerGender = "mujer";
}
passengerSex.innerHTML = passengerGender;
let passengerAge = document.createElement('p');
var passengerAgeMystery = " ";
if (obj_passenger.Age.length < 1) {
passengerAgeMystery = "Edad desconocida";
} else {
passengerAgeMystery = obj_passenger.Age;
}
passengerAge.innerHTML = passengerAgeMystery;
card.appendChild(passengerbeen);
card.appendChild(passengerF);
card.appendChild(passengerSex);
card.appendChild(passengerAge);
card.appendChild(voyage);
seccCards.appendChild(card);
}
});
};
//function filterEmbark
inputFiltro.addEventListener('keyup', imprimirCards);
imprimirCards();
“严格使用”;
const seccCards=document.querySelector('sctCards');
const inputFiltro=document.querySelector(“#txtFiltro”);
const imprimirCards=()=>{
seccCards.innerHTML='';
设filtro=inputFiltro.value.toLowerCase();
乘客。每名乘客(obj_乘客=>{
if(obj_passenger.Name.toLowerCase().includes(filtro)){
让card=document.createElement('div');
card.classList.add('card');
让passengerbeen=document.createElement('h2');
passengerbene.innerText=obj_passenger.Name;
如果(obj_乘客存活==0){
passengerbene.classList.add('fas');
passengerbene.classList.add('fa-skull');
}
让passengerF=document.createElement('p');
生存状态变量;
如果(obj_乘客存活==1){
survivalStatus=“Sobreviio”;
}否则{
生存状态=“fallecido”;
}
passengerF.innerHTML=生存状态;
让voyage=document.createElement('p');
var voyageEmbark=“”;
如果(obj_乘用车==“C”){
voyageEmbark=“瑟堡”;
}否则,如果(obj_乘客=Q){
voyageEmbark=“皇后镇”;
}否则{
voyageEmbark=“南安普敦”;
}
voyage.innerHTML=voyageEmbark;
如果(车载乘客==(“C”)和车载乘客===1){
passengerbene.classList.add('cSurvived');
}否则如果(obj_乘客上船==(“C”)和&obj_乘客幸存===0){
passengerbene.classList.add('cDied');
}否则如果(obj_乘客上船==(“Q”)&obj_乘客幸存===1){
passengerbene.classList.add('qSurvived');
}否则如果(obj_乘客上船==(“Q”)&obj_乘客幸存===0){
passengerbene.classList.add('qDied');
}否则,如果(车载乘客==(“S”)和车载乘客===1){
passengerbene.classList.add('sservived');
}否则{
passengerbene.classList.add('sDied');
}
设passengerSex=document.createElement('p');
var Passenger;
如果(obj_乘客性别=“男性”){
passengergener=“hombre”;
}否则{
passengergener=“mujer”;
}
passengerSex.innerHTML=passengergener;
让passengerAge=document.createElement('p');
var passengeragemystry=“”;
if(obj_乘客年龄长度<1){
passengeragemystry=“Edad desconocida”;
}否则{
乘客系统=obj_乘客年龄;
}
passengerAge.innerHTML=passengeragemystry;
儿童卡(旅客专用);
儿童卡(乘客卡);
儿童卡(passengerSex);
儿童卡(乘客卡);
儿童卡(航程);
seccards.appendChild(卡片);
}
});
};
//函数过滤器数据库
inputFiltro.addEventListener('keyup',不正确的命令);
不恰当的卡片();
因此,我需要知道如何连接HTML选择器和JS,以使用HTML选择器的(id=“bountselect”)选择值(bounk)过滤(乘客)Rip我没有通过作业xdRip我没有通过作业xd