I have an HTML file which I’m running with my chrome browser locally, and a json data file
in the same directory. I want to pull in the data in my JS code in script tag and it isn’t working.
Here is the function in my script tag where the problem is.
async function calculate_pn() {
var json = await fetch("./roll_data.json").then(r => r.json());
var pn = document.getElementById("PN").value;
//find data.
var od = json[pn]["OD"];
var core = json[pn]["Core"];
var curr_od = Number(document.getElementById("PN_OD_current").value);
var result = (curr_od*curr_od - core*core) / (od*od - core*core);
document.querySelector(".Result").innerHTML = result;
}
Here is a copy of my entire html code. I include it all in case you want to copy it and try it yourself.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RollCount</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<button type="button" onclick="enter_part_number()">Enter Part Number</button>
<h3>Or</h3>
<button type="button" onclick="enter_dimensions()">Enter roll dimensions</button>
<div class="DimensionOptions">
<label>Outer Diameter</label>
<input type="text" id="OD">
<label>Core Size</label>
<input type="text" id="Core">
<label>Current Outer Diameter</label>
<input type="text" id="DIM_OD_current">
<button type="button" onclick="calculate_dim()">Submit</button>
</div>
<div class="PartNumberOptions">
<label>Part Number</label>
<input type="text" id="PN">
<label>Current Outer Diameter</label>
<input type="text" id="PN_OD_current">
<button type="button" onclick="calculate_pn()">Submit</button>
</div>
<h3 class="Result"></h3>
<script>
//hide options when page first loads.
document.querySelector(".PartNumberOptions").style.visibility = "hidden";
document.querySelector(".DimensionOptions").style.visibility = "hidden";
//toggle
function enter_part_number() {
if (document.querySelector(".DimensionOptions").style.visibility == "visible") {
document.querySelector(".DimensionOptions").style.visibility = "hidden";
}
document.querySelector(".Result").innerHTML = "";
var input_option = document.querySelector(".PartNumberOptions");
input_option.style.visibility = input_option.style.visibility == "hidden" ? "visible" : "hidden";
}
function enter_dimensions() {
if (document.querySelector(".PartNumberOptions").style.visibility == "visible") {
document.querySelector(".PartNumberOptions").style.visibility = "hidden";
}
document.querySelector(".Result").innerHTML = "";
var input_option = document.querySelector(".DimensionOptions");
input_option.style.visibility = input_option.style.visibility == "hidden" ? "visible" : "hidden";
}
function calculate_dim() {
var od = Number(document.getElementById("OD").value);
var core = Number(document.getElementById("Core").value);
var curr_od = Number(document.getElementById("DIM_OD_current").value);
var result = (curr_od*curr_od - core*core) / (od*od - core*core);
document.querySelector(".Result").innerHTML = 100*result + "%";
}
function calculate_pn() {
var data = fetch("./roll_data.json");
var json = JSON.parse(data);
var pn = document.getElementById("PN").value;
//find data.
var od = json[pn]["OD"];
var core = json[pn]["Core"];
var curr_od = Number(document.getElementById("PN_OD_current").value);
var result = (curr_od*curr_od - core*core) / (od*od - core*core);
document.querySelector(".Result").innerHTML = result;
}
</script>
</body>
</html>
I tried running the HTML and entering one of the part numbers in my json file and it cannot find the data.
Here is my json file. It is very small.
{
"01030248":{"OD":8.13,"Core":4.75},
"01180081":{"OD":2,"Core":1.3125},
"01180281":{"OD":7.1875,"Core":3.1875},
"01180300":{"OD":2.75,"Core":1.25},
"01180372":{"OD":14.25,"Core":3},
"01188505":{"OD":4.5,"Core":3.1875},
"01188553":{"OD":6.625,"Core":3.1875},
"01188629":{"OD":6.875,"Core":3.25},
"01188630":{"OD":6.875,"Core":3.1875},
"01188706":{"OD":4.5625,"Core":3.25},
"01190181":{"OD":11.5,"Core":4},
"01190182":{"OD":11.5,"Core":4},
"01030076r":{"OD":13,"Core":3.25}
}