Как проверить, включена ли строка во вложенный JSON-объект (и отобразить весь его контент)? - PullRequest
Новая
       2

Как проверить, включена ли строка во вложенный JSON-объект (и отобразить весь его контент)?

0 голосов
/ 11 июня 2019

Я создаю веб-страницу, на которой пользователя просят найти название города, чтобы проверить, включен ли город в данный исторический маршрут (через Francigena).

Я также создалобъект JSON, который содержит все города такого маршрута, и я сосредоточился на его ограниченной географической части (Италия, Тоскана).Города делятся в зависимости от того, к какому этапу маршрута они принадлежат.

В соответствии с этой целью я создал следующий объект JSON: 

{
  "Francia": [],
  "Inghilterra",
  "Italia": [
    {
      "regione": "Emilia",
      "stato": "Italia",
      "tappe": ""
    },
    {
      "regione": "Lazio",
      "stato": "Italia",
      "tappe":[]
    },
    {
      "regione": "Lombardia",
      "stato": "Italia",
      "tappe":[]
    },
    {
      "regione": "Piemonte",
      "stato": "Italia",
      "tappe":""
    },
    {
      "regione": "Toscana",
      "stato": "Italia",
      "tappe": [
        {
          "nome": "Passo della Cisa - Pontremoli",
          "numeroTappa": "22",
          "difficoltà": "Molto impegnativa",
          "km": "19.57",
          "ore": "5",
          "ciclabilità": "65%",
          "città": [
            "Groppoli(Mulazzo)",
            "Groppodalosio",
            "Casalina",
            "Topelecca",
            "Arzengio",
            "Pontremoli"
          ]
        },
        {
          "nome": "Pontremoli - Aulla",
          "numeroTappa": "23",
          "difficoltà": "mediamente difficile",
          "km": "32,12",
          "ore": "8",
          "ciclabilità": "94%",
          "città": [
            "Pontremoli",
            "Ponticello",
            "Filattiera",
            "Filetto",
            "Villafranca",
            "Virgoletta",
            "Aulla"
          ]
        },
        {
          "nome": "Aulla - Avenza",
          "numeroTappa": "24",
          "difficoltà": "impegnativa (prima parte)",
          "km": "33",
          "ore": "8",
          "ciclabilità": "",
          "città": [
            "Aulla",
            "Sarzana",
            "Caniparola(Fosdinovo)"
          ]
        },
        {
          "nome": "Avenza - Pietrasanta",
          "numeroTappa": "25",
          "difficoltà": "mediamente difficile",
          "km": "28",
          "ore": "6.30",
          "ciclabilità": "",
          "città": [
            "Avenza",
            "Massa",
            "Pietrasanta"
          ]
        },
        {
          "nome": "Pietrasanta - Lucca",
          "numeroTappa": "26",
          "difficoltà": "mediamente difficile",
          "km": "32",
          "ore": "7.5",
          "ciclabilità": "",
          "città": [
            "Pietrasanta",
            "Camaiore",
            "Badia(Altopascio)",
            "Montemagno(Calci)",
            "Lucca"
          ]
        },
        {
          "nome": "Lucca - Altopascio",
          "numeroTappa": "27",
          "difficoltà": "mediamente difficile",
          "km": "18.5",
          "ore": "4,30",
          "ciclabilità": "100%",
          "città": [
            "Lucca",
            "Capannori",
            "Badia Pozzeveri",
            "Altopascio"
          ]
        },
        {
          "nome": "Altopascio - San Miniato",
          "numeroTappa": "28",
          "difficoltà": "mediamente difficile",
          "km": "27",
          "ore": "6,30",
          "ciclabilità": "100%",
          "città": [
            "Altopascio",
            "Ponte a Cappiano (Fucecchio)",
            "Fucecchio",
            "San Miniato"
          ]
        },
        {
          "nome": "San Miniato - Gambassi Terme",
          "numeroTappa": "29",
          "difficoltà": "mediamente difficile",
          "km": "24",
          "ore": "6",
          "ciclabilità": "99%",
          "città": [
            "San Miniato",
            "Coiano(Castelfiorentino)",
            "Chianni(Gambassi Terme)",
            "Gambassi Terme"
          ]
        },
        {
          "nome": "Gambassi Terme - San Gimignano ",
          "numeroTappa": "30",
          "difficoltà": "mediamente difficile",
          "km": "13.4",
          "ore": "3.30",
          "ciclabilità": "97%",
          "città": [
            "Gambassi Terme",
            "Pancole(San Gimignano)",
            "Cellole (San Gimignano)",
            "San Gimignano"
          ]
        },
        {
          "nome": "San Gimignano - Monteriggioni",
          "numeroTappa": "31",
          "difficoltà": "mediamente difficile",
          "km": "31",
          "ore": "8",
          "ciclabilità": "96%",
          "città": [
            "San Gimignano",
            "Aiano (San Gimignano)",
            "Gracciano (Colle Val d'Elsa",
            "Strove(Monteriggioni)",
            "Abbadia a Isola(Monteriggioni)",
            "Monteriggioni"
          ]
        },
        {
          "nome": "Monteriggioni - Siena",
          "numeroTappa": "32",
          "difficoltà": "mediamente difficile",
          "km": "20.6",
          "ore": "5",
          "ciclabilità": "95%",
          "città": [
            "Monteriggioni",
            "Cerbaia (San Casciano in Val di Pesa",
            "Siena"
          ]
        },
        {
          "nome": "Siena - Ponte d’Arbia",
          "numeroTappa": "33",
          "difficoltà": "mediamente difficile",
          "km": "28.4",
          "ore": "7",
          "ciclabilità": "100%",
          "città": [
            "Siena",
            "Ponte d’Arbia"
          ]
        },
        {
          "nome": "Ponte d’Arbia - San Quirico d'Orcia",
          "numeroTappa": "34",
          "difficoltà": "mediamente difficile",
          "km": "26",
          "ore": "7",
          "ciclabilità": "100%",
          "città": [
            "Ponte d’Arbia",
            "Buonconvento",
            "Torrenieri",
            "San Quirico d'Orcia"
          ]
        },
        {
          "nome": "San Quirico - Radicofani",
          "numeroTappa": "35",
          "difficoltà": "mediamente difficile",
          "km": "32,2",
          "ore": "9",
          "ciclabilità": "99%",
          "città": [
            "San Quirico",
            "Vignoni Alto",
            "Bagno Vignoni",
            "Gallina",
            "Radicofani"
          ],
          "deviazioni": "Castiglione"
        },
        {
          "nome": "Radicofani - Aquapendente",
          "numeroTappa": "36",
          "difficoltà": "mediamente difficile",
          "km": "32",
          "ore": "8",
          "ciclabilità": "100%",
          "città": [
            "Radicofani",
            "Ponte a Rigo (San Casciano)",
            "Proceno",
            "Acquapendente (Lazio)"
          ]
        }
      ]
    },
    {
      "regione": "Valle d’Aosta",
      "stato": "Italia",
      "tappe":""
    }
  ],
  "Svizzera": []
}

