Parse JSON data from URL via jQUERY to HTML

Question

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

Yes, script : w3schools.com/jquery/ajax_getjson.asp, I change URL but dont work — Peter
– Peter, Commented Jan 10, 2018 at 22:16
@Peter The script there is for appending plain text to to a DIV. Did you change it to add <li> element to your <ul>? Show your actual code. — Barmar
– Barmar, Commented Jan 10, 2018 at 22:42

Barmar · Accepted Answer · 2018-01-10 22:39:40Z

1

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>

edited Jan 10, 2018 at 22:39

Barmar

789k57 gold badges554 silver badges669 bronze badges

answered Jan 10, 2018 at 22:30

Tony M

7414 silver badges16 bronze badges

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

2 Comments

Peter Over a year ago

Thanx, it works, you save me a lot of time, I am new in jQUERY

Barmar Over a year ago

@Peter What's the difference between this and what you originally tried? Except for using a for loop instead of $.each, it seems identical to the w3schools page you mentioned in the comment.

Sphinx · Accepted Answer · 2018-01-10 22:22:48Z

0

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);

answered Jan 10, 2018 at 22:22

Sphinx

10.7k2 gold badges35 silver badges50 bronze badges

2 Comments

Peter Over a year ago

Thanx it works, but I have esternal URL file with JSON: suggest.autocompleteapi.com/ap7d7hg5jezr/…, put this file in "let yourData"?

Sphinx Over a year ago

try this: $.ajax({ url: 'your_url', type: 'POST', data: post_params, async: true, cache: false, success: function (result) { var yourData = JSON.parse(result);}

Collectives™ on Stack Overflow

Parse JSON data from URL via jQUERY to HTML

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related