jQuery从JSON源附加图像并循环

Question

I'm working on fetching data from a JSON URL in jQuery with $ajax call and I'm using bootstrap in the HTML.

$.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>");
    })
  },
});

The image doesn't seem to come out, but displays a broken img like thing, any hints or suggestions?

And right now I'm only getting one car out, at data[0].

Now I'm using a $.each , but what if I would receive all cars?

Answer 1

I would generate a complete example, but the access control on that site does not allow it.

In your success handler try:

$.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>");
})