Don't output null

[Stevan]

I’m using a simple script to output json objects

$('#txt-search').keyup(function(){
        var searchField = $(this).val();
		if(searchField === '')  {
			$('#filter-records').html('');
			return;
		}
		
        var regex = new RegExp(searchField, "i");
        var output = '<div class="info">';
        var count = 1;
		  $.each(data, function(key, val){
			if ((val.place_name.search(regex) != -1) || (val.address.search(regex) != -1)) {
			  
			  output += '<h4>' + val.place_name + '</h4>';
			  output += '<p>' + val.address + '<br> Tel: (0' + val.area_code + ')'  + val.phone + '</p>'
              output += '<p>Practice List Size: ' + val.list_size + '</p>'

			  if(count%1 == 0){
				output += '</div><div class="info">'
			  }
			  count++;
			}
		  });
		  output += '</div>';
		  $('#filter-records').html(output);
    });

});

If a record shows null or is empty could I add a condition to not output that record?

[m_hutley]

I dont see a definition for data in your code, but from using $.each, I will assume it to be an Array of Objects.
“If a record shows null”… shows null for what? place_name? address? area_code? list_size? any of the above?
Does the record actually contain null? Or does it not contain the key if the value is null?

From the looks of your code…

$('#txt-search').keyup(function(){
   if(searchField === '')  {
	$('#filter-records').html('');
	return;
   }
  var re = new RegExp(searchField, "i");
  var output = "<div class=\"info\">"+(data.filter((x) => x.hasOwnProperty('place_name') && x.place_name.match(re)).map((item) => "<h4>"+item.place_name+"</h4><p>"+item.address+"<br> Tel: (0" + item.area_code + ')'  + item.phone + '</p><p>Practice List Size: ' + item.list_size + '</p>').join("</div><div class=\"info\">"))+"</div>";
  $('#filter-records').html(output);
}

By definition, any place_name that is null would not match the regex, and would automatically be filtered…

[Stevan]

Sorry full code - http://stevanbarry.com/projects/healthcare-facility-search/
Yes its an array. So list_size had null - i simply would like to remove the output if there is no value.

[m_hutley]

So glancing at your data set, “null” in this case is actually the empty string (“”).

I would recommend using a filter on the data itself… to expand my above example…

var matches = data.filter((x) => x.list_size != "" && x.hasOwnProperty('place_name') && x.place_name.match(re))
var results = matches.map((item) => "<h4>"+item.place_name+"</h4><p>"+item.address+"<br> Tel: (0" + item.area_code + ')'  + item.phone + '</p><p>Practice List Size: ' + item.list_size + '</p>')
var output = "<div class=\"info\">"+(results.join("</div><div class=\"info\">"))+"</div>";

But to stick to your own code, jQuery’s $.each has a feature in which you can short the loop in a continue-like behavior by returning a non-false value;

	  $.each(data, function(key, val){
		if ((val.place_name.search(regex) != -1) || (val.address.search(regex) != -1)) {

=>

		  $.each(data, function(key, val){
			if ((!val.place_name.match(regex) && !val.address.match(regex)) || val.list_size == "") { return true; }

[m_hutley]

and if i were smart, i’d remove the join text altogether and just put the div tags into the map function. But i’m not a smart man first thing in the morning, obviously.

(For those that don’t get what i mean…)

var matches = data.filter((x) => x.list_size != "" && x.hasOwnProperty('place_name') && x.place_name.match(re))
var results = matches.map((item) => "<div class=\"info\"><h4>"+item.place_name+"</h4><p>"+item.address+"<br> Tel: (0" + item.area_code + ')'  + item.phone + '</p><p>Practice List Size: ' + item.list_size + '</p></div>');
 $('#filter-records').html(results.join(""));

[Stevan]

I like this method my jquery is very poor so I need to test. Thanks for this!

[stephen_]

Do you think I could add in a Google API to bring up the location on a map say as a link on each record?

Ideally I’d like all the code simple and inline to one page?