CODEWITHSUNDEEP
javascriptarraysmultidimensional-arrayjavascript-objects
Sam Matthews
Sam Matthews

Reputation: 677

arrays as keys for objects in javascript

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

Upvotes: 2

Views: 70

Answers (1)

Parag Bhayani
Parag Bhayani

Reputation: 3330

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);
 }

Upvotes: 2

Related Questions