CODEWITHSUNDEEP
jqueryjsonajax
Alan
Alan

Reputation: 697

How to display JSON data with jQuery Ajax?

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

Upvotes: 4

Views: 19926

Answers (3)

scrappedcola
scrappedcola

Reputation: 10572

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

Upvotes: 3

Alen.Toma
Alen.Toma

Reputation: 4870

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)

Upvotes: 0

Bernz
Bernz

Reputation: 181

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 += .......

Upvotes: 4

Related Questions