2

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 class="row">';

          $.each(data, function (key, val) {
            if (val.name.search(regex) != -1) {
              output += '<div">';
              output +=
                '<div class="form-group"><a class="dropdown-item">' +
                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"> 

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.

1 Answer 1

3

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 class="form-group"><a class="dropdown-item">' +
      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.

7
  • I did your changes still not displaying results
    – dennod
    Commented Nov 20, 2021 at 20:37
  • Does <div class="searchdisplay"> have the closing tab </div>? Commented Nov 20, 2021 at 20:40
  • Yes it does have closing tag.
    – dennod
    Commented Nov 20, 2021 at 20:41
  • Do you link the index.js file? Commented Nov 20, 2021 at 20:41
  • You mean this command: $.getJSON('subjects.json', function(data) {
    – dennod
    Commented Nov 20, 2021 at 20:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.