How to loop through Javascript Objects, display them in tables

Question

My third day of class and we're supposed to make a car sight to use objects. I have four objects. I want to make a table for each one with their keys on the left and their values on the right. Four tables side by side. I would prefer to loop through the keys to make the and loop through the keys for the I've been playing around and failing miserably. Any help would be greatly appreciated. I've got four divs side by side that I want to fill with tables. Here are my objects:

Here are my objects and values:

let Accord = new Car("Accord", 22500, "Crystal White", "alloy", "bose", "leather", "tinted");
let CRV= new Car("CR-V", 28400, "Midnight Black", "alloy", "stock", "cloth", "no tint");
let Pilot = new Car("Pilot", 36796, "Modern Gray Metallic", "alloy", "bose", "leather", "tinted");
let Fit = new Car("Fit", 17499, "Raspberry Blue", "steel", "stock", "cloth", "no tint");

//Here is the entire object:

class Car extends Vehicle {
    wheels: string;
    stereo: string;
    seatsMaterial: string;
    tint: string;
    constructor(model, price, color, wheels, stereo, seatsMaterial, tint) {
        super(model, price, color);
        this.wheels = wheels;
        this.stereo = stereo;
        this.seatsMaterial = seatsMaterial;
        this.tint = tint;
    }
}

Did you try this answer: http://stackoverflow.com/questions/921789/how-to-loop-through-javascript-object-literal-with-objects-as-members — Arjun Komath, Nov 12 '15 at 05:55
I've tried building a holder and adding + key + for each iteration. I think I'm somewhat close but I am getting no output. — ScottVMeyers, Nov 12 '15 at 06:16
I see that Arjun. Thanks. I just don't know how to make a table with it. — ScottVMeyers, Nov 12 '15 at 06:21

xyhhx · Accepted Answer · 2015-11-12T06:26:10.420

5

Basically, you want to iterate over the items in the array and draw out a new row for each item.

It can easily be done like so:

function makeTable ( object ) {
    // Check type
    if ( typeof object !== 'object' ) return false;

    // Start our HTML
    var html = "<table><tbody>";
    // Loop through members of the object
    for ( var key in object ) {
        // https://jslinterrors.com/the-body-of-a-for-in-should-be-wrapped-in-an-if-statement
        if ( !object.hasOwnProperty(key) ) continue;
        // Add our row:
        html += "<tr><th>" + key + "</th><td>" + object[key] + "</td></tr>";
    }
    // Finish the table:
    html += "</tbody></table>";
    // Return the table
    return html;
}

You can then run it like this:

document.body.innerHTML = makeTable(myCarObject);
document.getElementById('some-id').innerHTML = makeTable(myCarObject);

Some notes about the above code

Checking the type - You want to make sure that the argument passed is actually an object, lest it might behave unexpectedly.
The .hasOwnProperty call - As explained here, sometimes objects can have unexpected properties when you loop through them. This is due to their prototype and whatever properties they inherit from it. A good way to make sure that the code behaves as expected is to continue the loop when the object does'nt have this property

edited Nov 12 '15 at 06:26

answered Nov 12 '15 at 06:09

xyhhx

6,384
6
41
64

That looks awesome, thanks Martin! Two questions. What does !object.hasOwnProperty(key) do? And where do I put this in my code? Underneath my objects? Sorry, this is only my third day doing this. Thanks! – ScottVMeyers Nov 12 '15 at 06:20
I add a link to a description in the code comment but I can update the question for you to explain it "in a nutshell" if you want – xyhhx Nov 12 '15 at 06:20
If this worked for you, @ScottVMeyers, feel free to mark it as the solution :) – xyhhx Nov 12 '15 at 06:21
That's amazing! This was awesome Martin! Last thing, and sorry I can't figure this out. it doesn't like your use of myCarObject. Should I just change it to object to match the parameter to the function? One more question. How do I make four? – ScottVMeyers Nov 12 '15 at 06:39
Because `myCarObject` doesn't exist. You're gonna want to use one of the ones you defined in your original post, like `Accord` – xyhhx Nov 12 '15 at 06:40
Ohhh, I think I see the light!! – ScottVMeyers Nov 12 '15 at 06:42

How to loop through Javascript Objects, display them in tables

1 Answers1