Appending JSON data to an HTML element

Question

I'm trying to:

Fetch JSON data using $.get
append that data to an HTML element $('photos') so that images are displayed using the external JSON file instead of in-line HTML.

I'm not getting any console errors and the images aren't displaying. Any help would be EXTREMELY appreciated. Thanks a lot. I have an alert to check if the JSON is loaded, and it loads fine- just doesn't change any data.

Here is my current setup:

(JSON): photoData.json

{  "photos": {
"1": {
  "href": "./photos/photo1.JPG",
  "src": "photos/photo1.JPG",
},
"2": {
  "href": "./photos/photo2.JPG",
  "src": "photos/photo2.JPG",
},
"3": {
  "href": "./photos/photo3.JPG",
  "src": "photos/photo3.JPG",
},
"4": {
  "href": "./photos/photo4.JPG",
  "src": "photos/photo4.JPG",
},
"5": {
  "href": "./photos/photo5.JPG",
  "src": "photos/photo5.JPG",
}}}

jQuery:

$.get("./data/photoData.json", function(photos){
alert("Data Loaded: " + photos);
let htmlStr = "";
for (let i = 0; i < photos.length; i++){
    htmlStr += `<figure><a href="${photos[i].href}"><img src = "${photos[i].src}"></img></a></figure>`
}
$('Photos').html(htmlStr);});

You are using photos.length when photos is actually an object. Use for..in instead. — palaѕн
– palaѕн, Commented Mar 19, 2018 at 12:06
$('Photos').html(htmlStr); is not a valid selector add . for a class or # for an id of your div — abraham63
– abraham63, Commented Mar 19, 2018 at 12:07
what are you getting in the alert box. Also you may want to use JSON.parse(photos) in the callback !!! — d_bhatnagar
– d_bhatnagar, Commented Mar 19, 2018 at 12:11
All modern browsers have support for template literals, @FaizKhan. — Andy
– Andy, Commented Mar 19, 2018 at 12:23

Andy · Accepted Answer · 2018-03-19 13:00:19Z

1

photos is a object of objects not an array. So use for...in instead:

$.get("./data/photoData.json", function(data) {
  const photos = data.photos;
  let htmlStr = '';
  for (let photo in photos) {
    htmlStr += `<figure><a href="${photos[photo].href}"><img src="${photos[photo].src}"></img></a></figure>`
  }
});

And something that's been raised in the comments: $('Photos') is not a valid jQuery selector. I suspect that you have an element with an id called Photos - you just need to add the hash to the selector: $('#Photos').

DEMO

edited Mar 19, 2018 at 13:00

answered Mar 19, 2018 at 12:09

Andy

63.6k13 gold badges72 silver badges99 bronze badges

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

3 Comments

Dean Coulstock Over a year ago

I think I understand? I've adapted the code with your solution but I'm still not getting any results. Also your JSFiddle might be broken, I'm not getting results there either. Sorry if something here is going over my head... I also receive the following with your current solution: Identifier 'photos' has already been declared Though I can't see anywhere in my code that I've declared it...

Andy Over a year ago

Open your dev console to see the results in the fiddle. In addition, remember that you're returning data that is an object that has one object called photos. I've updated my answer with your rest call. Perhaps you can understand a little better what's happening.

Dean Coulstock Over a year ago

Thanks so much Andy, that definitely helped clarify where I was going wrong. Appreciate the help!

Collectives™ on Stack Overflow

Appending JSON data to an HTML element

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related