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

Seth Warner
Seth Warner
5,348 Points

Hey guys, I'm new to Javascript and have only "dived" so far into the course, yes i am still going, what would be the..

In a video lesson Dave put up, he is asking to create an array, holding several objects, and each object has a few values. He then instructs for us to simply have these values printed to the screen via html.

So far I only know of "document.getElementById();".

What I was wondering is, is there an opposite. I'm coming from PhP, so this may not be possible with Javascript, however Ill still ask. Can I run some sort of foreach loop, perhaps just a standard for loop, on each of these objects, values, and have them post into an html page view. For instance in php I would simply associate these values with a variable and attach the front and back end via MVC and post their variables in the view, whiling running it through a foreach loop. How could I do this in a very clean, compressed, comprehendible way with Javascript.

My code is below, hopefully you can see where I am going with this, instead of ".write" is there some sort of opposite to "document.getEelementById();"? Thus letting me post a variable inside the html view and have it loop through each of the objects values within the array, and have them wrapped in an <ol>, by wrapping that one variable as you would a foreach loop.

Seth

 var sethsEducation = [
 {Main Skill set: 'Php & MySQL', 'Javascript', 'Html & CSS'},
 {Time frame of completion: 'sixty days', 'forty days', 'thirty days'},
 {Academic curriculum's: 'Team Treehouse', 'Team Treehouse', 'Codecadmey', 'Brent Ozar'},
 {Extra skills obtained & obtaining: 'Sass', 'Gulp', 'Elixir', 'Vue' 'Grunt', 'Bower', 'Composer', 'Home Brew', 'Git', 'Github', 'Virtual Box', 'Vagrant',
 'Laravel', 'Homestead', 'Compass', 'PhpStorm', 'WebStorm', 'MAMP', 'Asana', 'Screen Hero', 'UI design', 'UX design', 'Web Design', 'Jquery', 'Ajax', 'Indexing',
 'Sketch', 'Terminal', 'Restful Practice', 'MVC layouts', 'and Partial Coding'}

 ];

 for (i = 0; i < sethsEducation.length; i += 1;) {
document.write(sethsEducation);


 }
Seth Warner
Seth Warner
5,348 Points

Awesome Ran ShemTov, I've yet to learn about document.querySelector, and inner.HTML, so I take it that how I was thinking would be possible, just at the current point in time of my location in the javascript course I have yet to be taught how to do it. Thank you!

Seth

Ran ShemTov
Ran ShemTov
14,148 Points

Great!.

If that's so: innerHTML = ""; to specify which inner html you want to put inside some element (notice that it accepts a string) and document.querySelector("") (also accepts a string) lets you choose elements using css selectors.

Seth Warner
Seth Warner
5,348 Points

Ran ShemTov ooohhh, gotcha, okay. Thats good to know, I home Dave touches base on those at some point!

Seth

1 Answer

Ran ShemTov
Ran ShemTov
14,148 Points

I found it a bit hard to follow your request, but as I understand, your question is this: sethsEducation[i] would be each item. I would choose the item I want to display the info at, lets say it's a <p> with the class "text". here's how i'd do it.:

 for (i = 0; i < sethsEducation.length; i += 1;) {
 document.querySelector('.text').innerHTML = sethsEducation[i];
 }

if you add a plus sign before the equal sign after "innerHTML" you'd get them all together. If you don't you'l get it displayed one at a time. (which might be a little odd because I'm not sure if it's even gonna work). But that's just how it works. try console.log(); to get the result to your browser's console, it's probably the best way to learn how something works and understand if your loop is written the right way.