Добавить значения JSON при нажатии кнопки - PullRequest
Новая
       17

Добавить значения JSON при нажатии кнопки

1 голос
/ 22 марта 2019

Я думаю, что здесь что-то упущено. Это веб-приложение Jquery Mobile предназначено для просмотра информации о парковках в определенном городе.

По сути, приложение загружает, анализирует и затем добавляет данные JSON на страницу. Тогда есть текстовое поле ввода и кнопка. Основываясь на вводе текстового поля, он отображает только те места парковки, которые имеют одинаковое количество мест, указанных при вводе текстового поля. В основном просмотр информации о парковке на основе количества парковочных мест, указанных пользователем. У меня это несколько работает, но метод, который добавляет данные, не работает при нажатии кнопки. Только когда я обновляю страницу в локальном браузере, он загружает значения, соответствующие текстовому полю. Я не хочу этого и хотел бы, чтобы список обновлялся при нажатии кнопки.

Бит 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>

Если у вас есть какие-либо предложения или у меня есть способ получить данные для загрузки по нажатию кнопки вместо обновления, я был бы признателен за помощь.

1 Ответ

2 голосов
/ 22 марта 2019

Это связано с тем, как метод appendLot обращается к lotData.Данные лота - это массив, поэтому к ним нужно обращаться с помощью индексов. 

var lotName = lotData[0].lotName;

Другая проблема - сравнение lotAmount с key с использованием ===.Чтобы убедиться, что они числа, можно использовать метод parseInt () .

lotData не нужно передавать в метод appendLot, поскольку он доступенна весь main.js.

Чтобы сопоставить только первый элемент и добавить к элементу размера в качестве доказательства концепции, переменные лота можно установить так: 

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>");
    }
}

Чтобы добавить все соответствующие лоты к элементу размера, массив lotList можно зациклить, используя логику, аналогичную приведенной выше. 

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>");
        }
    }
}

Дайте мне знать, если у вас есть какие-либо другие вопросы.Надеюсь, это поможет.

...