Tino Caer Tino Caer - 5 months ago 33
jQuery Question

Remove slash fromJSON array

So there are questions like this, but this is slightly different. My JSON array holds an image url:

https://d13yacurqjgara.cloudfront.net/users/329207/screenshots/2798176/bemocs_rei_dribbble.jpg.

When I parse the JSON with jquery, the img src returns with a slash (/) at the end:

https://d13yacurqjgara.cloudfront.net/users/329207/screenshots/2798176/bemocs_rei_dribbble.jpg/

So I get an error and the image cannot be loaded. How can I remove that one slash?

Here is my code for my json parser:

$(document).ready(function() {
$.getJSON('scripts/json/articles.json', function(data) {
$.each(data, function(i) {
parent = $("<div class='card'/>");
a = $("<a href=" + data['articles']['0'].Link + " target='_target'/>")
li = $("<li class='bottom-description'/>");

parent.append(a);

a.append("<img src=" + data['articles']['0'].Image + "/>");
a.append(li);

li.append("<p class='title'>" + data['articles']['0'].Title + "</p>");
li.append("<h3 class='desc'>" + data['articles']['0'].Description + "</h3>");
$('.card-section').append(parent);
})
});
})

Answer

I believe you need to put the image source in quotes. The "/" is coming from the "/>".

The solution is to replace line 10 with ...

a.append("<img src='" + data['articles']['0'].Image + "' />");

Notice the single quote added next to "src=" and "/>".

Comments