'Using select option menu to match and select from object/array?
The for loop isn't fully executing. It only returns the first driver. For each time the menu selects the driver, the code should return the driver's name from the json file as well as the chance of winning. I also need to be able to reset the screen so that only one driver shows at a time. Help is appreciated.
Been looking at the code for a while...
javascript code
async function populate() {
const requestURL = 'nascar.json';
const request = new Request(requestURL);
const response = await fetch(request);
const nascarDrivers = await response.json();
findDriver(nascarDrivers);
}
function findDriver(obj) {
const e = document.getElementById("selector");
const selectorVal = e.value;
const H1 = document.createElement('h1');
const driverData = document.querySelector('.driver-data');
const drivers = obj['drivers'];
for (let i = 0; i < drivers.length; i++) {
if (selectorVal === drivers[i].name) {
const myArticle = document.createElement('article');
const myH2 = document.createElement('h2');
const myPara1 = document.createElement('p');
myH2.textContent = drivers[i].name;
myPara1.textContent = `Chance of Winning: ${drivers[i].raceWin}`;
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
driverData.appendChild(myArticle);
} else {
return 0;
}
}
}
populate();
html - using the select/option dropdown to retrieve the driver and chance of winning from the json file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nascar Data</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href ="styles.css">
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar-custom">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="index.html">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="features.html">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Select a Driver Below</h1>
<p class="lead">Find out if your driver is set for a big week at the track.</p>
</div>
</div>
<select class="custom-select" id="selector" onchange="populate()">
<option selected>Open this select menu</option>
<option value="Chase Elliot">Chase Elliot</option>
<option value="Kyle Larson">Kyle Larson</option>
<option value="William Byron">William Byron</option>
</select>
<div class = "driver-data">
</div>
<footer class="py-3 my-4">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li>
</ul>
<p class="text-center text-muted">© 2021 Company, Inc</p>
</footer>
<script src="index.js"></script>
</body>
css just a little bit of css since it's mostly in bootstrap
.driver-data {
font-size: 30px;
display: block;
height: 200px;
color: black;
}
json file - the for(let i=0; i < drivers.length ; i++) ...ect it's only returning the first set of information, ignoring the data for driver 2 and 3
{
"season" : 2022,
"sport" : "Nascar",
"drivers" : [
{
"name" : "Chase Elliot",
"raceWin" : "Low"
},
{
"name" : "Kyle Larson",
"raceWin" : "High"
},
{
"name" : "William Byron",
"raceWin" : "Medium"
}
]
}
Not sure as to why the loop wont finish for example i[0] should then go to i[1], then i[2] and this should show in the UI on the bootstrap page. Is something preventing it from continuing? Again, help would be appreciated as this has had me tangled up for a while.
In addition, if you have any other resources I could use to prevent getting stuck like this again, i'd appreciate it.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|