I am looking to retrieve pricing information from a JSON file based on the Room, Season, and number of nights specified.
Currently, the HTML code triggers an alert each time one of the three form inputs is selected.
<!DOCTYPE html>
<html>
<body>
<script src="showprice.js"></script>
<h3>Daily Rate Calculator</h3>
<form>
<label for="aroom">Choose Room:</label>
<div id="room"></div><br>
<label for="aseason">Choose Season:</label>
<div id="season"></div>
<br>
<label for="days">Number of days:</label>
<select name="days" id="days" onchange=loadNumber(this.value)>
<option value="-">-</option>
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
<option value="6">7+</option>
</select>
</form>
<br>
<div id="demo"></div>
</body>
</html>
Here's the current implementation of showprice.js:
var troom
var tseason
var tday
async function start(){
const response=await fetch("pricing.json")
const data=await response.json()
createRList(data.rooms)
console.log (data.rooms)
createSList(data.rooms.Spanish)
//console.log (data.message.rooms.keys)
createRate(data.message.troom.tseason[tday])
console.log (data.message.troom.Entries(tseason)[tday])
}
start()
function createRList(rListic){
document.getElementById("room").innerHTML=`
${Object.keys(rListic).map(function(roomic){
return `<input onMouseUp="loadByRoom(this.value)" type="radio" id="${roomic}"
name="aroom" value="${roomic}">
<label for="${roomic}">${roomic}</label><br>`
}).join('')
}`
}
function createSList(sList){
document.getElementById("season").innerHTML=`
${Object.keys(sList).map(function(seasonic){
return `<input onClick="loadBySeason(this.value)" type="radio" id="${seasonic}"
name="aseason" value="${seasonic}">
<label for="${seasonic}">${seasonic}</label><br>`
}).join('')
}`
}
function loadByRoom(roomic) {
alert (roomic)
troom=roomic
}
function loadBySeason(seasonic) {
alert (seasonic)
tseason=seasonic
}
function loadNumber(days) {
alert (days)
tday=days
}
function createRate(drate) {
document.getElementById("demo").innerHTML=`Daily Rate: £${drate}`
}
This is the content of pricing.json:
{ "rooms": {
"Greek": { "Peak":[200,190,180,170,160,150,140] ,"Mid":[190,180,170,160,150,140,130],"Off":[180,170,160,150,140,130,120]},
"Spanish": { "Peak":[220,210,200,190,180,170,160] ,"Mid":[205,195,185,175,165,155,145],"Off":[200,190,180,170,160,150,140]},
"Italian": { "Peak":[210,200,190,180,170,160,150] ,"Mid":[200,190,180,170,160,150,140],"Off":[190,180,170,160,150,140,130]}
}
}
I have managed to output all the data in the console, but I am struggling with how to determine and display the specific rate needed to pass as an argument to the createRate function.