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

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

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('');

$('#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>

Related

How handle $.getJSON file with strings and integer?

how can I parse Integer from the JSON file?
Or what is the problem below?
$('#search').keyup(function(){
var searchField = $('#search').val();
var myExp = new RegExp(searchField, "i");
$.getJSON('data.json', function(data){
if(searchField === '') {
$('#update').html('');
return;}
var output ='<ul class="searchresults">';
$.each(data, function(key, val){
if(val.number.search(myExp) != -1) {
output += '<li>';
output += '<p>' + val.number + '</p>';
output += '<p>' + val.name + '</p>';
output += '</li>';
}
});
output += '</ul>';
$('#update').html(output);
});
});
What is missing?
Error is:
Uncaught TypeError: val.number.search is not a function
Many thanks in advance!
Br
Probably it's a number, numbers don't have a search method. You could use .toString().search(...) to convert it to a string first.

JS: Live search not working with spaces between two query

performing this search operation on JSON data, it works show filter data when enter term in search bar but it works only with one term as soon as I add space and other term it shows nothing, what am I doing wrong? Also it takes time to filter data around 14000 records are in JSON file
$(document).ready(function() {
$('#selectterm').change(function() {
var sterm = $(this).val();
$.ajax({
type: "GET",
url: "/fee/get/" + sterm,
success: function(res) {
if (res) {
$('#txt-search').keyup(function() {
var searchField = $(this).val();
if (searchField === '') {
$('#filter-records').html('');
return;
}
var output = '<div class="row">';
var count = 1;
$.each(res, function(key, lol) {
if ((lol.strm.toLowerCase().indexOf(searchField.toLowerCase()) != -1) ||
(lol.subject_cd.toLowerCase().indexOf(searchField.toLowerCase()) != -1) ||
(lol.catalog_nbr.toLowerCase().indexOf(searchField.toLowerCase()) != -1)) {
output += '<table class="table">';
output += '<thead>';
output += '<tr>';
output += '<th scope="col">Term</th>';
output += '<th scope="col">Subject</th>';
output += '<th scope="col">Catlog Nbr</th>';
output += '</tr>';
output += '</thead>';
output += '<tbody>';
output += '<tr>';
output += '<td>' + lol.strm + '</td>';
output += '<td>' + lol.subject_cd + '</td>';
output += '<td>' + lol.catalog_nbr + '</td>';
output += '</tr>';
output += '</tbody>';
output += '</table>';
if (count % 2 == 0) {
output += '</div><div class="row">'
}
count++;
}
});
output += '</div>';
$('#filter-records').html(output);
});
}
}
});
});
});

loop from json files and search then get the value via jquery and json

I have a bit of a question. which is a loop.
I have a simple looping which when I clicked some numbers and it will search and loop through out my json file.
here is my code
function showSortedRoute(){
$.getJSON('my.json', function(data) {
var $resultHTML = $("#divResult");
var result = "";
result = '<ul class = "list clearfix">';
$.each(data, function (key, val){
if (val.area_id == getRuoute) {
var image = val.image;
var structure_name = val.name;
var copy = val.copy;
var address = val.address;
var access = val.access;
var type = val.type;
var getarea = val.area;
result += '<div class="iconArea">';
result += '<h4>' + name + '</h4>';
result += '<h4><b>' + getarea + '</b></h4>';
result += '</div>';
result += '<p class="catch">' + copy + '</p>';
result += '<dl class="detailArea clearfix">';
result += '<dd>' + address + '</dd>';
result += '<dd>' + access + '</dd>';
result += '</dl>';
result += "</ul>";
$resultHTML.html(result);
} else {
alert("No area ID Found" + getRoute);
}
});
});
}
this does not give me any results, saying no area ID found, but in
alert("no area id found" + getRoute);
and the alert shows displays like four times.
I can check that the value is the same.
code for matching up with integers with json is not working.
There's a few errors in your code:
getRuoute in this line: if(val.area_id == getRuoute){ seems to be
undeclared variable
name in this line: result += '<h4>' + name + '</h4>'; is also
undeclared
getRoute in this line: alert("No area ID Found" + getRoute);
seems to be undeclared variable
Here is corrected and optimized version:
$.getJSON('my.json', function(data) {
var $resultHTML = $("#divResult"),
result = '<ul class = "list clearfix">';
$.each(data, function (key, val){
if (val.area_id == 'getRuoute') { // check type and name of 'getRuote', maybe 'getRoute'?
var image = val.image,
structure_name = val.name,
copy = val.copy,
address = val.address,
access = val.access,
type = val.type,
getarea = val.area;
result += '<div class="iconArea">';
result += '<h4>' + structure_name + '</h4>';
result += '<h4><b>' + getarea + '</b></h4>';
result += '</div>';
result += '<p class="catch">' + copy + '</p>';
result += '<dl class="detailArea clearfix">';
result += '<dd>' + address + '</dd>';
result += '<dd>' + access + '</dd>';
result += '</dl>';
result += "</ul>";
$resultHTML.html(result);
} else {
alert("No area ID Found" + getRoute);
}
});
});

Fill table in javascript with data from db

I have an html <table> that I need to fill with data from a database query. The query returns 10 rows and then sends the data to the method fill(data) to fill the table:
function getTopQ() {
alert("Get top Qs");
callServer('fill', 'checkConnection', false, 'SelectTopQues.php');
}
function fill(data) {
alert("ready to fill now");
$('#table').html('');
var search = '#table';
for (var i = 0; i < data.length; i++) {
$('#table').listview("refresh");
var Questions = data[i];
var str = '<td " ID="' + Questions[0] +
'" Question="' + Questions[1] +
'" UserID="' + Questions[2] +
'"CategoryId"' + '" SubCategoryId"' + '" DatePosted"' + '"';
str += '">'; //end li
str += '<a href="" data-transition="fade">';
str += Questions[1];
str += '</a>';
//str += '<span class="hiddenData">' + item[13] + '</span>';
str += '</td>';
$('#table').append(str);
$('#table').listview("refresh");
}
console.log(data);
console.log($('#table'));
$('#table').listview("refresh");
}

Target Specific Javascript Object Literal fields and array with jquery

I cant seem to get this to work. Im trying to do two things
A). Get the following code to show up correctly. The first element is show 'undefined
<ul>
<li>Button
<ul>
<li>x:1</li>
<li>y:2</li>
<li>width:3</li>
<li>height:4</li>
</ul>
</ul>
Here is my code:
$(document).ready(function() {
var data = {
"Controls": [{
"Button":[{ "x": "1","y": "2","width": "3","height": "4" }],
"Image":[{"x": "5","y": "6","width": "7","height": "8"}],
"TextField":[{"x": "9","y": "10","width": "11","height": "12"}]
}]
}
var str = '<ul>';
$.each(data.Controls, function(k, v) {
str += '<li>' + k[0] + '</li><ul>';
for(var kk in v.Button[0]){
str += '<li>' + kk + ':' + v.Button[0][kk] + '</li>';
}
str += '</ul>';
});
str += '</ul>';
$('div').append(str);
})
And
B). trying to display a list(separate list from above) of just the fields. like this:
<li>Button</li>
<li>Image</li>
<li>TextField</li>
I think that the answer to the second lies in the first, but I cannot seem to get the targeting right.
Any help is appreciated
Demo
To get the first list:
var str = '<ul>';
var target = "Button";
str += '<li>' + target + '<ul>';
$.each(data.Controls[0][target][0], function(kk, vv){
str += '<li>' + kk + ':' + vv + '</li>';
});
str += '</ul></li>';
str += '</ul>';
To get the second list:
var str = '<ul>';
$.each(data.Controls[0], function(k,v) {
str += '<li>' + k + '</li>';
});
str += '</ul>';
To target them by index, so Button is 0:
var str = '<ul>';
var target = 0;
var count = 0;
$.each(data.Controls[0], function(k,v) {
if(count == target)
{
str += '<li>' + k + '<ul>';
$.each(v[0], function(kk, vv){
str += '<li>' + kk + ':' + vv + '</li>';
});
str += '</ul></li>';
return false; // <-- break because we got what we wanted
}
count++;
});
str += '</ul>';
First of all, this has nothing to do with JSON. JSON is a string-serialization format. What you have here is an object literal.
Second, I have no idea why you are wrapping all your object definitions inside Controls, with arrays, seems like a lot of extra hassle. You are also doing things in a very non-jQuery way.
You could try something like this:
var data = {
"Controls": {
"Button":{ "x": "1","y": "2","width": "3","height": "4" },
"Image":{"x": "5","y": "6","width": "7","height": "8"},
"TextField":{"x": "9","y": "10","width": "11","height": "12"}
}
}
$('div').append('<ul id="outer_ul">');
$.each(data.Controls, function(key, value) {
$('#outer_ul').append('<li>' + key + '</li>', '<ul id="' + key +'">');
$('#field_list').append('<li>' + key + '</li>');
$.each(value, function(key2, value2) {
$('#' + key).append('<li>' + key2 + ':' + value2 + '</li>');
}
}
This code populates both you div as well as a ul with the id of field_list which would represent the container into which you want to put the second list (so adjust this code according the the proper jQuery selector you want to use.

Categories

Resources