I am currently working on a project where I am tasked w/ reading into a JSON file, displaying the current/default values, and can have those values be overwritten through input from a user, which in turn would also overwrite the original JSON file w/ the new values.
I am currently stuck figuring out how to initially read or load the JSON file in order to display the default values for every key, and be able to parse through and grab the values and/or edit the values as well.
I'm sorry if this is a basic question, I looked up a lot of different ways of doing this that involved jQuery or AJAX, but I wasn't able to get it working.
Here is my JSON FILE. (Parameters.json)
{
"IMax": 16384,
"IMin": 1,
"DynamicRange": 72,
"I50": 16,
"I75": 192
}
Here is my code. (Parameters.html)
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<link rel="stylesheet" href="ParametersCSS.css">
<title>Map Plot Parameter</title>
</head>
<body>
<h1>Map Plot Parameters</h1>
<hr>
<br>
<form id='parameterForm'>
<div class='parameter-form'>
<script language="javascript" type="text/javascript">
//Where I would initially read into the JSON file
</script>
<h4>IMax</h4>
<p>Parameter 1: <input type="text" id="Para1" value="Int Value..."></p>
<br>
<h4>IMin</h4>
<p>Parameter 2: <input type="text" id="Para2" value="Int Value..."></p>
<br>
<h4>Dynamic Range</h4>
<p>Parameter 3: <input type="text" id="Para3" value="Int Value..."></p>
<br>
<h4>I50</h4>
<p>Parameter 4: <input type="text" id="Para4" value="Int Value..."></p>
<br>
<h4>I75</h4>
<p>Parameter 5: <input type="text" id="Para5" value="Int Value..."></p>
<br>
<div class='wrapper'>
<input class="button" type="button" value="submit"
onclick="saveParameters()">
</div>
<script language="javascript" type="text/javascript">
//Where I would save the new parameters, which would be written into the
//original JSON file.
function saveParameters() {
var Para1 = document.getElementById("Para1").value;
var Para2 = document.getElementById("Para2").value;
var Para3 = document.getElementById("Para3").value;
var Para4 = document.getElementById("Para4").value;
var Para5 = document.getElementById("Para5").value;
document.write(Para1, Para2, Para3, Para4, Para5);
}
</script>
</div>
</form>
</body>
</html>
Here is my CSS. (ParametersCSS.css)
h1 {
text-align: center;
}
h4{
text-align: center;
}
p {
text-align: center;
}
.wrapper{
text-align: center;
margin-top: 10px
}
.button {
top: 50%
}
My code essentially takes in values that I want to be able to write into my original JSON file. I also want it to read into the file initially to display the original values of the JSON FILE
