jQuery append image from JSON source and loop

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?

Take care with your naming conventions. the data you pass as the first parameter to $.each is being overwritten by the data you pass as the second parameter to its function. Also, make sure the first data is actually an array. — Heretic Monkey
– Heretic Monkey, Commented May 6, 2018 at 13:53

JonSG · Accepted Answer · 2018-05-06 15:15:31Z

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

answered May 6, 2018 at 15:15

JonSG

13.6k2 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mr P Over a year ago

Thanks, i got exactly the same, with data.Vehicles, that was what i was missing.

JonSG Over a year ago

Check out @MikeMcCaughan comment. The $.each() function is now using item rather than data[0].

Collectives™ on Stack Overflow

jQuery append image from JSON source and loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related