JQuery Array with multiple arrays mapping

Question

Goodday,

I am stuck at the following crossroad. I have multiple array's nested inside one master array:

var masterArray = [['Phone','Town'],['0612345678','New York']];

Now i need to build a table and map 'Phone' with '0612345678' and 'Town' with 'New York'. So it should look like this:

<table>
<tr><td>Phone</td><td>0612345678</td></tr>
<tr><td>Town</td><td>New York</td></tr>
</table>

With $.each i can't seem tot map the right pairs. How can I build a table with jquery from that masterArray object.

I hope someone can help me out with this problem.

Greetings,

Robert

Is that the full length of array? If not show repeating structure — charlietfl
– charlietfl, Commented Oct 7, 2015 at 14:32
But masterArray has always 2 elements and each element is always an array with 2 strings? If not, which is the general structure of masterArray? — Andrea
– Andrea, Commented Oct 7, 2015 at 14:36

fuyushimoya · Accepted Answer · 2015-10-07 14:58:14Z

var masterArray = [['Phone','Town'],['0612345678','New York']];

function buildTable(data, selector) {
  var $parent = $(document.body);
  // If given a selector, append to that.
  if (selector != null && $(selector).length > 0) {
      $parent = $(selector);
  }

  // Create table.
  var $table = $('<table>');
  
  // Treat items in masterArray as column
  $.each(masterArray, function(column, subArray) {

    // Treat items in subArray as row.
    $.each(subArray, function(row, data) {

      // Keep create row until the nth row can be found.
      while ($table.find('tr').eq(row).length === 0) {
        $table.append('<tr>');
      }

      // Append td with data to target row.
      $('<td>').text(data).appendTo($table.find('tr').eq(row));
    });
  });
  
  // Append to targetElement
  $table.appendTo($parent); 
}

buildTable(masterArray);

table, td {
  border: solid black 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Andrea · Accepted Answer · 2015-10-07 14:50:46Z

1

See the JSFiddle with the demo code.

Given the following HTML:

<table id='table'></table>

You can build the table with the following code:

var masterArray = [
    ['Phone', 'Town'],
    ['0612345678', 'New York']
];

var $table = $('#table'),
    $tr, $td;

for (var i = 0; i < masterArray[0].length; i++) {
    $tr = $('<tr>');
    for (var j = 0; j < masterArray.length; j++) {
        $td = $('<td>').text(masterArray[j][i]);
        $tr.append($td);

    }
    $table.append($tr);
}

Let me explain it.

I suppose that all the arrays inside masterArray have the same length, so in the external loop I create the single <tr> rows. The number of rows in equal to the number of element of the inner arrays:

for (var i = 0; i < masterArray[0].length; i++) {

In the inner loop:

for (var j = 0; j < masterArray.length; j++) {

I create the single <td> for the given row. Pay attention to:

$td = $('<td>').text(masterArray[j][i]);

To write the content inside the newly created <td> I inverted the indexes of masterArray. In this way I can the the i-th element of each array contained inside masterArray.

edited Oct 7, 2015 at 14:50

answered Oct 7, 2015 at 14:44

Andrea

3,4501 gold badge19 silver badges25 bronze badges

1 Comment

Robert Over a year ago

Thank you for this answer. It's a very nice short notation, good job!

Collectives™ on Stack Overflow

JQuery Array with multiple arrays mapping

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related