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

so, you want to filter the results based on what the user writes on the search field? — rubentd
– rubentd, Commented Nov 15, 2018 at 16:12
$( ".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. — Tim Lewis
– Tim Lewis, Commented Nov 15, 2018 at 16:14
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. — Rory McCrossan
– Rory McCrossan, Commented Nov 15, 2018 at 16:16

Cue · Accepted Answer · 2018-11-15 16:30:45Z

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.

answered Nov 15, 2018 at 16:30

Cue

2,7591 gold badge14 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

simonecosci · Accepted Answer · 2018-11-15 16:20:23Z

0

You should join the array elements

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

answered Nov 15, 2018 at 16:20

simonecosci

1,2148 silver badges13 bronze badges

Collectives™ on Stack Overflow

Returning data using JSON & JQUERY

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related