Question

我想将JSON文件实现为HTML表。以我而言，它不起作用。该表应一次显示所有数据（如果可能）

window.onload = function() {
var a = document.querySelector('a[href="https://mywebsite.com/product/sweets/"]');
if (a) { a.setAttribute('href', 'https://mywebsite.com/p/sweets/')}
var b = document.querySelector('a[href="https://mywebsite.com/product/chocolate/"]');
if (b) { b.setAttribute('href', 'https://mywebsite.com/p/chocolate/')}
}

Answer 1

此代码应该有效（但不能在此代码段内显示）

const
  Limit        = 20,
  LoadingTable = document.getElementById('Loading-Table')
  ;

let xdr = getXDomainRequest("get", "http://infoportal.vag.de/InfoPortal/busstations.xhr");

if (!xdr) {
  throw new Error("no cross-domain allowed by your browser :/");
};

xdr.onload = function() {
  jsonData = JSON.parse(xdr.responseText);
  let line = 0;
  for (elm in jsonData) {
    let
      row = LoadingTable.insertRow(line),
      c_0 = row.insertCell(0),
      c_1 = row.insertCell(1),
      c_2 = row.insertCell(2),
      c_3 = row.insertCell(3)
      ;
    c_0.textContent = elm;
    c_1.textContent = jsonData[elm].name;
    c_2.textContent = jsonData[elm].x;
    c_3.textContent = jsonData[elm].y;

    if (++line >= Limit) break;
  }
}

xdr.send();


function getXDomainRequest( method, url ) {
  var xdr = null;

  if (window.XDomainRequest) {  // MS ie
    xdr = new XDomainRequest(); 
    xhr.open(method, url);
  }
  else if (window.XMLHttpRequest) {
    xdr = new XMLHttpRequest(); 
    if ('withCredentials' in xdr) {
      xdr.open(method, url, true);
    }
    else {
      xdr = null;
    }
  } 
  return xdr;	
}

body {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}
#Loading-Table {
  border-collapse: collapse;
}
#Loading-Table, 
#Loading-Table td {
  border: 1px solid grey;
}
#Loading-Table td {
  padding: 2px 10px;
}

<h2>Make a table based on JSON data.</h2>
<p id="demo"></p>

<table id="Loading-Table" ></table>

解析大JSON数据信息HTML表

1 个答案: