vendredi 11 juin 2021

Count looped results in if statement and display results

I am trying to figure out how to count results based on the looped data and if statements.

My javascript below, will loop through response[j].resortcode and add a div for every response[j].roomcode within a div matching that resortcode. What I would like to do is make use of the if statement.

I would like to count like so: If there are no roomcodes within that resortcode that available => 1, output Sold Out If there are any roomcodes wiithin that resortcode that available => 1, output the count for only those results.

If SSR has 9 rooms, but only 4 show as available. My count would be 4. If SSR has 9 rooms, and all available = 0. It would just output sold out.

My count output would go to the premade header via id.

The current coding is already working correctly. I just want to add to it. I am confused on where to start with this, assuming after my if statements or possibly create an outside function and tie it in? I am open to anything, help, advice, etc.

let searchresult = function(response) {

    
    let resortCodes = new Set();
    for (let j = 0; j < response.length; j++) {

        resortCodes.add(response[j].resortcode);
        let divID = 'results-' + response[j].resortcode;
        let container = document.getElementById(divID);
        let price = response[j].points.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

              if (response[j].available < 1) {
                var available = 'soldoutresult"';
                var btn = '<button type="button" class="soldout">SOLD OUT</button>';
              }
              else {
                var available = 'availableresult"';
                var btn = '<button type="button" class="booknow">BOOK NOW</button>';
              }


        container.innerHTML += `
            <div class="roomresults ${available}">

            <div class="roomthumb"">
              <center><button class="myBtn roomdetailsbtn" data- 
                target="#modal${response[j].roomcode}" data-toggle="modal">Room 
                Details</button>
              </center>
            </div>

            <div class="roominfo"><p class="roomtitle">${response[j].roomname} - 
                ${response[j].viewname}</p>
            </div>
            </div>
            `
          }
        };
    <div id="akvjhcontainer" class="resortcontainer">
        <div id="akvjhheader" class="resortheader">
            <div class="headertext"><p class="resortnametext">Animal Kingdom Villas - Jambo House</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
            <div id="count-akvjh" class="collapseBTN"> COUNT RESULTS HERE <button class="collstyle" data-toggle="collapse" data-target="#results-AKV"><i></i></button></div>
        </div>
        <div id="results-AKV" class="results-AKV collapse show"></div>
    </div>

    <div id="akvkvcontainer" class="resortcontainer">
        <div id="akvkvheader" class="resortheader">
            <div class="headertext"><p class="resortnametext">Animal Kingdom Villas - Kidani Village</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
            <div id="count-AKV2" class="collapseBTN"> COUNT RESULTS HERE <button class="collstyle" data-toggle="collapse" data-target="#results-AKV2"><i></i></button></div>
        </div>
        <div id="results-AKV2" class="results-AKV2 collapse show"></div>
    </div>

    <div id="aulcontainer" class="resortcontainer">
        <div id="aulheader" class="resortheader">
            <div class="headertext"><p class="resortnametext">Aulani</p><p class="locationtext">Kapolei, Hawaii</p></div>
            <div id="count-AULV" class="collapseBTN"> COUNT RESULTS HERE <button class="collstyle" data-toggle="collapse" data-target="#results-AULV"><i></i></button></div>
        </div>
        <div id="results-AULV" class="results-AULV collapse show"></div>
    </div>

Thanks in advance. I always appreciate those willing to help.

Aucun commentaire:

Enregistrer un commentaire