title: Flattening JS objects with nested arrays into a single HTML table row with Knockout.js
body: <p>I have an array of payment data that looks similar to:</p>
  
  <pre><code>[{
    amount: "$202.12",
    date: "10/13/2013",
    items: [{type: "Service", amount: "$190.00"}, {type: "Fee", amount: "12.12"}],
    status: "Paid"
  },
  // More of the same...
  ]
  </code></pre>
  
  <p>The <code>type</code> of the items are arbitrary and can differ for each payment.</p>
  
  <p>Now I want to display each payment in the array as a row in a table. However, I want the elements of the items array to be flattened out on the same row, so that the table would look like</p>
  
  <pre><code>| Date       | Amount | Fee   | Service | Status |
  |------------|--------|-------|---------|--------|
  | 10/13/2013 | 202.12 | 12.02 | 190.00  | Paid   |
  |------------|--------|-------|---------|--------|
  | So on and so forth ....                        |
  </code></pre>
  
  <p>I am using knockout.js to generate these tables, but I cannot figure out how to flatten the objects into a single row using the <code>foreach</code> binding.</p>
  
  <p>Turning each item <code>type</code> into a property of the payment object like</p>
  
  <pre><code>var payment = {
    amount: "$202.12",
    date: "10/13/2013",
    items: [{type: "Service", amount: "$190.00"}, {type: "Fee", amount: "12.12"}],
    status: "Paid"
  };
  var flatPayment = {
    amount: payment.amount,
    status: payment.status,
    date: payment.date
  };
  
  for (var i = 0; i &lt; payment.items.length; i++) 
    flatPayment[payment.items[i].type] = payment.items[i].amount;
  </code></pre>
  
  <p>could work, but however, I do not know the item types beforehand and therefore cannot bind the <code>text</code> of each table cell.</p>
  
  <p>Any suggestions?</p>