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, Mar 14 '16 at 06: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, Mar 14 '16 at 06:33

score 1 · Accepted Answer · answered Mar 14 '16 at 06:07

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 '16 at 06:07

gurvinder372

66,980
10
72
94

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? – Space Ostrich Mar 14 '16 at 06:10
1

@SpaceOstrich `object[property]` look for a property name which is stored in `property` variable, while `object.property` look for a property name `property` – gurvinder372 Mar 14 '16 at 06:12
1

@SpaceOstrich—see [*JavaScript property access: dot notation vs. brackets?*](http://stackoverflow.com/questions/4968406/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. – RobG Mar 14 '16 at 06:15
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 Mar 14 '16 at 06:15
Thanks Rob, that helps a lot with my understanding of when and when not to use [] instead of . notation. – Space Ostrich Mar 14 '16 at 06:35

For in getting object property identifier instead of property value?

1 Answers1