Как подключить панель навигации, содержимое которой берется из JSON, в jquery и использовать кнопку как переключатель

Question

Я хочу подключить навигационную панель, которая принимает контент из JSON, и использовать jquery для открытия и закрытия другого контента из JSON.Я действительно не знаю, как подключить jquery к панели навигации, которая получает информацию из JSON.

Я пытался найти проблему в Google, но нигде не нашел решения.

Скрипт

  <script>
        $.getJSON('events.json', function (data) {
            var $menu = $('#navbarNav ul.navbar-nav');
            $.each(data, function () {
                var url = this.url || '#';
                $menu.append(
                    '<li class="nav-item">' +
                    '<a class="nav-link" href="' + url + '">' + (this.name || this.id) + '</a>' +
                    '</li>'
                );
            });
        });
    </script>

    <script>
        $(document).ready(function () {
            $('#show').click(function () {
                $('.menu').toggle("slow");
            });
        });
    </script>

    <script>
        $(document).ready(function () {
            $.getJSON('results.json', function (data) {
                var results_table = '';
                $.each(data, function (key, value) {
                    results_table += '<tr>';
                    results_table += '<td>' + value.Rank + '</td>';
                    results_table += '<td>' + value.Country + '</td>';
                    results_table += '<td>' + value.Athlete + '</td>';
                    results_table += '<td>' + value.Time + '</td>';
                    results_table += '<td>' + value.Points + '</td>';
                    results_table += '</tr>';
                });
                $('#results_table').append(results_table);
            });
        });
    </script>

HTML

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Events</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
        </div>
    </nav>

    <div id="show">test</div>
    <div class="container">
        <table class="table table-borderless menu" id="results_table" style="display: none;">
            <thead>
                <tr>
                    <th scope="col">Rank</th>
                    <th scope="col">Country</th>
                    <th scope="col">Athlete</th>
                    <th scope="col">Time</th>
                    <th scope="col">Points</th>
                </tr>
            </thead>
        </table>
    </div>

JSON

[
        {
            "id" : "1", 
            "name" : "100m"
        },

        {
            "id" : "2", 
            "name" : "Long Jump"
        },

        {
            "id" : "3", 
            "name" : "Shot Put"
        },

        {
            "id" : "4", 
            "name" : "High Jump"
        }
]

JSON_2

[
    {
        "Rank": "1",
        "Country": "JPN",
        "Athlete": "Akihiko Nakamura",
        "Time": "4:18.370",
        "Points": "823"
    },
    {
        "Rank": "2",
        "Country": "AUS",
        "Athlete": "Cedric Dubler",
        "Time": "4:32.120",
        "Points": "731"
    },
    {
        "Rank": "3",
        "Country": "AUT",
        "Athlete": "Dominik Distelberger",
        "Time": "4:33.470",
        "Points": "722"
    },
    {
        "Rank": "4",
        "Country": "EST",
        "Athlete": "Karl Robert Saluri",
        "Time": "4:39.400",
        "Points": "684"
    },
    {
        "Rank": "5",
        "Country": "POL",
        "Athlete": "Pawel Wiesiolek",
        "Time": "4:42.270",
        "Points": "666"
    },
    {
        "Rank": "DNF",
        "Country": "CZE",
        "Athlete": "Jiri Sykora",
        "Time": "Did not finish",
        "Points": "0"
    }
]

Answer 1

Так что, если я правильно понимаю, вы пытаетесь динамически загружать разные JSON с результатами, когда кто-то нажимает на ссылки на панели навигации, созданные вами, используя данные из файла events.json.

В настоящее времяу вас есть вызов AJAX, который загружает результаты, происходящие в document.ready, поэтому он будет загружать только тот файл result.json только один раз.

Чтобы это работало динамически при нажатии на одну из ссылок вnavbar, вам нужно сначала переместить вызов AJAX, который загружает результаты, в функцию, а затем вам нужно позволить этой функции принять параметр, который сообщает ей, какие результаты загружать.Вы можете сделать это несколькими способами.Если у вас есть статические файлы JSON для каждого события, вы можете просто назвать их соответствующим образом и загрузить их по имени (например, 100m.json, Long_Jump.json и т. Д.).И тогда у вас может быть функция, загружающая JSON, использующая переданный параметр.(Если у вас был серверный скрипт, который динамически создавал результаты JSON, вы могли бы просто передать тип события в качестве параметра и для URL загрузки).

В этом примере я предполагаю, что у вас статическиименованные файлы JSON.

Затем вам нужно заставить ссылки запускать функцию loadResults, используя javascript.В этом случае я добавил атрибут onClick для вызова функции при нажатии на ссылку.

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

$(document).ready(function() {
  $.getJSON('https://dl.dropboxusercontent.com/s/wu2tc52r243vd4e/events.json', function (data) {
    var $menu = $('#navbarNav ul.navbar-nav');
    $.each(data, function () {
      var url = this.url || '#';
      $menu.append(
        '<li class="nav-item">' +
        '<a class="nav-link" href="#" onClick="loadResults(\'' + this.name + '\')">' + (this.name || this.id) + '</a>' +
        '</li>'
      );
    });
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Events</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav"></ul>
    </div>
</nav>

<div class="container">
    <table class="table table-borderless menu" id="results_table" style="display: none;">
        <thead>
            <tr>
                <th scope="col">Rank</th>
                <th scope="col">Country</th>
                <th scope="col">Athlete</th>
                <th scope="col">Time</th>
                <th scope="col">Points</th>
            </tr>
        </thead>
    </table>
</div>

<script>
  var resultsLoading = false;
  function loadResults(eventType) {
    console.log("loadResults " + eventType);
    // close the menu if it was open
    $('.menu').slideUp("slow")

    // clear out the old menu
    $('#results_table tbody').empty();

    // build the JSON file name and replace spaces with underscores
    var jsonFile = eventType.split(" ").join("_") + ".json";
    
    if (!resultsLoading) {
      resultsLoading = true
      $.getJSON("https://dl.dropboxusercontent.com/s/jqodu1jopchc93y/"+jsonFile, function (data) {
        var results_table = '';
        $.each(data, function (key, value) {
          results_table += '<tr>';
          results_table += '<td>' + value.Rank + '</td>';
          results_table += '<td>' + value.Country + '</td>';
          results_table += '<td>' + value.Athlete + '</td>';
          results_table += '<td>' + value.Time + '</td>';
          results_table += '<td>' + value.Points + '</td>';
          results_table += '</tr>';
        });
        $('#results_table').append(results_table);
        // show the menu again
        $('.menu').slideDown("slow");
        resultsLoading = false;
      });
    } else {
      console.log('results are being loaded, please wait');
    }
  }

</script>