Как выбрать элемент в массиве JSON динамически в цикле for? - PullRequest
0 голосов
/ 24 июня 2019

Я создал веб-страницу, которая в основном является формой поиска. Пользователь должен ввести название города в текстовое поле и нажать кнопку поиска; всякий раз, когда такая строка включена в конкретный список городов, пользователь может нажать на другую кнопку для поиска отелей в этом городе.

Для этого я использую два JSON-файла: первый - из поиска API, второй - статический, созданный мной; для отображения информации из обеих я написал две функции for loop и дважды использовал метод .append(), чтобы информация обоих файлов JSON последовательно отображалась в одном и том же tbody, см. код ниже:

var readHotel = function () {
    $.ajax({
        url: "http://localhost/prove/pagine_bianche/searchpb?client=pbbrowsing&version=4.0&device=evo&pagesize=25&output=json&lang=it&typedwhat=hotel&what=hotel&where=" + encodeURIComponent($("#inlineFormInputCitta").val()),
        dataType: "json",   

        success: function (data) {
            $("#tbody2").empty();    

            for (let i = 0; i < data.results.length; i++) {
                let hotel = data.results[i];

                $("#tbody2").append("<tr><td>" + hotel.lastname + "</td><td>" + hotel.phones[0].number + "</td></tr>");
                $("#tabella2").show();
                $("#thead2").show();
            }

            for (let i = 0; i < lowCostHotels.LOW_COST_Pilgrim_accomodation.length; i++) {


                    $("#tbody2").append("<tr><td>" + lowCostHotels.LOW_COST_Pilgrim_accomodation[i].name + "</td><td>" + lowCostHotels.LOW_COST_Pilgrim_accomodation[i].city + "</td></tr>")

            }
                $("#hotel").prop("disabled", false);
        }  
    });
};

Ранее я создал переменную lowCostHotels, которая содержит все содержимое файла JSON:

var readLowCostAccomodation = function () {

    $.ajax({
        dataType: "json",
        url: "http://localhost/prove/low_cost_hotels.json",
        success: function (data) {
            console.log("ajax call readLowCostAccomodation() has been activated");
            lowCostHotels = data;
        }
    })
};

Код работает, то есть необходимая информация отображается правильно.

Теперь мне нужно выбрать информацию для отображения второго файла JSON, т. Е. Я хочу отобразить информацию о конкретном городе, который искал пользователь. Мне нужно сохранить функцию for loop для циклического перебора всех элементов массива JSON, но мне нужно отобразить только один из них. Если быть более точным, второй JSON-файл имеет следующую структуру (для краткости я просто пишу его часть):

{
  "LOW_COST_Pilgrim_accomodation": [

    {
      "name": "A Taberna Potami",
      "city": "TOPLECCA",
      "region": "Tuscany",
      "type": "Low Cost Pilgrim Accomodation",
      "tappa": "Pavia-Lucca"
    },
    {
      "name": "Ostello Castello del Piagnaro",
      "city": "PONTREMOLI",
      "region": "Tuscany",
      "type": "Low Cost Pilgrim Accomodation",
      "tappa": "Pavia-Lucca"
    }
  ]
}

Вышеуказанный массив JSON имеет 2 элемента. Каждый элемент дает информацию об отелях в двух разных городах, TOPLECCA и PONTREMOLI. Все элементы массива должны быть циклическими (в данном случае их 2), но я хочу отобразить только те, которые соответствуют строке, набранной в форме поиска: если пользователь вводит «TOPLECCA», я хочу отобразить информация, предоставленная первым элементом; если он наберет «PONTREMOLI», я хочу взять второй.

Для этого, я полагаю, мне нужно использовать ($("#inlineFormInputCitta").val(), как показано ниже, учитывая, что inlineFormInputCitta - это идентификатор, заданный для поля ввода / текстового поля:

if ($("#inlineFormInputCitta").val() === lowCostHotels.LOW_COST_Pilgrim_accomodation[i].city) {}

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

lowCostHotels.LOW_COST_Pilgrim_accomodation[i].name

Я думал о создании новых переменных, чтобы связать ключ "city" файла JSON с ключом "name" (из отеля) внутри оператора if, но я не уверен, что прав направление ...

Есть предложения?


Я добавил оператор if ниже, но он не работает:

for (let i = 0; i < lowCostHotels.LOW_COST_Pilgrim_accomodation.length; i++) {

                if ($("#inlineFormInputCitta").val() === lowCostHotels.LOW_COST_Pilgrim_accomodation[i].city);

                {
                    var city = $("#inlineFormInputCitta").val();
                    var entry = lowCostHotels.LOW_COST_Pilgrim_accomodation.find(function(entry) {
                        return entry.city === city;
                        return entry.name === name;
                    });

                    $("#tbody2").append("<tr><td>" + entry.name + "</td><td>" + entry.city + "</td></tr>")
                }
            }

Я получаю следующую ошибку:

enter image description here

1 Ответ

1 голос
/ 24 июня 2019

Да, вам нужно получить название города, и я предполагаю, что оно происходит от элемента input с id, который вы использовали в своем коде $("#inlineFormInputCitta").val().

Добавление if Вы упомянули работы, или вы можете использовать find, чтобы найти запись и вообще не иметь петли for, например:

var city = $("#inlineFormInputCitta").val();
var entry = lowCostHotels.LOW_COST_Pilgrim_accomodation.find(function(entry) {
    return entry.city === city;
});
if (entry) {
    // Use `entry.name`, etc. here
} else {
    // There was no match
}
...