CODEWITHSUNDEEP
jqueryhtmljsonparsing
Peter
Peter

Reputation: 89

Parse JSON data from URL via jQUERY to HTML

I have this file wiht JSON data:
https://suggest.autocompleteapi.com/ap7d7hg5jezr/drg121016?prefix=pe&size=10

and I want very simple script in jQUERY to parse this data,
via jQUERY to HTML webpage to ul style like this:

<ul>
<li>K704 Alkoholové zlyhávanie pečene</li>
<li>K741 Skleróza pečene</li>
........
.......
</ul>

Thank you very much for your time

Upvotes: 1

Views: 1179

Answers (2)

Tony M
Tony M

Reputation: 741

I'd say research everything prior to seeking help on SO. This does what you want by pulling the data via Ajax using .getJSON

$.getJSON("https://suggest.autocompleteapi.com/ap7d7hg5jezr/drg121016?prefix=pe&size=10", function(result) {

  var data = result.suggestions;

  for (var i = 0; i < data.length; i++) {
    $('.lists').append('<li>' + data[i].value + '</li>');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="lists">

</ul>

Upvotes: 1

Sphinx
Sphinx

Reputation: 10729

You can try below:

//if the data is one string from ajax response, 
//you have to parse the string to json object first
//let yourData = JSON.parse(ajax_response);

let yourData = {'suggestion':[
                              {'value':'K704 Alkoholové zlyhávanie pečene'},
                              {'value':'K718 Toxická choroba pečene s inými poruchami pečene'},
                              {'value':'K718 Toxická choroba pečene s inými poruchami pečene'}
                             ]
               }

let ulPlacedAt = $('body'); //you can change it to other object you like
let ulBody = '';
yourData['suggestion'].forEach(function(item) {
    ulBody += '<li>'+item['value'] + '</li>';
  }
)
ulBody = '<ul>' + ulBody + '</ul>';
ulPlacedAt.append(ulBody);

Upvotes: 0

Related Questions