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
Gerald Susanteo
Front End Web Development Techdegree Student 7,117 Pointslast line
I've understood everything and did it correctly except the last line when guil talked about this document.querySelector('body').innerHTML = planets.map(planet => createPlanetHTML(planet)).join(''); i don't really know what's happening in this line and i am still confused how to understand this. Can someone give an explanation of what this is about and maybe reference to a video about it? Thanks
2 Answers
Simon Coates
8,223 Pointsit's a callback (using arrow syntax - see https://teamtreehouse.com/library/javascript-functions ) being fed into the map method on planets. As planets is an array, you can view documentation (and examples) for the map method on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array . It produces a new array having run each value through the function being fed in. The new array is then run through the array class's join method - which put the various elements together using the parameter as a separator. The following example does some similar stuff but breaks it down.
let planets = [ 1, 2, 3];
let mappedPlanets = planets.map(planet => planet + 1);
mappedPlanets; // [2, 3, 4]
let asText = mappedPlanets.join(",");
asText; // "2,3,4"
The bit about document.querySelector('body').innerHTML is probably outlined in the treehouse course on accessing the DOM (https://teamtreehouse.com/library/getting-and-setting-text-with-textcontent-and-innerhtml ). But it locates an element and allows you to use assignment to set HTML (using text) for that element
As there are a few things happening on that line, are you able to specify what specifically is troubling you?
Rabe Datta
3,693 Pointsdocument.querySelector("body").innerHTML = planets
.map((planet) => createPlanetHTML(planet))
.join("");
I noticed that if you remove .join(""), it still works fine. Not sure why join("") is necessary in this case.
Gerald Susanteo
Front End Web Development Techdegree Student 7,117 PointsHmm, im also confused lol
Simon Coates
8,223 PointsWhen I demoed it, failing to use join resulted in the html including some commas. So given an array called containing 2,3 and 4 and having selected a h1 element to play with, I ran the following
h1.innerHTML = mappedPlanets.join(""); //234
h1.innerHTML = mappedPlanets; //2,3,4
the text of the html resulting is next to the lines of code.
Gerald Susanteo
Front End Web Development Techdegree Student 7,117 PointsGerald Susanteo
Front End Web Development Techdegree Student 7,117 Pointshey Simon, I'm just confused about some part of the code and it looks difficult to do. Especially the use of .join btw couldn't we just do this on HTML? why do it in javascript?
Simon Coates
8,223 PointsSimon Coates
8,223 PointsHi gerald. Have you done the DOM and AJAX courses yet? Setting the innerHTML puts the JavaScript output into HTML. The reason to do this in JavaScript is so that the HTML can be dynamically generated. The JavaScript can send a request to a server and get back some data and build it into some HTML. Then you can request another slice of data (a refreshed set or maybe the next set of values) via JavaScript and plug it into some HTML in a JavaScript string to update the UI with different values.