CODEWITHSUNDEEP
javascriptjqueryarrays
ayyp
ayyp

Reputation: 6598

Printing values from a JavaScript array

I have an array that looks like this (the full list is here):

var verbMap = [
    {
        infinitive: "gehen",
        thirdPres: "geht",
        thirdPast: "ging",
        aux: "ist",
        pastPart: "gegangen",
        english: "go"
    },
    {
        infinitive: "gelingen",
        thirdPres: "gelingt",
        thirdPast: "gelang",
        aux: "ist",
        pastPart: "gelungen",
        english: "succeed"
    }
];

I am trying to run through each part and print it into a table. I can access one of the values if I target it specifically, but I need to be able to print all of the values into <td>s. Each part of the array would be a <tr> with the values inside as the <td> tags.

What would be the best way to do this, and is there a better way to set the data up and interact with it?

Upvotes: 2

Views: 304

Answers (4)

Justin Niessner
Justin Niessner

Reputation: 245399

It shouldn't be too hard to create the table using nested for loops (the example uses jQuery to build the elements...but you obviously don't have to):

Edit

Removed the jQuery since it seemed to bother everybody (even though the control structures were the important part of the example):

var table = document.createElement('table');

for(v in verbMap){
    var tr = document.createElement('tr');
    for(p in verbMap[v]){
         var td = document.createElement('td');
         var text = document.createTextNode(verbMap[v][p]);
         td.appendChild(text);
         tr.appendChild(td);
    }

    table.appendChild(tr);
}

Upvotes: 3

Dennis
Dennis

Reputation: 32598

Firefox doesn't support innerText so it's better to create a text node and add that to the child. It may also be better to define an array to guarantee an order of the columns and easily change it if necessary.

var table = document.getElementById("tbl"), i, j, tr, td, text;

var order = ["infinitive", "thirdPres", "thirdPast", "aux", "pastPart", "english"]

for(i=0; i<verbMap.length; i++){
    tr = document.createElement('tr');
    for(j = 0; j<order.length; j++){
         td = document.createElement('td');
         text = document.createTextNode(verbMap[i][order[j]]);
         td.appendChild(text);
         tr.appendChild(td);
    }
    table.appendChild(tr);
}

JSFiddle

Upvotes: 1

JaredPar
JaredPar

Reputation: 754565

Try the following 

for (var i = 0; i < verbMath.length; i++) {
  var row = document.createElement('tr'); 
  var item = verbMath[i];
  for (var prop in item) {
    if (item.hasOwnProperty(prop)) {
      var data = document.createElement('td');
      data.innerText = item[prop];
      row.appendChild(data);
    }
  }

  // Need to append the row here to the appropriate place in your DOM
}

Upvotes: 3

Jonathan M
Jonathan M

Reputation: 17441

There are some very good tools for creating tables from such data structures. Consider using jQuery and the Datatables plug in.

Here are some links:

jQuery: http://jquery.com/

Datatables: http://datatables.net/

Upvotes: 0

Related Questions