1

Есть 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
}   
5
  • Тебе поможет метод appendChild(). Вставляешь в таблицу через цикл elem.asks[i].numberOfOrders 20 авг 2018 в 10:06
  • Можно использовать какой-нибудь простой static site generator типа assemble.io
    – angry
    20 авг 2018 в 10:09
  • Сторонние ресурсы использовать нельзя.
    – user302239
    20 авг 2018 в 10:43
  • @user302239 Данные приходят строго в таком формате? Количество полей всегда одинаковое? Что за пустые td в примере кода?
    – UModeL
    20 авг 2018 в 11:34
  • по поводу td. я вот и не знаю можно ли сделать, что бы они сами вставали с данными из массива json и из html их убрать. или нужно сделать архитектуру в html и туда как то подставлять данные.
    – user302239
    20 авг 2018 в 12:15

1 ответ 1

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>

1
  • Спасибо! Все получилось
    – user302239
    20 авг 2018 в 12:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.