Functions in Arrays

Question

I’m having some trouble with getting the value of an object in my array when the value is determined by a function instead of hard coded. In this example, I want to either iterate through the array to console.log the value of my “stats” object and not return the function I have there OR add to the existing function on each object in my array to console.log the value and again, not the function itself.

Here, my function returns the value in a text box as the value of the object “stats” in my array. Every time I try it either returns the function itself as the value or returns a “null” or only returns the value of the first object in my array.

Can someone please tell me what I am missing?

Thanks.

Here is my (full HTML) sample code with the "options" I have tried.

let users = [{
    name: "bob",
    stats: function() {
      return document.getElementById('option1').value;
    },
    code: "A1"
  },
  {
    name: "john",
    stats: function() {
      return document.getElementById('option2').value;
    },
    code: "A2"
  },
  {
    name: "karen",
    stats: function() {
      return document.getElementById('option3').value;
    },
    code: "A1"
  }
]

/* Option 1 */
console.log('firstRun');
users.forEach((user) => console.log(user.stats));

/* Option 2 */
console.log('secondRun');
for (let user of users) {
  console.log(user.stats)
}

/* Option 3 */
console.log('thirdRun');
var myArray = users.length;
for (i = 0; i < myArray; i++) {
  console.log(myArray.stats)
}

<h2>Simple Object/Array Step Through</h2>

<input type="text" id="option1" value="box1">
<input type="text" id="option2" value="box2">
<input type="text" id="option3" value="box3">

Answer 1

Try this,

Call the function and fix your Option 3 loop myArray is actually users.length redefined.

let users = [{
    name: "bob",
    stats: () => document.getElementById('option1').value,
    code: "A1"
  },
  {
    name: "john",
    stats: () => document.getElementById('option2').value,
    code: "A2"
  },
  {
    name: "karen",
    stats: () => document.getElementById('option3').value,
    code: "A1"
  },
  {
    name: "steve",
    stats: () => document.getElementById('option4').value,
    code: "A5"
  }
]

/* Option 1 */
console.log('firstRun');
users.forEach(user => console.log(user.stats()));

/* Option 2 */
console.log('secondRun');
for (let user of users) {
  console.log(user.stats())
}

/* Option 3 */
console.log('thirdRun');
for (let i in users) {
  console.log(users[i].stats())
}

/* Option 4 */
console.log('forthRun');
for (let i = 0; i < users.length; i++) {
  console.log(users[i].stats())
}

<h2>Simple Object/Array Step Through</h2>

<input type="text" id="option1" value="box1">
<input type="text" id="option2" value="box2">
<input type="text" id="option3" value="box3">
<input type="text" id="option4" value="box4">

Seems abit odd to try multiple ways to loop over an array, so I added for..in for continuity