For in getting object property identifier instead of property value?

Question

I'm trying to display the values of an array of student objects in a table. Using the following code to create and assign text to the cells of the table:

var tableBody = document.createElement('tableBody');
                table.appendChild(tableBody);
                body.appendChild(table);
                students.forEach(function(student) {
                    var row = document.createElement('tr');
                    for(var property in student) {
                        var cell = document.createElement('td');
                        cell.textContent = property.toString();
                        row.appendChild(cell);
                    };
                    tableBody.appendChild(row);
                });

When I run the program I get a table like I want, but instead of a list of students and scores I get a table with the property identifier. The correct number of columns and rows all displaying the word name and score.

I tried adding different variations of:

property.value.toString();

but they've all resulted in an "is undefined" error. I can't find anything on the subject online, with the closest thing I've found using a forEach loop to get the properties, which isn't even possible. Is there some form of syntax I'm not aware of that I need to add in order to read the actual value of each property? Or will I need to use a different kind of loop completely?

I'd thought that perhaps it wasn't actually iterating through my students array at all, and was instead just using the object prototype, but if that were the case the number of entries in the table wouldn't coincide with the number of students in the students array. There would always be only one student. So unless something really counterintuitive is going on that couldn't be the case. — Space Ostrich
– Space Ostrich, Commented Mar 14, 2016 at 6:06
does it matter what you call it? I used tableBody so that if I were to have several tables I'd call it namesTableBody or idTableBody — Space Ostrich
– Space Ostrich, Commented Mar 14, 2016 at 6:33

gurvinder372 · Accepted Answer · 2016-03-14 06:07:00Z

1

You need to show the property value and not just the property right.

replace

cell.textContent = property.toString();

with

cell.textContent = student[property].toString();

or simply

cell.textContent = student[property];

answered Mar 14, 2016 at 6:07

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Space Ostrich Over a year ago

That worked. I'd previously tried student.property.toString() and I'd gotten the undefined error. What is the difference between object.property and object[property], that causes this discrepancy?

gurvinder372 Over a year ago

@SpaceOstrich object[property] look for a property name which is stored in property variable, while object.property look for a property name property

RobG Over a year ago

@SpaceOstrich—see JavaScript property access: dot notation vs. brackets?. The fundamental difference is that with dot notation, the identifier is treated literally, but with bracket notation it's treated as an expression.

Space Ostrich Over a year ago

Of course, darn, that was a stupid question. The two are the same except obect[property] uses an index while object.name calls the name property. Well, sort of, I think [property] can actually also call the name property by using quotation marks. object["name"]

Space Ostrich Over a year ago

Thanks Rob, that helps a lot with my understanding of when and when not to use [] instead of . notation.

Collectives™ on Stack Overflow

For in getting object property identifier instead of property value?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related