Append JSON Values on button click

Question

I think I'm missing something here. This Jquery Mobile web application is for viewing information about parking lots in a specific city.

Basically, the application is loading, parsing and then appending JSON data onto a page. Then there is a textbox input and a button. Based on the textbox input, it only displays the data of parking spots which have the same number of spots specified in the textbox input. Basically viewing parking lot information based on a number of parking spots specified by the user. I have it somewhat working but the method that appends the data does not work on button click. Only when I refresh the page on my local browser does it load the values corresponding to the textbox. I do not want this and would like the list to update when I click the button.

Bit of the JSON parkingLots.JSON

 {
   "lotList":[
      {
         "id":1,
         "lotName":"Jarvis St \/ Carleton St",
         "availableSpots":8,
         "totalSpots":15
      }
   ]
}

main.js

var lotData;

$(document).ready(function() 
{
    $.getJSON({
        url: "parkingLots.json",
        mimeType: "application/json",
        success: parseParkingLotsJSON
    });
});

function parseParkingLotsJSON(data) 
{
    lotData = data.lotList;
    for (var i=0; i < lotData.length; i++) 
    {
        $("#size").append(appendLot(lotData[i], i));
    };
}
function appendLot(lotData)
{
    var lotName = lotData.lotName;
    var lotId = lotData.id;
    var lotAmount = lotData.availableSpots;
    var key = $("#sizeId").val();
    var size = $("<div " + lotId + "' data-role='table'>");
    if ( lotAmount ==  key ) {
    size.append("<h1>" + lotName + "</h1>");
    size.append("<p> Lot ID: " + lotId + "</p>");
    size.append("<p> Spots: " + lotAmount + "</p>");
    }
    return size;
}

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Parking Lot Web</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
        <link rel="stylesheet" href="main.css" />
        <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>      
        <script src="https://maps.googleapis.com/maps/api/js?v=3.31"></script>
        <script src="main.js"></script>
    </head>
    <h1>Parking Lot App</h1>
    <body class="ui-page-theme-a">
        <div data-role="page" id="home">
                <h1 class="center">Parking App</h1>
                    <ul>
                    <a data-role="button" href='#page1'>Group Size</a>
                    </ul>
        </div>

        <div id="page1" data-role="page" data-filter="true" class="center">

            <!--Where it's displayed on page-->
            <h1 class="center" data-role="content">Search by Lot Size</h1>
            <input type = "text" id = "sizeId"/>
            <input type = "button" id = "sizeBtn" value = "search" onclick="appendLot(lotData)"/>
            <div id="size" data-role="table" class="center"></div>
                </div>
        </div>
    </body>
</html>

If you have any suggestions or have a way I would be able to get the data to load on button click instead of having to refresh, I would appreciate the help.

Is this application attempting to load the data, bind it to the page, then search for lots based on a match on available slots? — josavish, Mar 22 '19 at 02:01
Yeah it is supposed to only display the data of the Lots that have same amount of parking spots as the user specifies. http://prntscr.com/n191sf Here is what I want it to do. It displays the info of the Parking lots that have 8 spots available, as specified in the textbox. Only thing is that I can only get this result by refreshing this page. The list doesn't update when I click the button and only does it by refreshing. I would like to get it to work onclick of the search button. — BigB, Mar 22 '19 at 02:09

score 3 · Accepted Answer · answered Mar 22 '19 at 02:32

This has to do with the way the appendLot method is accessing lotData. Lot data is an array so it needs to be accessed with indexes.

var lotName = lotData[0].lotName;

Another issue can be comparing the lotAmount to the key using ===. To ensure that they're numbers, the parseInt() method can be used.

The lotData doesn't need to be passed in to the appendLot method as it's available to the entire main.js.

To get just the first element to match and append to the size element as a proof of concept, the lot variables can be set like this:

function appendLot()
{
    var lotName = lotData[0].lotName;
    var lotId = lotData[0].id;
    var lotAmount = lotData[0].availableSpots;
    var key = $("#sizeId").val();
    var size = $('#size');
    if ( parseInt(lotAmount, 10) ===  parseInt(key, 10) ) {
        size.append("<h1>" + lotName + "</h1>");
        size.append("<p> Lot ID: " + lotId + "</p>");
        size.append("<p> Spots: " + lotAmount + "</p>");
    }
}

To append all matching lots to the size element, the lotList array can be looped through using similar logic to the above.

function appendLot()
{
    var size = $('#size');
    for (var i = 0; i < lotData.length; i++) {
        var lotAmount = lotData[i].availableSpots;
        var key = $("#sizeId").val();
        if ( parseInt(lotAmount, 10) ===  parseInt(key, 10) ) {
            size.append("<h1>" + lotData[i].lotName + "</h1>");
            size.append("<p> Lot ID: " + lotData[i].id + "</p>");
            size.append("<p> Spots: " + lotAmount + "</p>");
        }
    }
}

Let me know if you have any other questions. Hope that helps.

Thank you, with that last block it's almost there! Now it's appending on button click but it keeps on adding onto the page every time I click the button. Would you know of a way to clear the info in exchange for new info? For example: When I type 7 into the search bar, the info of lots with 7 spots appears. But say if I type 8 into the search bar, I want the lot information for the lots with 8 spots to take it's place in view. — BigB, Mar 22 '19 at 02:50
You're welcome. The size element needs to be cleared before appending new matches. Take a look at this question: https://stackoverflow.com/questions/1701973/how-to-clear-all-divs-contents-inside-a-parent-div. The answer below the accepted answer should get you started. :) You can also have a look here for reference: http://api.jquery.com/empty/ — josavish, Mar 22 '19 at 03:06
Perfect! Thank you so much for all of your help! I really appreciate it. — BigB, Mar 22 '19 at 03:17

Append JSON Values on button click

1 Answers1