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 Karl Russell Sumando Menil
.a{fill-rule:evenodd;}techdegree
Karl Russell Sumando Menil
Full Stack JavaScript Techdegree Student 4,004 Points

JSON, I am a little stuck any hint or suggestion is very much appreciated thank you.

TASK:

1.Display the top five earner's names and salaries.The Html element containing the top earners should have and id of "topSalaries"

  1. Display any employees who make a minimum of 200k per year, The Html element containing the top earners should have and id of "topEmployees" You should display the name of the employee, and the total earned

3.// TODO: add code to display the html variable inside a ul element with id="data"

4.// Hint: you can use the container parameter's innerHTML property to insert Html tags

HTML CODE: <div id="container"> <!-- populated by JS--> </div> <script src="./data.js"></script> <script src="./walkboston.js"></script>

JS CODE:

function renderPosts(boston, container) { var people = boston.data; const len = boston.data.length; var html = ""; for (let i = 0; i < len; i++) { html += '<li class="post">' + "<h2>" + people[i][8] + "</h2>" + "<h3>" + people[i][11] + "</h3>"; } container.innerHTML = '<ul id = "data">' + html + "</ul>"; }

function renderTopSalaries(boston, container) { // Step 1 solution var people = boston.data; var topSalaries = people.sort((a, b) => b[11] - a[11]).slice(0, 5); const len = topSalaries.length; var html = ""; for (let i = 0; i < len; i++) { html += '<li class="top">' + "<h2>" + topSalaries[i][8] + "</h2>" + "<h3>" + topSalaries[i][11] + "</h3>"; }

container.innerHTML = '<ul id = "topSalaries">' + html + "</ul>"; }

function renderTopEmployees(boston, container) { //step 2 solution var people = boston.data; var topEmployees = people.filter((a) => a[11] > 200000); const len = topEmployees.length; var html = ""; for (let i = 0; i < len; i++) { html += '<li class="top">' + "<h2>" + topEmployees[i][8] + "</h2>" + "<h3>" + topEmployees[i][11] + "</h3>"; }

container.innerHTML = '<ul id = "topEmployees">' + html + "</ul>"; }

renderTopSalaries(boston, document.getElementById("container")); //step 1 solution renderTopEmployees(boston, document.getElementById("container")); //step 2 solution