title: Selecting the output when iterating through two arrays
body: <p>So when I loop through two of my <strong>arrays(associative)</strong> in js and append the output in my table, I get 3 <code>undefined</code>. The output looks like this:
   <a href="https://i.stack.imgur.com/eLGfc.png" rel="nofollow noreferrer">Output</a> </p>
  
  <p>You can see in the console that the iteration happens consecutively,
  which is why I get the undefined values given the nature of the array</p>
  
  <p>This is the jQuery call to my controller where I get both my arrays:</p>
  
  <pre><code>function getArtworks() {
    $.ajax({
      type: 'GET',
      url: './index.php/Controller/getArtworks',
      dataType: 'json',
      success: function (jsonData) {
        showArtsInTable(jsonData);
        console.log(jsonData);
      },
      error: function () {
        alert('Error :' + jsonData);
      }
    });
  }
  </code></pre>
  
  <p>This is where I loop through my arrays and append to my table:</p>
  
  <pre><code>function showArtsInTable(jsonData) {
    let table = $('#tblArt');
    $('#artForm').hide();
    table.empty();
    table.append('&lt;thead&gt;');
    table.append('&lt;tr&gt;');
    table.append('&lt;th&gt;Namn&lt;/th&gt;');
    table.append('&lt;/tr&gt;');
    table.append('&lt;/thead&gt;');
    $.each(jsonData, function() {
      $.each(this, function(i, value) {
        console.log(value);
        table.append('&lt;tbody&gt;');
        table.append('&lt;tr&gt;');
        table.append(
          "&lt;td&gt;&lt;a href='#' onclick=getArtworkByID('" +
            value['ID'] +
            "')&gt;" +
            value['NAME'] +
            '&lt;/a&gt;&lt;/td&gt;'
        );
        table.append('&lt;/tr&gt;');
        table.append('&lt;/tbody&gt;');
        table.append('&lt;tr&gt;');
        table.append('&lt;td&gt;' + value['MAX(BID)'] + '&lt;/td&gt;');
        table.append('&lt;/tr&gt;');
      });
    });
  }
  </code></pre>
  
  <p>stringified console log:</p>
  
  <pre><code>[
      {
        "ID": "1",
        "NAME": "Chaviour",
        "CATID": ""
      },
      {
        "ID": "2",
        "NAME": "simpleDrop",
        "CATID": ""
      },
      {
        "ID": "3",
        "NAME": "Chattash",
        "CATID": "Janne"
      },
  ],
  [
      {
        "ID": "1",
        "DATE": "2019-03-16 19:39:06",
        "MAX(BID)": "7500"
      },
      {
        "ID": "2",
        "DATE": "2019-03-16 19:39:06",
        "MAX(BID)": "5000"
      },
      {
        "ID": "3",
        "DATE": "2019-03-16 20:55:48",
        "MAX(BID)": "9000"
      }
  ]
  </code></pre>
  
  <p>I only want my table to append values under the columns "Name" and "Bid".
  How can I go about that?</p>