Every time one of my arrays loops, it repeats the previous arrays along with the new array.
Note in the screenshot below how under Saratoga Springs it lists both the rooms for Saratoga Springs and Grand Floridian.
If I choose a different set of dates that has more results (more resorts with values), all arrays loop into the next array.
Why is my code not stopping the array after its initial loop? How can I fix this, I am baffled.
The PHP query:
<?php
include("dbh.php");
mysqli_select_db($conn, "checkavail") or die ("no database");
$checkin = $_POST['checkin'];
$checkout = $_POST['checkout'];
$occupants = $_POST['occupants'];
$sql= "SELECT
MIN(staydate) AS checkin, MAX(staydate) AS lastnight,
MIN(available) AS available, ra.resort AS resortcode,
ri.resort AS resortname, ri.room AS roomname,
ri.roomcode AS roomcode, ri.view AS viewname,
SUM(ra.points*20) AS points, ri.sqfoot AS sqfoot,
ri.description AS roomdescription, ri.bedding AS bedding,
ri.amenities AS amenities, ri.sleeps AS sleeps,
ri.sleep_details AS sleepdetails, ri.layout_img AS layoutimg,
ri.room_img AS roomimg, ri.roomimg_thumb AS roomimgthumb
FROM resort_availability AS ra
JOIN room_info AS ri ON (ra.room = ri.roomcode)
WHERE staydate >= '$checkin'
AND staydate < '$checkout'
AND sleeps >= '$occupants'
GROUP BY resortcode, roomcode
ORDER BY resortname, points";
$result=mysqli_query($conn, $sql) or die(mysqli_error($conn));
$newarray = [];
foreach($result as $key => $value){
$newarray[$value['resortcode']][$key] = $value;
}
print_r(json_encode($newarray));
?>
The javascript file:
$(function getData() {
$("#searchbtn").click(function () {
var checkin = document.getElementById("start").value;
var checkout = document.getElementById("end").value;
var occupants = document.getElementById("party").value;
$.ajax({
url: "action.php",
type: "POST",
data: { checkin: checkin, checkout: checkout, occupants: occupants },
dataType: "json",
success: function (response) {
console.log(response);
searchresult(response);
}
});
});
});
let searchresult = function(response) {
let output = "";
for (var key in response) {
var obj = response[key];
let container = document.getElementById(key+'results');
for (var prop in obj) {
output += "<div id="+prop+"><p>"+obj[prop].roomname+" "+ obj[prop].viewname+"</p></div>"
}
$(container).html(output);
}
};
Here is the html code:
<div id="akvjhcontainer" class="resortcontainer">
<div id="akvjhheader" class="resortheader">
<p class="resortnametext">Animal Kingdom Villas - Jambo House</p>
<p class="locationtext">Walt Disney World - Orlando, Florida</p>
<div id="akvjhresultcount"></div>
</div>
<div id="AKVresults"></div>
</div>
<div id="akvkvcontainer" class="resortcontainer">
<div id="akvkvheader" class="resortheader">
<p class="resortnametext">Animal Kingdom Villas - Kidani Village</p>
<p class="locationtext">Walt Disney World - Orlando, Florida</p>
</div>
<div id="AKV2results"></div>
</div>
<div id="aulcontainer" class="resortcontainer">
<div id="aulheader" class="resortheader">
<p class="resortnametext">Aulani</p>
<p class="locationtext">Kapolei, Hawaii</p>
</div>
<div id="AULVresults"></div>
</div>
<div id="bltcontainer" class="resortcontainer">
<div id="bltheader" class="resortheader"><p class="resortnametext">Bay Lake Tower</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
<div id="BLTresults"></div></div>
<div id="bcvcontainer" class="resortcontainer">
<div id="bcvheader" class="resortheader"><p class="resortnametext">Beach Club Villas</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
<div id="BCVresults"></div></div>
<div id="bwvcontainer" class="resortcontainer">
<div id="bwvheader" class="resortheader"><p class="resortnametext">Boardwalk Villas</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
<div id="BWALKresults"></div></div>
<div id="brcontainer" class="resortcontainer">
<div id="brheader" class="resortheader"><p class="resortnametext">Boulder Ridge at Wilderness Lodge</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
<div id="VWLresults"></div></div>
<div id="ccvcontainer" class="resortcontainer">
<div id="ccvheader" class="resortheader"><p class="resortnametext">Copper Creek at Wilderness Lodge</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
<div id="WCCresults"></div></div>
<div id="vgccontainer" class="resortcontainer">
<div id="vgcheader" class="resortheader"><p class="resortnametext">Grand Californian</p><p class="locationtext">Disneyland - Anaheim, California</p></div>
<div id="GCALresults"></div></div>
<div id="vgfcontainer" class="resortcontainer">
<div id="vgfheader" class="resortheader"><p class="resortnametext">Grand Floridian Resort & Spa</p><p class="locationtext">Walt Disney World - Orlando, Florida</p>
<div id="vgfrescount"></div></div>
<div id="VGFresults"></div></div>
<div id="hhicontainer" class="resortcontainer">
<div id="hhiheader" class="resortheader"><p class="resortnametext">Hilton Head Island Resort</p><p class="locationtext">Hilton Head, South Carolina</p></div>
<div id="HILTNresults"></div></div>
<div id="okwcontainer" class="resortcontainer">
<div id="okwheader" class="resortheader"><p class="resortnametext">Old Key West Resort</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
<div id="CLUBresults"></div></div>
<div id="polycontainer" class="resortcontainer">
<div id="polyheader" class="resortheader"><p class="resortnametext">Polynesian Villas</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
<div id="POLYVresults"></div></div>
<div id="rivcontainer" class="resortcontainer">
<div id="rivheader" class="resortheader"><p class="resortnametext">Riviera Resort</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
<div id="RVAresults"></div></div>
<div id="ssrcontainer" class="resortcontainer">
<div id="ssrheader" class="resortheader"><p class="resortnametext">Saratoga Springs Resort & Spa</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
<div id="SSRresults"></div></div>
<div id="vbrcontainer" class="resortcontainer">
<div id="vbrheader" class="resortheader"><p class="resortnametext">Vero Beach Resort</p><p class="locationtext">Vero Beach, Florida</p></div>
<div id="VEROresults"></div></div>