Json массив в HTML таблицу

196

11 ноября 2018, 01:10

Есть json фаил с данными на 8000 строк. Его данные нужно перенести в HTML таблицу. Поиск по просторам интернета не дал результата.

            <table id= "userdata">
              <thead>
                <tr>
                  <td>Count</td>
                  <td>Total</td>
                  <td>Amount</td>
                  <td>Price</td>
                  <td>Price</td>
                  <td>Amount</td>
                  <td>Total</td>
                  <td>Count</td>
                </tr>
              </thead>
              <tbody>
                 <tr>
                  <td>здесь должны быть данные из numberOfOrders</td>
                  <td>здесь должны быть данные из price</td>
                  <td>здесь должны быть данные из quantity</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
                  <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
                 <tr>
                  <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
              </tbody>
            </table>

Соответственно, как сделать что бы таблица строилась сама когда брала данные из массива?

{
  "name": "BTC/USD",
  "asks": [
{
  "numberOfOrders": 1,
  "price": 6074.9,
  "quantity": 3.93318116
}, {
  "numberOfOrders": 1,
  "price": 6080,
  "quantity": 0.01
}, {
  "numberOfOrders": 1,
  "price": 6081.04,
  "quantity": 34.6
}

Answer 1

var aData = { 
  "name": "BTC/USD", 
  "asks": [{ 
    "numberOfOrders": 1, 
    "price": 6074.9, 
    "quantity": 3.93318116 
  }, { 
    "numberOfOrders": 1, 
    "price": 6080, 
    "quantity": 0.01 
  }, { 
    "numberOfOrders": 1, 
    "price": 6081.04, 
    "quantity": 34.6 
  }] 
} 
 
xJSON = JSON.stringify(aData); 
 
function fBuildTable(oData) { 
  var oTBody = document.getElementById('userdata').tBodies[0]; 
  var oAsks = oData['asks']; 
  oAsks.forEach(function(oItem) { 
    var oRow = oTBody.insertRow(); 
    for (key in oItem) { 
      var oCell = oRow.insertCell(); 
      oCell.innerHTML = oItem[key]; 
    } 
  }); 
} 
 
fBuildTable(JSON.parse(xJSON));

#userdata { 
  border: 2px solid #f00; 
} 
 
#userdata td { 
  border: 1px dotted #080; 
}

<table id="userdata"> 
  <thead> 
    <tr> 
      <th>Count</th> 
      <th>Total</th> 
      <th>Amount</th> 
    </tr> 
  </thead> 
  <tbody> 
    <tr> 
      <td>здесь должны быть данные из numberOfOrders</td> 
      <td>здесь должны быть данные из price</td> 
      <td>здесь должны быть данные из quantity</td> 
    </tr> 
  </tbody> 
</table>