Pfthb

I am trying to pull the data I have within a JSON file onto my HTML page when a user interacts with the search field.

Here is a link to my JSON file: http://myjson.com/m0a3m

<input id="search" type="text" placeholder="Search term">
<div id="matches" style="height:70px; overflow-y:hidden; white-space:pre"></div>

$.getJSON( "https://api.myjson.com/bins/m0a3m", function( data ) 
 var items = ;
 var dataArr = ;

 $.each( data, function( key, val, ) 
 items.push( "<li id='" + key + "'><div class='c-name'>" + val.name + "</div><div class='c-address'>" + val.address.name + ', ' + val.address.line1 + ',' + val.address.town + ', ' + val.address.county + ', ' + val.address.postcode + "</div></li>" );
 );
 $( ".details").html("<ul>" + items + "</ul>");
);

Currently, all this does is display a few a lines of data. Could do with some real help linking it to the search bar.

Any suggestions or tips on what I should be read up on would be great!

Thanks

Since items is an Array and $.html expects a string – you'll need to join your array of items to output a string.

$(".details").html("<ul>" + items.join('') + "</ul>");

The join() method creates and returns a new string by concatenating
all of the elements in an array (or an array-like object), separated
by commas or a specified separator string.

You should join the array elements

$( ".details").html("<ul>" + items.join("") + "</ul>");