كيفية تصفية جدول تم تحميله ببيانات JSON باستخدام جافا سكريبت

-1

أحاول تصفية المعلومات من جدول تم تحميله ببيانات JSON. ما أحاول القيام به هو وضع المدخلات ثم تصفية الجدول عند الضغط على الزر. هنا الجزء المهم من ملف html:

<form role="search" class="search-form" style="flex-grow:1">
        <div class="form-group">
            <label for="dpt">Partida:</label>
            <input type="text" class="form-control" id="dpt">
        </div>
        <div class="form-group">
            <label for="dtn">Destino:</label>
            <input type="text" class="form-control" id="dtn">
        </div>
        <div class="row-md">
            <button class="Search" onclick=searchDepartures()>Procurar</button>
        </div>
    </form>
</div>
<div class="container" style="width: 50%; overflow: hidden; float: right;">
    <table class="table table-bordered table-striped table-hover" id="routes_table" style="width: 100%;">
        <thread>
            <tr>
                <th>Partidas</th>
                <th>Destinos</th>
            </tr>
        </thread>
        <tbody>
        </tbody>
    </table>
</div>

وملف جافا سكريبت الخاص بي:

$(document).ready(function () {

$.getJSON("locations.json", function (data) {
    var routes_data = [];
    $.each(data, function (key, value) {
        routes_data += '<tr>';
        routes_data += '<td>' + value.departure + '</td>';
        routes_data += '<td>' + value.arrival + '</td>';
        routes_data += '</tr>';
    })
    $(routes_table).append(routes_data);
});

$.getJSON("locationsEN.json", function (data) {
    var routes_data = [];
    $.each(data, function (key, value) {
        routes_data += '<tr>';
        routes_data += '<td>' + value.departure + '</td>';
        routes_data += '<td>' + value.arrival + '</td>';
        routes_data += '</tr>';
    })
});

function searchDepartures() {
    var results = [];
    var searchField = value.departure;
    var searchVal = "#dpt";
    for (var i=0 ; i < routes_data.length ; i++)
    {
        if (routes_data[i][searchField] == searchVal) {
            results.push(routes_data[i]);
            $(routes_table).append(routes_data);
        }
    }
}

أيضًا ملف JSON الخاص بي:

[
  {
    "id": "1",
    "departure": "Beja",
    "arrival": "Lisboa"
  },
  {
    "id": "2",
    "departure": "Lisboa",
    "arrival": "Beja"
  },
  {
    "id": "3",
    "departure": "Beja",
    "arrival": "Évora"
  },
  {
    "id": "4",
    "departure": "Évora",
    "arrival": "Beja"
  },
  {
    "id": "5",
    "departure": "Beja",
    "arrival": "Faro"
  },
  {
    "id": "6",
    "departure": "Faro",
    "arrival": "Beja"
  },
  {
    "id": "7",
    "departure": "Beja",
    "arrival": "Setúbal"
  },
  {
    "id": "8",
    "departure": "Setúbal",
    "arrival": "Beja"
  }
]

حتى الآن لا شيء يعمل إلا وضع الجدول بأكمله ، وهو أمر متوقع عندما تكون المدخلات فارغة.

1 إجابة

0

استبدل الكل

$(routes_table).append(routes_data);

مع

$('#routes_table').append(routes_data);

ليس لديك متغير طرق_table ، ولكن لديك معرّف طرق_table على الطاولة

بالإضافة إلى ذلك ، لديك مشاكل في النطاقات المتغيرة ، والحصول على عنصر بمعرف وغيره ، تحقق من ذلك:

var json = [];
$.getJSON("locations.json", function (data) {
    var routes_data = [];
    $.each(data, function (key, value) {
        routes_data += '<tr>';
        routes_data += '<td>' + value.departure + '</td>';
        routes_data += '<td>' + value.arrival + '</td>';
        routes_data += '</tr>';
    })
    json = data;
    $('#routes_table tbody').append(routes_data);
});

function searchDepartures() {
    var results = [];
    var searchField = "departure";
    var searchVal = document.getElementById('dtn').value;
    $('#routes_table tbody').html('');
    for (var i=0 ; i < json.length ; i++)
    {
        if (json[i][searchField] == searchVal) {

          var newroutes_data = '';
            newroutes_data += '<tr>';
            newroutes_data += '<td>' + json[i].departure + '</td>';
            newroutes_data += '<td>' + json[i].arrival + '</td>';
            newroutes_data += '</tr>';


            results.push(newroutes_data);
            $('#routes_table tbody').append(newroutes_data);
        }
    }
}

ملاحظة. إصلاح جدول html - ليس الموضوع ولكن الموضوع:

<thead>
    <tr>
        <th>Partidas</th>
        <th>Destinos</th>
    </tr>
</thead>
<tbody>
</tbody>
:مؤلف

أسئلة ذات صلة

فوق
قائمة طعام