2

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?

Improve this question
0

4 Answers 4

Reset to default
3

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);
}
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This requires jQuery but the question does not have the jQuery tag.
@Peter Olson - I address that in the post. The example is meant to show the looping used, not exactly how to build the elements.
jQuery wasn't requested or indicated in any way.
@AndrewPeacock innerText is non-standard and unsupported by Firefox. See my answer if you need that browser.
3

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
}
Improve this answer

1 Comment

+1 for using plain javascript (since jQuery wasn't requested or indicated) and for including the use of hasOwnProperty().
1

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

Improve this answer

1 Comment

Thank you very much. I am just using this as a simple study guide though, mainly for myself, so cross-browser compatibility isn't a concern. This will be helpful if I ever need to use this in the future though, thank you.
0

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/

Improve this answer

3 Comments

I tried using jQuery, but I wasn't sure how to go around doing it.
@AndrewPeacock, yeah, it might seem like you're getting a whole toolbox when you just want to drive a simple nail, but if you'll take a little time with it, you'll soon be able to not only find the hammer, but also enjoy doing things faster with the whole set of tools.
I know a decent amount of it, but for more complex problems like this I am lost.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.