How to clear results from json file using JQuery and Javascript?

Question

I am trying to get data from JSON and present it with my 'Search' function, after I display the data I want to clear the result until the user will enter new word. Now it is displaying my all JSON file without clearing it.

The code looks like that:

<body>
    <br>
    <div id="searcharea">
        <h2>Search Word</h2>
        <input type="search" id="search"/>
    </div>
    <div id="update">
    </div>
    <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>

    <script type="text/javascript">
    $('#search').keyup(function() { //when key is pressed in search bar
        var searchTerm = $(this).val(); //val of search bar
        var myExp = new RegExp(searchTerm, "i"); //regular experation

        $.getJSON('index.json', function(data){     //get the json file
            var output = "<ul id='result'>";
            $.each(data, function(key, val){
                if(val.name.search(myExp) != -1){   //search for the data in the json file
                    output += '<li>';
                    output += '<h3>' +val.name+ '</h3>';
                    output += '<h3>' +val.song+ '</h3>';
                    output += '<h3>' +val.part+ '</h3>';
                    output += '</li>';
                }
            });//end each
            output += "</ul>";
            $('#update').html(output); //output result to the update div
        });
    });
    </script>
</body>

The JSON file looks like that:

[
    {
        "name":"Word: 'asked' ",
        "song":"Name of the song: 'Drive My Car' ",
        "part":"Part: 1"
    },
    {
        "name":"Word: 'a' ",
        "song":"Name of the song: 'Drive My Car' ",
        "part":"Part: 1, 2, 3"
    }
]

What exactly are you trying to clear? I don't see anything in the script about an attempt to clear anything. Also as a side note, it looks like this script is doing a getJSON for the index.json file every time there is a keyup event for '#search'. Since it is a static file you really should fetch it once and reuse the result. — Taplar
– Taplar, Commented Nov 19, 2016 at 15:45
do you want the result to be clear when the input search text is deleted and value is blank or ask is something different ? — Deep
– Deep, Commented Nov 19, 2016 at 15:45

Mihai Alexandru-Ionut · Accepted Answer · 2016-11-19 16:46:08Z

1

Please try this.Further more, I recommand you to use .trim function.

$('#search').keyup(function () { //when key is pressed in search bar
 var searchTerm = $(this).val(); //val of search bar
 var myExp = new RegExp(searchTerm, "i"); //regular experation

 var output = "<ul id='result'>";
 if (searchTerm.trim()!= '') {
     $.getJSON('index.json', function (data) { //get the json file
         $.each(data, function (key, val) {
             if (val.name.search(myExp) != -1) { //search for the data in the json file
                 output += '<li>';
                 output += '<h3>' + val.name + '</h3>';
                 output += '<h3>' + val.song + '</h3>';
                 output += '<h3>' + val.part + '</h3>';
                 output += '</li>';
             }
        }); //end each
     });
  }

  output += "</ul>";
  $('#update').html(output); //output result to the update div
});

Here is a working solution

Another way is to use this code:

if(searchTerm!="")
      $('#update').html(output); //output result to the update div
else
      $('#update').html('');

edited Nov 19, 2016 at 16:46

answered Nov 19, 2016 at 15:48

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

charlietfl Over a year ago

what is json that you are iterating? It is undefined

Mihai Alexandru-Ionut Over a year ago

I use json for testing

Mihai Alexandru-Ionut Over a year ago

@charlietfl, replace json with data and it will work ! He obtained data from ajax call.

charlietfl Over a year ago

No...the existing call is in the event handler so if you remove that should show what your intention is and how to integrate it

Mihai Alexandru-Ionut Over a year ago

To test it I used local json.

|

Andreas · Accepted Answer · 2016-11-19 15:49:30Z

1

$('#search').keyup(function () { //when key is pressed in search bar
    var searchTerm = $(this).val(); //val of search bar
    var myExp = new RegExp(searchTerm, "i"); //regular experation

    var output = "<ul id='result'>";

    if (searchTerm != "") {
        $.getJSON('index.json', function (data) { //get the json file
            $.each(data, function (key, val) {
                if (val.name.search(myExp) != -1) { //search for the data in the json file
                    output += '<li>';
                    output += '<h3>' + val.name + '</h3>';
                    output += '<h3>' + val.song + '</h3>';
                    output += '<h3>' + val.part + '</h3>';
                    output += '</li>';
                }
            }); //end each
        });
    }

    output += "</ul>";
    $('#update').html(output); //output result to the update div
});

Example:

var data = [{
  "name": "Word: 'asked' ",
  "song": "Name of the song: 'Drive My Car' ",
  "part": "Part: 1"
}, {
  "name": "Word: 'a' ",
  "song": "Name of the song: 'Drive My Car' ",
  "part": "Part: 1, 2, 3"
}];

$('#search').keyup(function() { //when key is pressed in search bar
  var searchTerm = $(this).val(); //val of search bar
  var myExp = new RegExp(searchTerm, "i"); //regular experation

  var output = "<ul id='result'>";
  if (searchTerm != "") {
    $.each(data, function(key, val) {
      if (val.name.search(myExp) != -1) { //search for the data in the json file
        output += '<li>';
        output += '<h3>' + val.name + '</h3>';
        output += '<h3>' + val.song + '</h3>';
        output += '<h3>' + val.part + '</h3>';
        output += '</li>';
      }
    }); //end each
  }
  output += "</ul>";
  $('#update').html(output); //output result to the update div
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="searcharea">
  <h2>Search Word</h2>
  <input type="search" id="search" />
</div>
<div id="update">
</div>

answered Nov 19, 2016 at 15:49

Andreas

21.9k7 gold badges52 silver badges58 bronze badges

2 Comments

user5739080 Over a year ago

If I want also to display on the screen "No word matched" once the user is searching for word that is not appears in the JSON file ?

Andreas Over a year ago

@drorAlfasi if (val.name.search(myExp) != -1) { ... } else { output += '<li>No word matched</li>'; }

Collectives™ on Stack Overflow

How to clear results from json file using JQuery and Javascript?

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related