Когда пользователь вводит имягород в текстовое поле и нажимает на кнопку поиска, я хочу, чтобы отобразить весь список, где содержится это имя - что соответствует определенному этапу маршрута.

Например, предположим, что пользователь вводит "Лукка".«Лукка» - это первый элемент 6-го вложенного объекта и последний элемент 5-го вложенного объекта 3-го вложенного объекта 5-го вложенного объекта 3-го массива объекта JSON.Учитывая, что «Лукка включена в число городов Маршрута», я хочу отобразить все элементы 6-го вложенного объекта и все элементы 5-го, где указано название этого города, то есть: 

[
            "Pietrasanta",
            "Camaiore",
            "Badia(Altopascio)",
            "Montemagno(Calci)",
            "Lucca"
          ]

, а также: 

[
        "Lucca",
        "Capannori",
        "Badia Pozzeveri",
        "Altopascio"
      ]

Файл HTML имеет следующий вид: 

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="1_style.css">
    <script language="javascript" type="text/javascript" src="jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="index.js"></script>

    <title>Bootstrap: In Line form di vs Tabs</title>
</head>
<body>

<div class="container">


    <div class="jumbotron">
        <h1 class="display-4"> Titolo scritto a mano (file Img) </h1>
        <p class="lead">Elimina questo testo </p>
        <hr class="my-4">

        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="città-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
                   aria-selected="true">Città</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="regione-tab" data-toggle="tab" href="#contact" role="tab"
                   aria-controls="contact" aria-selected="false">Regione</a>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane show active" id="home" role="tabpanel" aria-labelledby="home-tab">

                <form>
                    <div id="ricercaCittà" class="form-row align-items-center">
                        <div class="col-auto">
                            <label class="sr-only" for="inlineFormInput">Città</label>
                            <input type="text" class="form-control mb-2" id="inlineFormInputCittà"
                                   placeholder="Ricerca per città">
                        </div>
                        <div class="col-auto">

                            <button id="cercaCittà" type="button" class="btn btn-primary mb-2">Cerca</button>
                        </div>


                        <p id="errorLog" class="lead text-danger hide">Attenzione! Alcuni dati non sono stati
                            inseriti!</p>

                    </div>
                </form>
            </div>

            <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">


            </div>

            <div class="tab-pane" id="contact" role="tabpanel" aria-labelledby="contact-tab">

                <form>
                    <div id="ricercaRegione" class="form-row align-items-center">
                        <div class="col-auto">
                            <label class="sr-only" for="inlineFormInput">Regione</label>
                            <input type="text" class="form-control mb-2" id="inlineFormInputRegione"
                                   placeholder="Ricerca per Regione">
                        </div>
                        <div class="col-auto">
                            <button id="cercaRegione" type="button" class="btn btn-primary mb-2">Cerca</button>
                        </div>


                        <p id="errorLogRegione" class="lead text-danger hide">Attenzione! Alcuni dati non sono stati
                            inseriti!</p>


                    </div>
                </form>

            </div>

        </div>


    </div>


