Attempting to display a sorted array of objects to HTML with Javascript

Question

I am working on a class assignment where I need to make write a Loop. I made an array of objects for houses. I created a For Loop to sort the array by the price of the houses. The array displays in the console of the webpage but not in the actual webpage. Below are the extracts of what the console shows, what the webpage shows, and my code.

console log

1. (4) [{...}, {...}, {...}, {...}]

   1. 0: {id: 'house4', stories: 1, squareFoot: 1130, color: 'white', year: 1961, ...}

   2. 1: {id: 'house1', stories: 1, squareFoot: 1285, color: 'beige', year: 2018, ...}

   3. 2: {id: 'house2', stories: 1, squareFoot: 1560, color: 'brown', year: 1983, ...}

   4. 3: {id: 'house3', stories: 2, squareFoot: 2975, color: 'tan', year: 2008, ...}

   5. length: 4

   6. [[Prototype]]: Array(0)

webpage

[object Object],[object Object],[object Object],[object Object]

I have watched several videos about sorting arrays, but they all only display to the console log. I tried to modify my code to be similar to the example used in my lecture video as well, but still no output.

let houses = [
 {id:"house1", stories:1, squareFoot:1285, color:"beige", year:2018, bedrooms:3, bathrooms:2, price:285000},
 {id:"house2", stories:1, squareFoot:1560, color:"brown", year:1983, bedrooms:3, bathrooms:3, price:345000}, 
 {id:"house3", stories:2, squareFoot:2975, color:"tan", year:2008, bedrooms:4, bathrooms:3, price:415000}, 
 {id:"house4", stories:1, squareFoot:1130, color:"white", year:1961, bedrooms:2, bathrooms:2, price:215000}];
for (i=0; i<1; i++) {
 houses.sort((a, b) => a.price - b.price);
 document.getElementById("houses").innerHTML=houses;
}
console.log(houses);

<p id="houses"></p>

• James: Some examples of building html output from an array of objects here
• mplungjan: If your assignment is to use FOR to SORT, then have a look here stackoverflow.com/questions/7870961/…
• tevemadar: This question is similar to: HTML page shows [object Object] after I pressed the button instead to show the results. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.
• tevemadar: (and then also see the duplicate chain of the linked question)

Answer 1

Several things worth noting.

The for loop

Notice that your two statements inside the for loop do not depend on the index i:

houses.sort((a, b) => a.price - b.price);
document.getElementById("houses").innerHTML=houses;

That means that you’re just repeating the same operation each time you loop. So no need for the loop! The sort method sorts the array in one line.

However, if your assignment was to use a for loop, I’m guessing that you cannot use the built-in sort method, and that the point is for you to write your own sorting function.

That is up to you; just note that, as it is, the following for:

for (i=0; i<1; i++)

only loops once. From here on know that you will have to replace the line

houses.sort((a, b) => a.price - b.price);

with your own sorting function.

The HTML output

You have already seen that setting the text of your HTML paragraph as houses doesn’t display the contents of the array. That is because it is - surprise - an array¹. HTML deals with text, so to achieve your goal, you first need to convert houses into text.

There are several ways to do this, but best practice would probably be to use the JSON.stringify method, that outputs the representation of an object as a string. You can see its effect in the following snippet:

let houses = [{id:"house1", stories:1, squareFoot:1285, color:"beige", year:2018, bedrooms:3, bathrooms:2, price:285000},
 {id:"house2", stories:1, squareFoot:1560, color:"brown", year:1983, bedrooms:3, bathrooms:3, price:345000}, 
 {id:"house3", stories:2, squareFoot:2975, color:"tan", year:2008, bedrooms:4, bathrooms:3, price:415000}, 
 {id:"house4", stories:1, squareFoot:1130, color:"white", year:1961, bedrooms:2, bathrooms:2, price:215000}];
houses.sort((a, b) => a.price - b.price);
document.getElementById("houses").innerHTML = JSON.stringify(houses);

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 </head>
 <body>
 <p id ="houses"></p>
 </body>
</html>

Addendum

In this case, it is probably better to write:

document.getElementById("houses").textContent = JSON.stringify(houses);

; rather than:

document.getElementById("houses").innerHTML = JSON.stringify(houses);

References

JSON.stringify()

---

¹Any other object would behave in the same way.

