从json文件过滤信息并通过链接显示pdf

Question

我有一个uni项目来制作渐进式Web应用程序。我正在尝试为pdf总线时间表查看器创建一个非常简单的应用程序，该应用程序将从列表中过滤数据并在应用程序中显示所需的pdf文档。

我已将所有公交车信息整理到电子表格中，并将其转换为一个json文件，该文件可以读取/以表格形式显示在索引页上。

我希望用户能够按列标题过滤此列表，然后输入文本/编号以查询查找/搜索列表以找到他们想要的公共汽车，然后让应用显示适当的pdf。

我该如何实现？

我已经研究过解析数据，但是想要更多有关如何使它工作的信息。

基本上，我有一些按钮想要链接到json数据（单击：查找公交车号，路线，起点，终点，终点），当单击一个时，它将仅显示该列的所有结果，然后添加供用户输入搜索或从列表中选择的其他过滤器。

以下是我当前在idex页面中拥有的内容：

以下是我正在使用的数据示例：

{
"busTimes":
[
    {
        "Bus":"Bus",
        "Route":"Route",
        "Start":"Start",
        "Stop1":"Stop1",
        "Stop2":"Stop2",
        "Stop3":"Stop3",
        "Stop4":"Stop4",
        "Stop5":"Stop5",
        "Finish":"Finish",
        "Times":"Times",
        "Maps":"Maps"
    },
    {
        "Bus":"1",
        "Route":"Casuarina (Hospital Precinct)",
        "Start":"Casuarina",
        "Stop1":"Hospital Precinct",
        "Stop2":"Tiwi",
        "Stop3":"Brinkin",
        "Stop4":"Nakara",
        "Stop5":"NO STOP",
        "Finish":"Casuarina",
        "Times":"https://nt.gov.au/__data/assets/pdf_file/0009/159309/route-1-public-bus-timetable.pdf",
        "Maps":"https://nt.gov.au/__data/assets/pdf_file/0008/159308/route-1-public-bus-map.pdf"
    },
    {
        "Bus":"2",
        "Route":"Casuarina ",
        "Start":"Casuarina ",
        "Stop1":"Wanguri",
        "Stop2":"Lyons",
        "Stop3":"Leanyer",
        "Stop4":"Wulagi",
        "Stop5":"Wagaman",
        "Finish":"Casuarina",
        "Times":"https://nt.gov.au/__data/assets/pdf_file/0003/159312/route-2-public-bus-timetable.pdf",
        "Maps":"https://nt.gov.au/__data/assets/pdf_file/0019/159310/route-2-public-bus-map.pdf"
    },
    {
        "Bus":"3",
        "Route":"Casuarina",
        "Start":"Casuarina",
        "Stop1":"Alawa",
        "Stop2":"Jingili",
        "Stop3":"Marrara",
        "Stop4":"Moil",
        "Stop5":"Anula",
        "Finish":"Casuarina",
        "Times":"https://nt.gov.au/__data/assets/pdf_file/0020/159320/route-3-public-bus-timetable.pdf",
        "Maps":"https://nt.gov.au/__data/assets/pdf_file/0008/159317/route-3-public-bus-map.pdf"
    },

}

<!-- gets json data and puts it on page -->

<script>
    $(function() {


        var busTimes = [];

        $.getJSON('bustimes.json',
            function(data) {
                $.each(data.busTimes, function(i, f) {
                    var tblRow = "<tr>" + "<td>" + f.Bus + "</td>" +
                        "<td>" + f.Route + "</td>" + "<td>" + f.Start + "</td>" + "<td>" + f.Stop1 + "</td>" + "<td>" + f.Stop2 + "</td>" + "<td>" + f.Stop3 + "</td>" + "<td>" + f.Stop4 + "</td>" + "<td>" + f.Stop5 + "</td>" + "<td>" + f.Finish + "</td>" + "</tr>"
                    $(tblRow).appendTo("#buses tbody");
                });

            });

    });
</script>

<!-- button section to filter data -->
        <div class="menuSection" id="findBus">
            <p> find bus timetable by:</p>
            <ul>
                <li> <button  id="bus_number"> bus number </button> </li>
                <li> <button  id="bus_route"> bus route </button> </li>
                <li> <button  id="bus_start"> where the bus starts from  </button> </li>
                <li> <button id="bus_stop"> where the bus stops </button> </li>
                <li> <button id="bus_finish"> where the bus finishes     </button> </li>
            </ul>

        </div>

<!-- section to show the table -->
        <div class="mainSection">
            <div class="wrapper">
                <p>SEARCH RESULTS:</p>
                <div class="list">
                    <table id="buses" border="2">

                        <thead>
                            <th>Bus</th>
                            <th>Route</th>
                            <th>Start</th>
                            <th>Stop 1</th>
                            <th>Stop 2</th>
                            <th>Stop 3</th>
                            <th>Stop 4</th>
                            <th>Stop 5</th>
                            <th>Finish</th>
                            <th>Times</th>
                            <th>Maps</th>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>

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

Answer 1

这是使用hide和show函数的简单实现。您需要使用属性选择器来确定要隐藏和显示的tr。

let data = {
  "busTimes": [{
      "Bus": "Bus",
      "Route": "Route",
      "Start": "Start",
      "Stop1": "Stop1",
      "Stop2": "Stop2",
      "Stop3": "Stop3",
      "Stop4": "Stop4",
      "Stop5": "Stop5",
      "Finish": "Finish",
      "Times": "Times",
      "Maps": "Maps"
    },
    {
      "Bus": "1",
      "Route": "Casuarina (Hospital Precinct)",
      "Start": "Casuarina",
      "Stop1": "Hospital Precinct",
      "Stop2": "Tiwi",
      "Stop3": "Brinkin",
      "Stop4": "Nakara",
      "Stop5": "NO STOP",
      "Finish": "Casuarina",
      "Times": "https://nt.gov.au/__data/assets/pdf_file/0009/159309/route-1-public-bus-timetable.pdf",
      "Maps": "https://nt.gov.au/__data/assets/pdf_file/0008/159308/route-1-public-bus-map.pdf"
    },
    {
      "Bus": "2",
      "Route": "Casuarina ",
      "Start": "Casuarina ",
      "Stop1": "Wanguri",
      "Stop2": "Lyons",
      "Stop3": "Leanyer",
      "Stop4": "Wulagi",
      "Stop5": "Wagaman",
      "Finish": "Casuarina",
      "Times": "https://nt.gov.au/__data/assets/pdf_file/0003/159312/route-2-public-bus-timetable.pdf",
      "Maps": "https://nt.gov.au/__data/assets/pdf_file/0019/159310/route-2-public-bus-map.pdf"
    },
    {
      "Bus": "3",
      "Route": "Casuarina",
      "Start": "Casuarina",
      "Stop1": "Alawa",
      "Stop2": "Jingili",
      "Stop3": "Marrara",
      "Stop4": "Moil",
      "Stop5": "Anula",
      "Finish": "Casuarina",
      "Times": "https://nt.gov.au/__data/assets/pdf_file/0020/159320/route-3-public-bus-timetable.pdf",
      "Maps": "https://nt.gov.au/__data/assets/pdf_file/0008/159317/route-3-public-bus-map.pdf"
    }
  ]
};

$.each(data.busTimes, function(i, f) {
  var tblRow = `<tr> 
                <td data-bus=${f.Bus}>${f.Bus}</td>
                <td>${f.Route}</td>
                <td>${f.Start}</td>
                <td>${f.Stop1}</td>
                <td>${f.Stop2}</td>
                <td>${f.Stop3}</td>
                <td>${f.Stop4}</td>
                <td>${f.Stop5}</td>
                <td>${f.Finish}</td>
            </tr>`

  $(tblRow).appendTo("#buses tbody");
});

$('#bus_number').keyup(function() {
  // console.log($(this).val())
  if ($(this).val()) {
    $('#buses tbody tr').hide();
    $('#buses tbody td[data-bus*=' + $(this).val() + ']').parent().show();
  } else {
    $('#buses tbody tr').show();
  }

});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="menuSection" id="findBus">
  <p> find bus timetable by:</p>
  <ul>
    <li> <input type="text" placeholder="Search by bus number" id="bus_number" /> </li>
    <li> <button id="bus_route"> bus route </button> </li>
    <li> <button id="bus_start"> where the bus starts from  </button> </li>
    <li> <button id="bus_stop"> where the bus stops </button> </li>
    <li> <button id="bus_finish"> where the bus finishes     </button> </li>
  </ul>

</div>
<div class="mainSection">
  <div class="wrapper">
    <p>SEARCH RESULTS:</p>
    <div class="list">
      <table id="buses" border="2">

        <thead>
          <th>Bus</th>
          <th>Route</th>
          <th>Start</th>
          <th>Stop 1</th>
          <th>Stop 2</th>
          <th>Stop 3</th>
          <th>Stop 4</th>
          <th>Stop 5</th>
          <th>Finish</th>
          <th>Times</th>
          <th>Maps</th>
        </thead>
        <tbody>

        </tbody>
      </table>

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