如何使用jQuery Ajax显示JSON数据? [英] How to display JSON data with jQuery Ajax?

问题描述

我的代码无法正常工作，不确定为什么.请帮助

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

我有一个AJAX调用，它返回这样的JSON，但不会从json文件返回我的数据:

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

推荐答案

您似乎缺少分析JSON以将其转换为数组的行.您的代码应添加以下行:

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

这篇关于如何使用jQuery Ajax显示JSON数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！