2

Hey so I did search and there were possibly (??) some answers to this but they are all over my head. Basically I'm playing around with a theoretical table based on this Dynamically generated table - using an array to fill in TD values ; But I wanted to use objects rather than just arrays:

function addTable() {
var myTableDiv = document.getElementById("samtable");
var table = document.createElement('TABLE');
var tableBody = document.createElement('TBODY');

table.border = '1';
table.appendChild(tableBody);

var user =  new Array();

user[0] = { Name: "Sam", Address: "good times lane", Phone: "023423423432" }
user[1] = { Name: "Harold", Address: "imaginary ave", Phone: "023447568788" }
user[2] = { Name: "Ronnie", Address: "the pentagon", Phone: "076457574574" }
user[3] = { Name: "Pablo", Address: "antarctica", Phone: "045757432" }
user[4] = { Name: "Shaka", Address: "walmart", Phone: "02345774572" }
user[5] = { Name: "Xianwei", Address: "easy st", Phone: "0242443243432" }

var property = new Array();
property[0] = "Name";
property[1] = "Address";
property[2] = "Phone";

var tr = document.createElement('TR');
tableBody.appendChild(tr);
for (i = 0; i < user.length; i++) {
    var th = document.createElement('TH')
    th.width = '75';
    th.appendChild(document.createTextNode(user[i].Name));
    tr.appendChild(th);
}

 for (i = 1; i < property.length; i++) {
    var tr = document.createElement('TR');
    for (j = 0; j < user.length; j++) {
        var td = document.createElement('TD')
        td.appendChild(document.createTextNode(user[j].property[i]));
        tr.appendChild(td);
    }
    tableBody.appendChild(tr);
 }

 myTableDiv.appendChild(table);
}  

I can generate a table if for example I call one key explicitly such as:

td.appendChild(document.createTextNode(user[j].Address));

but this just makes every row the address. I'm trying to have it more dynamic so the next row is the phone. But if I try:

td.appendChild(document.createTextNode(user[j].property[i]));

I get the error message: "table.js:43 Uncaught TypeError: Cannot read property '1' of undefined"

even though property[i] returns a string which is identical to the explicit property I type. Could someone please point out where I might be going wrong?

Thanks heaps in advance. I'm having trouble pasting the html as well so its basically running the addTable function in a div with id "samtable". js is loaded before head as table.js. Thanks again

1 Answer 1

2

Here you for loop seems a bit wrong, here when you get a key of object it returns it as string so to get property of the object you need to use square brackets, i.e. object['key'] or object[keyVariable]

 for (i = 1; i < property.length; i++) {
    var tr = document.createElement('TR');
    for (j = 0; j < user.length; j++) {
        var td = document.createElement('TD')
        td.appendChild(document.createTextNode(user[j][property[i]]); // This change will do it for you
        tr.appendChild(td);
    }
    tableBody.appendChild(tr);
 }
Sign up to request clarification or add additional context in comments.

4 Comments

oh wow that was quick, and yes it worked. OK great that clarifies it perfectly, I thought it was something more complicated but it was simply a syntax error. Thanks so much for your help!
My next stage in learning will be to see if I can now connect these objects to a mySQL database and populate the table dynamically. I foresee many a google search in my future :)
yahh, 1 step at a time
it's not letting me accept the answer just yet possibly because I just signed up. I'll check back in a day or so and hopefully it will let me. Thanks again!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.