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 Commented 20 авг. 2018 в 10:06
  • Можно использовать какой-нибудь простой static site generator типа assemble.io
    – angry
    Commented 20 авг. 2018 в 10:09
  • Сторонние ресурсы использовать нельзя.
    – user302239
    Commented 20 авг. 2018 в 10:43
  • @user302239 Данные приходят строго в таком формате? Количество полей всегда одинаковое? Что за пустые td в примере кода?
    – UModeL
    Commented 20 авг. 2018 в 11:34
  • по поводу td. я вот и не знаю можно ли сделать, что бы они сами вставали с данными из массива json и из html их убрать. или нужно сделать архитектуру в html и туда как то подставлять данные.
    – user302239
    Commented 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
    Commented 20 авг. 2018 в 12:27

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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