Returning data using JSON & JQUERY

Question

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

• rubentd: so, you want to filter the results based on what the user writes on the search field?
• Tim Lewis: $( ".details") is targeting class="details", which I don't see anywhere in your HTML. Can you provide a more complete example? Feel free to use jsfiddle.net/x742rn5a as a base.
• Rory McCrossan: Your logic could do with using join() on the array instead of relying on coercion to a string for the concatnation, but your code works fine: jsfiddle.net/x5vqg7t6.

Answer 1

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.

Answer 2

You should join the array elements

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