CODEWITHSUNDEEP
jqueryjson
Danzel91
Danzel91

Reputation: 113

Returning data using JSON & JQUERY

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

Upvotes: 0

Views: 33

Answers (2)

Cue
Cue

Reputation: 2759

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.

Upvotes: 1

simonecosci
simonecosci

Reputation: 1204

You should join the array elements

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

Upvotes: 0

Related Questions