title: Display JSON data in tablular format of predefined format
body: <p>I am working on a small project's interface. Basically, an API sends the following JSON data:</p>
  
  <pre><code>{
  "wallet_transactions": [
      {
          "total_cost": "80.000",
          "expense_type__name": "Gas",
          "total_quantity": "5.000",
          "trans_type": "Purchased"
      },
      {
          "total_cost": "250.000",
          "expense_type__name": "Gas",
          "total_quantity": "35.000",
          "trans_type": "Rent"
      }
  ]}
  </code></pre>
  
  <p>The data basically shows how much of GAS was given, its cost and its means (on credit or it was bought).</p>
  
  <p>I tried to build a table out of it directly, but it was dimmed unfriendly since GAS was written twice.</p>
  
  <p>What I tried was:</p>
  
  <pre><code>$.each(response.wallet_transactions, function(index) {
      var exp_name=response.wallet_transactions[index].expense_type__name;
      var quantity=response.wallet_transactions[index].total_quantity;
      var price=response.wallet_transactions[index].total_cost;
      var trans_type=response.wallet_transactions[index].trans_type;
  
      rows=rows+'&lt;tr&gt;&lt;td&gt;' + exp_name + '&lt;/td&gt;';
      rows=rows + '&lt;td&gt;' + price + '&lt;/td&gt;';
      rows=rows + '&lt;td&gt;' + quantity + '&lt;/td&gt;';
      rows=rows + '&lt;/tr&gt;';
  });
  </code></pre>
  
  <p>The output that is needed now looks like the image below:</p>
  
  <p><a href="https://i.stack.imgur.com/kff1r.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kff1r.jpg" alt="enter image description here"></a></p>