Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by nicolasvicentini
nicolasvicentini
5,566 Points

Need help showing JSON data in different DIVs

I have some JSON information and need to output that information to diferent DIVs. At some point I managed to output all the information on the same DIV. There might be a problem with the same ID repeated over and over again in those different DIVs; but I think I need to assingn a number to every DIV to make the function move to another DIV.

I am really stuck here.

Any Idea how can I show every hotel information in those different DIV's?

All the code is here:

http://codepen.io/anon/pen/emLYMb?editors=101

3 Answers

Peter Smith
Peter Smith
12,347 Points

Nicolas Vicentini I dug into your code a little bit and modified it so that it's working. I forked the code you pasted to codepen so you can see my changes here. A few notes:

  1. I changed attributes from ID to Class for name, adress, etc... Those changes are in visible in the JavaScript as well as the CSS.

  2. You'll notice in the HTML in place of all of the "cajahotel" DIVS is a single div that is then added to in JavaScript. 

<div id="hotelContainer"></div>

  1. Look at the JavaScript and specifically at the loop, thats where all the magic happens. The code, as is, works. It was put together quickly, and there are definitely better ways to achieve the same effect but it gets the job done.

  2. All the code is probably easier viewed in a normal text editor than in codepen so I would copy/paste whats in codepen to your editor to see whats going on.

Good luck with the rest of your learning, I'll see you around! AND the front-end development track will teach you everything you need to know to fix the problems that came up in this question so I strongly recommend you get on the track or stick with it if you're already there!

nicolasvicentini
nicolasvicentini
5,566 Points

I totally understand what you've done. You really made it look "easy", but I was not able to do that, just because I didn't get to that kind of lessons yet. Thank you Peter Smith, you have been very nice and helpfull! See you around!

Peter Smith
Peter Smith
12,347 Points
Peter Smith
Peter Smith
12,347 Points

Hey mate. Theres a structural issue in the way your coding. An ID attribute is meant to be unique. No two divs should have the same ID. In a case where you want two divs to share the same properties, use the class attribute.

Then you have the issue in how you're parsing the JSON data. What your for loop is doing is adding all the names of hotels to a single hotel variable, all the prices for the hotel to a single price variable, etc... so you're getting a single string with 4 hotel names (Rio Othon PalaceGranada Hotel Rio de JaneiroIbiza HotelRio Othon Palace 2) and a single string with 4 hotel prices (215148127200) etc... FINALLY those strings are printing to the first div only, without touching the following divs (which appear to be there by default).

The way I would go after the result you're trying to achieve is start with an empty container div, in your code it seems to be called container. Then I would use javascript to create all of nested divs using a loop.

nicolasvicentini
nicolasvicentini
5,566 Points
nicolasvicentini
nicolasvicentini
5,566 Points

As far as I understand of programming, your advice is what I was waiting to hear. Seems that the result I am trying to achieve is a little away from my current skills... I think I should go further on with the Front End developer track to solve this...

I am going to leave just one container for those Hotel descriptions with no information. Then use a loop to create all the nested DIVs with common "Class" names for specific CSS styling.

Thank you Peter for your help!