Как мне создать таблицу из удаленного JSON? - PullRequest
Новая
       16

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

0 голосов
/ 30 марта 2020

Я знаю, как создать таблицу из JSON. Ниже приведен пример кода. Но я не знаю, как подключиться к удаленным URL-адресам, содержащим JSON контент для использования в функции создания таблиц. Я нашел эту ссылку на json страницу, и я хотел бы создать ту же таблицу с информацией (континент, страна, случаи, случаи смерти, выздоровление и последнее обновление). Столь похожая таблица приведена в примере. Если обсуждение этой топики c существует и дает правильные результаты, пожалуйста, напишите это в комментарии, но не удаляйте эту топи c.

TABLE. HTML ( JSON находится на странице, я хотел бы создать таблицу из удаленного JSON) 

<!DOCTYPE html>
<html>
<head>
    <title>Convert JSON Data to HTML Table</title>
    <style>
        th, td, p, input {
            font:14px Verdana;
        }
        table, th, td 
        {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
        th {
            font-weight:bold;
        }
    </style>
</head>
<body>

    <p id="showData"></p>
</body>

<script>

        var myBooks = [
            {
                "Book ID": "1",
                "Book Name": "Computer Architecture",
                "Category": "Computers",
                "Price": "125.60"
            },
            {
                "Book ID": "2",
                "Book Name": "Asp.Net 4 Blue Book",
                "Category": "Programming",
                "Price": "56.00"
            },
            {
                "Book ID": "3",
                "Book Name": "Popular Science",
                "Category": "Science",
                "Price": "210.40"
            }
        ]

        // EXTRACT VALUE FOR HTML HEADER. 
        // ('Book ID', 'Book Name', 'Category' and 'Price')
        var col = [];
        for (var i = 0; i < myBooks.length; i++) {
            for (var key in myBooks[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        // CREATE DYNAMIC TABLE.
        var table = document.createElement("table");

        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

        var tr = table.insertRow(-1);                   // TABLE ROW.

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");      // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        // ADD JSON DATA TO THE TABLE AS ROWS.
        for (var i = 0; i < myBooks.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = myBooks[i][col[j]];
            }
        }

        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);

</script>
</html>

Ответы [ 2 ]

0 голосов
/ 30 марта 2020

Ваш источник данных больше не обслуживает данные. Поэтому я изменил его на место, где статистические данные, собранные Университетом Джона Хопкинса (Балтимор, Мэриленд), отражаются ежедневно. Поскольку эти данные содержат временной ряд , мне пришлось немного их предварительно обработать, прежде чем помещать в таблицу ниже. Форматирование (= раскраска) тогда лучше всего сделать несколькими строками CSS: 

const num=s=>+s.replace(/[^0-9]/g,''),
  cols=["country","cases","deaths","recovered","deathrate"];
fetch('https://pomber.github.io/covid19/timeseries.json').then(r=>r.json()).then(o=>{
  var D=Object.keys(o).sort().map(c=>{
    let dat=Object.values(o[c].slice(-1)[0]);
    dat[0]=c;dat.push((100*dat[2]/dat[1]).toFixed(2)+'%');
    return dat
  })
  document.querySelector('table').innerHTML='<tr>'+
  cols.map(s=>
    `<th>${s}</th>`).join('')+'</tr><tr>'
     +D.map(r=>`<td>${r.join('</td><td>')}</td>`)
       .join('</tr><tr>')+'</tr>';
 })
th:first-child {text-align:left}
th:nth-child(n+2), td:nth-child(n+2) {text-align:right}
th:nth-child(2) {background-color: #00aa22}
th:nth-child(3) {background-color: #ffff00}
th:nth-child(4) {background-color: #ff0000}
th:nth-child(5) {background-color: #ff9900}
td:nth-child(2) {background-color: #55ee77}
td:nth-child(3) {background-color: #ffff55}
td:nth-child(4) {background-color: #ff0000}
td:nth-child(5) {background-color: #ffb84d}
<table></table>

Чисто из интереса я добавил некоторые функциональные возможности сортировки в таблицу. Нажмите на любой из заголовков столбцов, чтобы отсортировать по этому столбцу (нажмите еще раз для обратного порядка): 

const num=s=>+s.replace(/[^0-9]/g,''),
  cols=["country","cases","deaths","recovered","deathrate"];
const tblsort=ev=>{const e=ev.target; if (e.tagName=='TH'){
   const i=[...e.parentNode.children].indexOf(e); srtdir[i]=srtdir[i]>0?-1:1;
   [...tbd.children].sort(i>0?srtnum(i):srttxt(i)).forEach(tr=>tbd.appendChild(tr));
  }
};
const srtdir=[];
const srtnum=i=>(a,b)=>srtdir[i]*num(a.children[i].textContent)-num(b.children[i].textContent);
const srttxt=i=>(a,b)=>srtdir[i]*a.children[i].textContent.localeCompare(b.children[i].textContent);
fetch('https://pomber.github.io/covid19/timeseries.json').then(r=>r.json()).then(o=>{
  var D=Object.keys(o).sort().map(c=>{
    let dat=Object.values(o[c].slice(-1)[0]);
    dat[0]=c;dat.push((100*dat[2]/dat[1]).toFixed(2)+'%');
    return dat
  })
  document.querySelector('table').innerHTML='<thead><tr>'+
  cols.map(s=>
    `<th>${s}</th>`).join('')+'</tr></thead><tbody><tr>'
     +D.map(r=>`<td>${r.join('</td><td>')}</td>`)
       .join('</tr><tr>')+'</tr></tbody>';
  tbd=document.querySelector('tbody');
  thd=document.querySelector('thead').addEventListener('click',tblsort);
 })
th {cursor:pointer}
th:first-child {text-align:left}
th:nth-child(n+2), td:nth-child(n+2) {text-align:right}
th:nth-child(2) {background-color: #00aa22}
th:nth-child(3) {background-color: #ffff00}
th:nth-child(4) {background-color: #ff0000}
th:nth-child(5) {background-color: #ff9900}
td:nth-child(2) {background-color: #55ee77}
td:nth-child(3) {background-color: #ffff55}
td:nth-child(4) {background-color: #ff0000}
td:nth-child(5) {background-color: #ffb84d}
<table></table>
0 голосов
/ 30 марта 2020

Сначала вы должны использовать XMLHttpRequest или Fetch , чтобы попытаться получить удаленные данные, а затем преобразовать их с помощью JSON .parse . В случае успеха объект можно использовать для генерации таблицы, как в примере кода.

Если вам неудобно использовать 'vanilla' JS, вы можете найти множество библиотек как для XMLHttpRequest, так и для Fetch.

...