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: stackoverflow.com/questions/921789/… — Arjun Komath
– Arjun Komath, Commented Nov 12, 2015 at 5:55
I've tried building a holder and adding <td> + key + </td> for each iteration. I think I'm somewhat close but I am getting no output. — ScottVMeyers
– ScottVMeyers, Commented Nov 12, 2015 at 6:16
I see that Arjun. Thanks. I just don't know how to make a table with it. — ScottVMeyers
– ScottVMeyers, Commented Nov 12, 2015 at 6:21

xyhhx · Accepted Answer · 2015-11-12 06:26:10Z

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, 2015 at 6:26

answered Nov 12, 2015 at 6:09

xyhhx

6,6946 gold badges45 silver badges67 bronze badges

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

6 Comments

ScottVMeyers Over a year ago

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!

xyhhx Over a year ago

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 Over a year ago

If this worked for you, @ScottVMeyers, feel free to mark it as the solution :)

ScottVMeyers Over a year ago

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?

xyhhx Over a year ago

Because myCarObject doesn't exist. You're gonna want to use one of the ones you defined in your original post, like Accord

|

Collectives™ on Stack Overflow

How to loop through Javascript Objects, display them in tables

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related