Answer 2

innerHTML converts the object to a string. The string representation of an object is [object Object] - as you noticed already. You can use JSON.stringify to display the contents of every object, or extract the values from it (looping through Object.keys/Object.values). Here is a snippet doing that.

Edit Bonus: converted to generic function. Added a function to create a table from the houses Array.

const houses = retrieveSortedHousesArray();
// 1. As plain csv-alike text within p#houses
printAsCSV(document.querySelector(`#houses`), houses);
// 2. As table
createTableFromArrayOfObjects(houses);
// print CSV-alike within [container]
function printAsCSV(container, objects) {
 const labels = Object.keys(objects[0]);
 // create a header
 labels.forEach((key, i) =>
 container.append(`${key}${i < labels.length-1 ? `;` : ``}`));
 // add separator 
 container.append(document.createElement(`br`), `-`.repeat(57));
 // add the values
 objects.forEach((elem, i) => {
 const values = Object.values(elem);
 container.append(document.createElement(`br`));
 values.forEach((value, i) =>
 container.append(`${value}${i < values.length - 1 ? `;` : ``}`));
 });
 
 // 'caption'
 container.prepend( Object.assign(
 document.createElement(`div`), {
 innerHTML: `CSV-alike created with<br> 
 <code>printAsCSV(document.querySelector("#houses"), houses)</code>`,
 className: `caption`
 } ) );
}
// create a table from an array of Objects
function createTableFromArrayOfObjects(objects) {
 const table = document.createElement(`table`);
 const header = document.createElement(`tr`);
 const labels = Object.keys(objects[0]);
 // create a header row
 labels.forEach(key =>
 header.insertAdjacentHTML(`beforeEnd`, `<th>${key}</th>`));
 table.append(header);
 // convert values to rows
 objects.forEach((elem, i) => {
 const row = document.createElement(`tr`)
 const values = Object.values(elem);
 values.forEach(value =>
 row.insertAdjacentHTML(`beforeend`, `<td>${value}</td>`));
 table.append(row);
 });
 
 // caption
 table.prepend( Object.assign(
 document.createElement(`caption`), {
 innerHTML: `Table created with 
 <code>createTableFromArrayOfObjects(houses)</code>`
 } ) );
 
 document.body.append(table);
}
function retrieveSortedHousesArray() {
 return [{
 id: "house1",
 stories: 1,
 squareFoot: 1285,
 color: "beige",
 year: 2018,
 bedrooms: 3,
 bathrooms: 2,
 price: 285000
 },
 {
 id: "house2",
 stories: 1,
 squareFoot: 1560,
 color: "brown",
 year: 1983,
 bedrooms: 3,
 bathrooms: 3,
 price: 345000
 },
 {
 id: "house3",
 stories: 2,
 squareFoot: 2975,
 color: "tan",
 year: 2008,
 bedrooms: 4,
 bathrooms: 3,
 price: 415000
 },
 {
 id: "house4",
 stories: 1,
 squareFoot: 1130,
 color: "white",
 year: 1961,
 bedrooms: 2,
 bathrooms: 2,
 price: 215000
 }
 ].sort((a, b) => a.price - b.price);
}

body {
 font-family: monospace;
}
div.caption {
 text-align: center;
 width: 400px;
 border: solid #999 1px;
 padding: 0 4px 4px;
 margin-bottom: 0.3rem;
 font-weight: bold;
 line-height: 1.1rem;
}
div.caption code,
table code {
 background-color: hsl(210, 8%, 90%);
 color: hsl(210, 8%, 5%);
 padding: 2px 4px;
 border-radius: 4px;
}
table {
 border: 1px solid #999;
 th {
 color: white;
 text-align: left;
 background-color: black;
 padding: 0 4px;
 }
 td {
 padding: 0 4px;
 }
 td:nth-child(2),
 td:nth-child(3),
 td:nth-child(6),
 td:nth-child(7),
 th:nth-child(1),
 th:nth-child(8) {
 text-align: center;
 }
 tr:nth-child(even) {
 background-color: #eee;
 }
 caption {
 margin-bottom: 4px;
 font-weight: bold;
 border: solid #999 1px;
 padding: 4px;
 }
}

<p id="houses"></p>

• Eric Malloy: Thank you Kooilnc. This was very helpful!