JavaScript JavaScript Loops, Arrays and Objects Tracking Data Using Objects The Build an Object Challenge, Part 2

Joseph Tavinor
Joseph Tavinor
7,535 Points

Feedback on solution please

//Array of student objects

let students = [

  {
    name: "Manuel",
    track: "Python",
    acheivements: 30,
    points: 1560,
  },

  {
    name: "Jose",
    track: "Javascript",
    acheivements: 23,
    points: 450,
  },

  {
    name: "Sarah",
    track: "HTML",
    acheivements: 53,
    points: 1890,
  },

  {
    name: "Tess",
    track: "C+",
    acheivements: 2,
    points: 67,
  },

  {
    name: "Coolio",
    track: "PHP",
    acheivements: 56,
    points: 2013,
  },

];

//Sets output as empty string and selects <div> with id="output"
let output = ''
let html = document.querySelector("#output");


//Iterates through each student object in the students array
for ( let student in students ) {

//  Iterates through each key-value pair in the current student object
  for ( let key in students[student] ) {

//      Puts current value in a variable for readability and capitalises first letter of the key
      let value = students[student][key];
      let keyCapitalized = key.charAt(0).toUpperCase() + key.slice(1);

//      Puts each name key-value pair as a <h2> and all other pairs as <p> and adds to output string 
      if ( key === 'name' ) {
          output += `<h2><strong>${keyCapitalized}: ${value}</strong></h2>`;
      } else {
        output += `<p>${keyCapitalized}: ${value}</p>`;
      }
  }

//  Line break after each student object
  output += '<br>'

}


// Writes the output string into the HTML
html.innerHTML = output;

2 Answers

Steven Parker
Steven Parker
202,065 Points

Iterating through the properties can be a useful technique But you should be aware of some behavioral differences from the original code that will occur:

  • if a property is missing, it will be silently omitted where the original will show the property as "undefined"
  • if any extra properties are added, they will be listed where the original would show only the intended ones
  • the order that the properties are listed is no longer guaranteed
Joseph Tavinor
Joseph Tavinor
7,535 Points

Thanks for the feedback, do I understand correctly?:

  • So basically if you want the ability to alter things in the students array and have these changes reflected in the HTML this is the way to go.
  • But if you want the output to always reflect the initial array regardless of subsequent changes I should use another method?

Also can you explain why the order is not guaranteed? I thought a for .. in loop always iterated from first to last

Steven Parker
Steven Parker
202,065 Points

What I meant was that the original method could output the properties in a specific order each time regardless of what the class structure was like.