jQuery追加来自JSON源和循环的图像

时间:2018-05-06 13:47:32

标签: javascript jquery json append

我正在使用$ ajax调用从jQuery中的JSON URL获取数据,并且我在HTML中使用bootstrap。

$.ajax({
  url: 'https://services.web.bilinfo.dk/api/vehicle/?user=demo&password=ocfB6XzF73&format=json',
  type: 'GET',
  data: {
    format: 'JSON'
  },
  error: function() {
    $('#info').html('<p>An error has occurred</p>');
  },
  success: function(data) {
    $.each(data, function(index, data) {
      $('.col-md-4')
        .append("picture" + '<img src= "' + data[0].Pictures + '">')
        .append("<h1> Model:" + data[0].Model + "</h1>")
        .append("<h1> make:" + data[0].Make + "</h1>")
        .append("<p> variant:" + data[0].Variant + "</p>")
        .append("<p> registrationDate:" + data[0].RegistrationDate + "</p>");
    })
  },
});

图片似乎没有显示出来,但是会显示一个损坏的img类似的东西,任何提示或建议?

现在我只在数据[0]上找到一辆车。

现在我使用了$.each,但如果我能收到所有车,该怎么办?

1 个答案:

答案 0 :(得分:1)

我会生成一个完整的示例,但该网站上的访问控制不允许它。

在您的成功处理程序中尝试:

$.each(data.Vehicles, function(index, item) {
  $(".col-md-4")
    .append("picture" + '<img src= "' + item.Pictures[0] + '">')
    .append("<h1> Model:" + item.Model + "</h1>")
    .append("<h1> make:" + item.Make + "</h1>")
    .append("<p> variant:" + item.Variant + "</p>")
    .append("<p> registrationDate:" + item.RegistrationDate + "</p>");
})