jquery - Separate output of multiple JavaScript objects -

i'm trying separate couple of objects filtering keys. example may want output data of "yar" , "foo" objects in first table , rest in second table.

this results in one complete table:

console.log(data); var firsttable = 'yar foo'.split(' '); for(var = 0; < data.length; i++) {     for(var key in data[i]) {         html = '<tr data-item="' + key + '"></tr>';     }     $('table#one tbody').append(html); } 

the result i'm after:

<table> <tbody>   <tr data-item="yar"></tr>   <tr data-item="foo"></tr> </tbody> </table>  <table> <tbody>   <tr data-item="bar"></tr>   <tr data-item="rawr"></tr> </tbody> </table> 

console.log(data) returns:

0: object     foo: object         lorem: array[2]             0: "1"             1: "2" 1: object     bar: object         lorem: array[2]             0: "1"             1: "2" 2: object     yar: object         lorem: array[2]             0: "1"             1: "2" 3: object     rawr: object         lorem: array[2]             0: "1"             1: "2" 

i've tried match key $.inarray(key, firsttable) first for-loop makes me end many rows. glad can get!

append rows respective tables one-at-a-time, , remember inarray doesn't return true or false - returns index (0..n) of item in array, or -1 if item isn't there.

for(var = 0; < data.length; i++) {     for(var key in data[i]) {         html = '<tr data-item="' + key + '"></tr>';          if ($.inarray(key, firsttable) >= 0)           $('table#one tbody').append(html);         else           $('table#two tbody').append(html);     } }