How to display JSON data with jQuery Ajax?

Question

My code is not working and not sure why. Please help

I have an AJAX call that returns some JSON like this but wont returns my data from the json file:

  $(function() {
    ajaxJS();
    function ajaxJS(e) {
      if (e) {
        e.preventDefault();
      }
      $.ajax({
        url: "https://raw.githubusercontent.com/RichmondDay/public/master/test_vehicle_inventory_data.json",
        method: "GET",
        success: function(data) {
          console.log(data);
          var html_to_append = '';
          $.each(data, function(i, item) {
            html_to_append +=
            '<div class="col-3 mb-3"><div class="text-uppercase"><p>' +
            item.Name + 
            '<div class="col-3 mb-3"><div class="ext-uppercase"><p>' +
            item.Price +
            '</p></div><img  class="image img-fluid" src="' +
            item.photo +
            '" /><p class="company">' +
            item.Retailer +
            '</p></div>';
          });
          $("#items-container").html(html_to_append);
        },
        error: function() {
          console.log(data);
        }
      });

    }

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
    <div id="items-container" class="row"></div>
  </div>

Json

What does console.log(data); log? Is the data already parsed? Are there any console errors? — Taplar
– Taplar, Commented May 18, 2018 at 20:58

Bernz · Accepted Answer · 2018-05-18 21:38:46Z

4

You seem to be lacking the line to parse your JSON to convert it in an array. Your code should add this line:

...
success: function(data) {
          console.log(data);
          data = jQuery.parseJSON(data); // <-- *** ADD THIS LINE ***
          var html_to_append = '';
          $.each(data, function(i, item) {
            html_to_append += .......

answered May 18, 2018 at 21:38

Bernz

1813 bronze badges

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

Comments

scrappedcola · Accepted Answer · 2018-05-18 21:47:49Z

You should set the dataType param on the ajax call so you get an object back rather than a string. It appears that your api service doesn't set a type specific content type header and so jquery doesn't attempt to parse the data based upon the content type. https://jsfiddle.net/6ygan94m/ is an example of your code in action.

$.ajax({
        url: "https://raw.githubusercontent.com/RichmondDay/public/master/test_vehicle_inventory_data.json",
        method: "GET",
        dataType: 'json',
        success: function(data) {
          console.log(typeof(data));
          var html_to_append = '';
          $.each(data, function(i, item) {
            html_to_append +=
            '<div class="col-3 mb-3"><div class="text-uppercase"><p>' +
            item.Name + 
            '<div class="col-3 mb-3"><div class="ext-uppercase"><p>' +
            item.Price +
            '</p></div><img  class="image img-fluid" src="' +
            item.photo +
            '" /><p class="company">' +
            item.Retailer +
            '</p></div>';
          });
          $("#items-container").html(html_to_append);
        },
        error: function() {
          console.log(data);
        }
      });

See the jquery api docs for more info: http://api.jquery.com/jquery.ajax/

dataType (default: Intelligent Guess (xml, json, script, or html)) Type: String The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string).

Alen.Toma · Accepted Answer · 2018-05-18 21:45:54Z

0

you should include this line as it may data be of type string and not object

if (typeof data === "string") // validate if data is json string then parse it 
data = JSON.parseJSON(data)

answered May 18, 2018 at 21:45

Alen.Toma

4,8782 gold badges19 silver badges37 bronze badges

Collectives™ on Stack Overflow

How to display JSON data with jQuery Ajax?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related