I'm trying to search JSON file using JQuery code and the results are not displaying.

Here is my code:

    $(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"> 

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Here is my JSON file:

    {
   "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"]
      }


   ]
         

   

}

I want to display all the information of the subject when I search the subjects name so what changes in the code I need to make for it to work properly. Do I need to approach the search method differently or can I use my existing code with some changes.

CodePudding user response：

When your code iterates through the data given by the JSON file, you use the JQuery $.each method to iterate through all of the values in your JSON file. However, your JSON file is not an array, its an object. To iterate through all of the Subjects in the JSON file, iterate through data.Subjects instead of iterating through 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>";
  }
});

Then, using val you can display your data however you'd like. In this case, I used JSON.stringify to show all of the data within the subjects.json file, but I'm sure you could implement something more pretty for your application. For example, you could access a subject's professor with val.Professor, and display that using your output variable.