Как создать таблицу из JSON?

233

13 апреля 2022, 04:40

Получаю данные с этой страницы. Я понял как положить каждый объект в отдельный tr тег:

` const nbrbURI = 'https://www.nbrb.by/API/';
function ratestoday() {
    $.getJSON(nbrbURI + 'exrates/rates?periodicity=0')
        .done(function (data) {
            $.each(data, function (key, item) {
                $('<tr>', { text: JSON.stringify(item.Cur_OfficialRate) }).appendTo($('.exRates'));
            });
        });
    };
ratestoday()
`

А вот как сделать таблицу, чтобы всё совпадало - не понимаю. Прошу помощи.

Answer 1

HTML:

<table class="exRates">
  <thead>
    <tr>
      <td>Cur_id</td>
      <td>Cur_OfficialRate</td>
    </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>

JS:

const nbrbURI = 'https://www.nbrb.by/API/';
let tbody = $('.exRates').find('tbody');
function ratestoday() {
  $.getJSON(nbrbURI + 'exrates/rates?periodicity=0')
  .done(function (data) {
    $.each(data, function (key, item) {
      tbody.append( `<tr><td>${item.Cur_id}</td><td>${item.Cur_OfficialRate}</td></tr>` );
    });
  });
};
ratestoday()

data должна содержать что-то подобное:

[
  {
    "Cur_ID": 190,
    "Date": 1.234
  },
  {
    "Cur_ID": 290,
    "Date": 2.356
  },
  {
    "Cur_ID": 291,
    "Cur_OfficialRate": 1.8684
  }
]

Answer 2

Можно сделать через fetch:

fetch('https://www.nbrb.by/api/exrates/rates?periodicity=0')
.then(res => res.json())
.then(res => {
    $(res).each((index, item)=>{
        $('.exRates').append(`<tr><td>${item.Cur_Scale}</td><th scope="row">${item.Cur_Name}</th><td>${item.Cur_OfficialRate}</td><td>${item.Cur_Abbreviation}</td></tr>`)
    })
})