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
-
(4) [{…}, {…}, {…}, {…}]
-
0: {id: ‘house4’, stories: 1, squareFoot: 1130, color: ‘white’, year: 1961, …}
-
1: {id: ‘house1’, stories: 1, squareFoot: 1285, color: ‘beige’, year: 2018, …}
-
2: {id: ‘house2’, stories: 1, squareFoot: 1560, color: ‘brown’, year: 1983, …}
-
3: {id: ‘house3’, stories: 2, squareFoot: 2975, color: ‘tan’, year: 2008, …}
-
length: 4
- [[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>
2
Answers
Several things worth noting.
The for loop
Notice that your two statements inside the
for
loop do not depend on the indexi
: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-insort
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
:only loops once. From here on know that you will have to replace the line
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 array1. HTML deals with text, so to achieve your goal, you first need to converthouses
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:Addendum
In this case, it is probably better to write:
; rather than:
References
JSON.stringify()
1Any other object would behave in the same way.
innerHTML
converts the object to a string. The string representation of an object is[object Object]
– as you noticed already. You can useJSON.stringify
to display the contents of every object, or extract the values from it (looping throughObject.keys
/Object.values
). Here is a snippet doing that.