JQuery搜索不顯示結果

我正在嘗試使用 JQuery 代碼搜索 JSON 檔案，但未顯示結果。

這是我的代碼：

    $(document).ready(function() {
        $.getJSON('subjects.json', function(data) {
        $("#searchInput2").keyup(function () {
          var searchField = $(this).val();
          if (searchField === "") {
            $("#searchdisplay").html("");
            return;
          }

          var regex = new RegExp(searchField, "i");
          var output = '<div >';

          $.each(data, function (key, val) {
            if (val.name.search(regex) != -1) {
              output  = '<div">';
              output  =
                '<div ><a >'  
                val.name  
                "</a></div>";
            }
          });
          output  = "</div>";
          $("#searchdisplay").html(output);
        });


        });
    });

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


  <div class="form-group">
        <input  type="search"
          class="form-control"
          name="searchInput2"
          id="searchInput2"
        />
      </div>
      
      
       <div class="searchdisplay"> 

這是我的 JSON 檔案：

    {
   "Subjects": [
       {
          "name": "Programim 1",
          "Code": "01",
          "Semester": "1",
          "Type": ["Mandatory","Elective"],
          "Professor": "Profesor 1",
          "Credits": "7",
          "Grade": "9",
          "Keywords": ["css","js","jquery","php"],
          "Lecture": ["lecture","practical"]
       },

       {
         "name": "Java programim",
         "Code": "02",
          "Semester": "2",
          "Type": ["Mandatory","Elective"],
          "Professor": "Profesor2",
          "Credits": "6",
          "Grade": "9",
          "Keywords": ["css","js","jquery","php"],
          "Lecture": ["lecture","practical"]
       },

       {
         "name": "Programim 3 ",
        "Code": "03",
         "Semester": "7",
         "Type": ["Mandatory","Elective"],
         "Professor": "Profesor 3",
         "Credits": "6",
         "Grade": "7",
         "Keywords": ["css","js","jquery","php"],
         "Lecture": ["lecture","practical"]
      },

      {
         "name": "Computer architecture",
        "Code": "04",
         "Semester": "2",
         "Type": ["Mandatory","Elective"],
         "Professor": "Profesor 4",
         "Credits": "4",
         "Grade": "6",
         "Keywords": ["css","js","jquery","php"],
         "Lecture": ["lecture","practical"]
      },


      {
         "name": "Web Design",
        "Code": "05",
         "Semester": "4",
         "Type": ["Mandatory","Elective"],
         "Professor": "Profesor 5",
         "Credits": "4",
         "Grade": "7",
         "Keywords": ["css","js","jquery","php"],
         "Lecture": ["lecture","practical"]
      }


   ]
         

   

}

我想在搜索主題名稱時顯示主題的所有資訊，因此我需要對代碼進行哪些更改才能使其正常作業。我是否需要以不同的方式處理搜索方法，或者我可以使用我現有的代碼進行一些更改。

uj5u.com熱心網友回復：

當您的代碼遍歷 JSON 檔案提供的資料時，您可以使用 JQuery$.each方法遍歷 JSON 檔案中的所有值。但是，您的 JSON 檔案不是陣列，而是一個物件。要遍歷SubjectsJSON 檔案中的所有 ，請遍歷data.Subjects而不是遍歷data。

$.each(data.Subjects, function(key, val) {
  if (val.name.search(regex) != -1) {
    output  = '<div">';
    output  =
      '<div ><a >'  
      val.name   JSON.stringify(val)  
      "</a></div>";
  }
});

然后，使用val您可以隨心所欲地顯示您的資料。在這種情況下，我使用 JSON.stringify 來顯示檔案中的所有資料subjects.json，但我相信您可以為您的應用程式實作更漂亮的東西。例如，您可以使用 訪問學科的教授val.Professor，并使用您的output變數顯示該教授。

標籤：javascript 查询 json

上一篇：打字稿：重用非功能組件的型別；重構

下一篇：如何從json結果中選擇一些屬性