Structuring a Nested Loop for Table Creation

Question

I've got the looping thing for table rows down pretty much, but when I want to create header <th> rows, I am at a loss.

For instance, I can traverse down to grab the "Auto Brand" and make a table containing the brand name and specifics in ONE normal table row from the first member, but getting the nested loop to keep going for all "sibling" arrays is driving me bonkers. I can't go the simple route and just use the array name as it isn't "human friendly"

Imagine the following:

a-r: [{
    country: "Italy",
    id: "194",
    type: "sports",
    style: {
        doors: "2",
        layout: "rwd"
    },
    model: {
        name: "Alfa Romeo",
        marque: "Spider",
        slug: "alfa-romeo-spider",
        id: "59"
    },
    url: "http://www.alfaromeo.it"
}, {
    country: "Italy",
    id: "195",
    type: "sports",
    style: {
        doors: "2",
        layout: "rwd"
    },
    model: {
        name: "Alfa Romeo",
        marque: "Graduate",
        slug: "alfa-romeo-graduate",
        id: "60"
    },
    url: "http://www.alfaromeo.it"
}],
packard: [{
    country: "USA",
    id: "200",
    type: "sedan",
    style: {
        doors: "4",
        layout: "rwd"
    },
    model: {
        name: "Packard",
        marque: "Phantom",
        slug: "packard-phantom",
        id: "80"
    },
    url: "http://www.packard.com"
}, {
    country: "USA",
    id: "220",
    type: "coupe",
    style: {
        doors: "2",
        layout: "rwd"
    },
    model: {
        name: "Packard",
        marque: "626",
        slug: "packard-626",
        id: "305"
    },
    url: "http://www.packard.it"
}],[...]

So, I need to basically traverse down to the first "model.name" instance, grab that value and slam it into the table header or caption... whatever.

Then I need to run another loop to just grab the country[value], type[value], model.marque[value] and put those into rows for every member of the array and close the table... ad nauseam.

My end result would look like:

<table>
 <thead>
  <tr>
    <th colspan=3>Obj.model.name</th>
  </tr>
 </thead>
 <tbody>
   <tr>
    <td>Obj.model.marque</td><td>Obj.country</td><td>Obj.type</td>
   </tr>
   <tr>
    <td>{...}</td><td>{...}</td><td>{...}</td>
   </tr>
   <tr>
    <td>{...}</td><td>{...}</td><td>{...}</td>
   </tr>
 </tbody>
</table>

I am trying to somehow, in the loop, grab that initial model.name[value], hold it, then loop over all the siblings and put the rows together.... i just figure if I do this, I am declaring (and constructing) the header/caption for every row which is obviously not desired.

I thank you Traversal Masters and Mistresses for any insight you can provide. I am getting old, and my brain has been melted from the heatwave as of late.

Alnitak · Accepted Answer · 2012-07-21 20:34:11Z

1

You mostly just need to remember the current name outside of the loop, and create a new table (with a new header) each time it changes:

var name = null;
var table = null;

$.each(a, function(k, v) {
    $(v).each(function() {

        if (this.model.name !== name) {
            name = this.model.name;
            table = $('<table>').appendTo(document.body);
            var thead = $('<thead>').appendTo(table);
            $('<th>', {
                colspan: 3,
                text: name
            }).appendTo(thead);
        }

        $('<tr>').appendTo(table).append(
            $('<td>', { text: this.model.marque }),
            $('<td>', { text: this.country }),
            $('<td>', { text: this.type })
        );
    });
});

demo at http://jsfiddle.net/alnitak/2jvSS/

answered Jul 21, 2012 at 20:34

Alnitak

341k72 gold badges420 silver badges503 bronze badges

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

1 Comment

rob - not a robber Over a year ago

By the grace of CROM, you are a MIGHTY one. Thank you!!

Robert Wilson · Accepted Answer · 2012-07-21 20:36:46Z

0

I have this setup in JSFIDDLE. Also below is the loop code. Please let me know if this helps. Thanks I have updated the answer and the fiddle please check and confirm.

$(function() { 
$.each( a, function(k, v) {

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

       $(v).each(function() {

       var theadRow = document.createElement('tr');
       var tbodyRow = document.createElement('tr');

       var nametd = document.createElement('th');  

       var name = $(theadRow).html($(nametd).attr('colspan', 3).html(this.model.name));
       $(thead).html(name); 

       var marquetd = document.createElement('td');  
       $( marquetd).html(this.model.marque).appendTo(tbodyRow);

       var countrytd = document.createElement('td');
       $(countrytd).html( this.country ).appendTo(tbodyRow);

       var typetd = document.createElement('td');
       $(typetd).html( this.type ).appendTo(tbodyRow);

       $(tbody).append(tbodyRow);

       $(table).append($(tbody).append(tbodyRow));

   });
    $(table).append(thead)
    $('.output').append(table)
});

});

edited Jul 21, 2012 at 20:36

answered Jul 21, 2012 at 18:38

Robert Wilson

6691 gold badge14 silver badges30 bronze badges

1 Comment

rob - not a robber Over a year ago

I appreciate the effort, ciriusrob, but this isn't exactly what I am looking for. Please see this fiddle to se how the data should be formatted jsfiddle.net/CCRD3

Collectives™ on Stack Overflow

Structuring a Nested Loop for Table Creation

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related