使用JQuery從json文件中按鍵或ID獲取確切值

Question

我有一個包含50,000個用戶詳細信息的json文件。 我需要通過使用用戶ID顯示用戶詳細信息，例如姓名，手機和地址 。 已成功使用以下代碼完成了此操作， 但是 ，要花費太多時間（ 超過15秒 ）才能獲取數據並顯示在html頁面上。

因此，請幫助我減少從json文件獲取數據的時間。

html代碼是

<input type="text" id="search">
<input type="submit" id="submit">

我有以下詳細信息的json文件（convertcsv.json）

[
 {
   "id": 22313,
   "Name": "BABU",
   "Address": "Hyderabad"
 },
 {
  "id": 21314,
  "Name": "Raju",
  "Address": "BENGALURU"
 }
]

實際的JQuery腳本是

<script>
  $('#submit').on('click', function(){
    var searchField = $('#search').val();
    var regex = new RegExp(searchField, "i");
    var output = '<div class="row">';
    var count =0;
    $.getJSON('convertcsv.json', function(data) {
      $.each(data, function(key, val){
        if (val.id==searchField ) {
          output += '<div class="dataContain">';
          output += '<p><span style="font-weight:bold;"> id: </span>'+val.id+ '</p>';
          output += '<p><span style="font-weight:bold;"> Name: </span>'+val.Name + '</p>';
          output+='<p><span style="font-weight:bold;">Address: </span><span class="status">' + val.Address+'<span class="circle"></span></span></p>';
          output += '</div>';             
          count++;
        }


      });
     /// alert(count);
if(count==0){
output += 'No Records Found'
}
//alert(output)
      output += '</div>';
      //$('#results').toggle();
      $('#results').html(output);
    });
});

然后結果顯示在標簽中

<div id="results"> Result Displayed here, i need to improve time, please help me, thanks in advance</div> 

謝謝。

Answer 1

 var json = [ { "id": 22313, "Name": "BABU", "Address": "Hyderabad" }, { "id": 21314, "Name": "Raju", "Address": "BENGALURU" } ] console.log(json.filter(x=> x.id == '22313')) 

加載您的JSON文件，然后像上面的示例一樣進行過濾，然后從生成的JSON數組創建HTML。

編輯1

$.getJSON('convertcsv.json', function(data) {

      // filter results given searchField then loop through from resulted JSON array
      // filter returns an array

      let result = data.filter(x=> x.id == searchField);
      $.each(result, function(key, val){

          output += '<div class="dataContain">';
          output += '<p><span style="font-weight:bold;"> id: </span>'+val.id+ '</p>';
          output += '<p><span style="font-weight:bold;"> Name: </span>'+val.Name + '</p>';
          output+='<p><span style="font-weight:bold;">Address: </span><span class="status">' + val.Address+'<span class="circle"></span></span></p>';
          output += '</div>';             
          count++;

        });


      });

編輯2

文檔准備就緒時加載JSON並將其存儲到變量中。

var jsonUsers;
$(document).ready(function () {
     $.getJSON('convertcsv.json', function(data) {
     jsonUsers = data;
  });
});

現在，當單擊按鈕時，從jsonUsers過濾出結果

Answer 2

非常感謝 @Ali Shahbaz， 最終答案是。，

var jsonUsers;
$(document).ready(function () {
   $.getJSON('convertcsv.json', function(data) {
     jsonUsers = data;
   });
});


  // filter results given searchField then loop through from resulted JSON array
  // filter returns an array

  let result = jsonUsers.filter(x=> x.id == searchField);
  $.each(result, function(key, val){

      output += '<div class="dataContain">';
      output += '<p><span style="font-weight:bold;"> id: </span>'+val.id+ '</p>';
      output += '<p><span style="font-weight:bold;"> Name: </span>'+val.Name + '</p>';
      output+='<p><span style="font-weight:bold;">Address: </span><span class="status">' + val.Address+'<span class="circle"></span></span></p>';
      output += '</div>';             
      count++;

    });

現在，它運行良好，而不會浪費加載時間。