AJAX json数据的CSS格式

Question

我正在使用jquery来调用硬编码的json文件。每个json对象都有名称，图像和描述。

我需要让页面将每个json显示为列出的项目，如下面的模型图像所示。

页面样机

这是我的脚本文件：

$(function() {
$.ajax(
{
  url: 'javascripts/avocado.json',
  data: {}
}).done(function(response) {
console.log(response);
for (var i = 0; i < response.length; i++) {
  $('#avocado-list').append('<div class="avocado-item"></div>')
  $('.avocado-item').append('<h2>' + (i + 1) + '</h2>');
  $('.avocado-item h2').addClass("avocado-number");
  $('.avocado-item').append('<img src="../images/' + response[i].img + '">');
  $('.avocado-item').append('<div><h3>' + response[i].name + '</h3>' + '<p>' + response[i].description + '</p></div>');
  $('.avocado-item h3').addClass("avocado-title");
}
}).fail(function() {
console.log("error");
}).always(function() {
console.log("complete");
});
});

以及我尝试加载json数据的HTML：

<section id="avocado-list" class="list"></section>

我正在尝试为每个json对象创建一个avocado项目div。然后我试图将其后续数据（名称，图像，描述）附加到div中，以便我可以将对象信息放在一行中。

然而，它只为一切创造了一个大的div。我做错了什么？

Answer 1

以您完成的方式创建HTML效率非常低。这是一个更简单的代码版本，可以完成您的工作。

def readcsv(x): #def function to read csv files based on input below
    Data = pd.read_csv(x, parse_dates=['Time_Stamp'], infer_datetime_format=True)
    Data['Date'] = Data.Time_Stamp.dt.date 
    Data['Time'] = Data.Time_Stamp.dt.time 

    Data['Time_Stamp'] = pd.to_datetime(Data['Time_Stamp']) 
    print(Data[1:6])
    return Data

Data = readcsv('MainD.csv')