</div>
</body>
</html>

В приведенном ниже фрагменте JS я вызываю файл JSON infoFrancigena.json : 

    function validateCittà() {
    console.log('function validateCittà has been activated');

    if ($("#inlineFormInputCittà").val() == "") {
        $("#errorLog").show();

    } else {

        $("#errorLog").hide();

        $("#cercaCittà").prop("disabled", true);

        $("#tbody").empty();

        setTimeout(function () {

            console.log("setTimeout has been activated");

            $("#cercaNome").prop("disabled", false);

            $.ajax({
                url: "infoFrancigena.json",
                dataType: "json",
                success: function (data) {
                    console.log("getJSON wit AJAX method has been activated");
                    for (var i in data.Italia) {

                        //may I define a variable "città" for the stings typed on the text field?
                        var città =

                        //if yes, may I use the "includes()" method to check ehether or not the variable "città" is included into the "i"?

                        if i.includes()
                        {
                            $("#tbody").append("<tr>");
                            $("#tbody").append("<td>" + data.Italia[i] + "</td>");
                        } else {
                            display("no results");
                        }
                    }
                }
            });


        }, 1000);
    }
}


function main() {
    $("#cercaCittà").on('click', validateCittà);

}

$(main);

Я пытаюсь сделать следующее:

a) определить переменную (1) для указания строки, которую пользователь вводит в текстовое поле, и затем использоватьметод .includes(), чтобы проверить, включена ли такая переменная в i (переменная, использованная в for loop позже). Это правильный метод? Если да, как я могу определить такую ​​переменную (1)?

2) использовать оператор потока управления for loop для проверки каждого объекта во вложенном массиве (т. Е. На каждом этапе маршрута Францигена, ограниченного Тосканой, Италия) и посмотреть, содержит ли онстрока, вставленная в текстовое поле.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...