Javascript 解析大JSON数据信息HTML表_Javascript_Html_Json

Javascript 解析大JSON数据信息HTML表

javascript html json

Javascript 解析大JSON数据信息HTML表,javascript,html,json,Javascript,Html,Json,我想将JSON文件实现到一个HTML表中。然而，就我而言，它不起作用。该表应一次显示所有数据（如果可能）基于JSON数据创建一个表。 var obj，dbParam，xmlhttp，myObj，x，txt=“”； obj={表：“名称”，限制：50}； dbParam=JSON.stringify（obj）； xmlhttp=新的XMLHttpRequest（）； xmlhttp.onreadystatechange=函数（）{ if（this.readyState==4&&this.st

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


基于JSON数据创建一个表。

var obj，dbParam，xmlhttp，myObj，x，txt=“”；
obj={表：“名称”，限制：50}；
dbParam=JSON.stringify（obj）；
xmlhttp=新的XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
myObj=JSON.parse（this.responseText）；
txt+=“”
对于（myObj中的x）{
txt+=“”+myObj[x]。名称+“”；
}
txt+=“”
document.getElementById（“demo”）.innerHTML=txt；
}
};
open（“GET”http://infoportal.vag.de/InfoPortal/busstations.xhr“，对）；
setRequestHeader（“内容类型”、“应用程序/json”）；
xmlhttp.send（“x=”+dbParam）；

此代码应该可以工作（但不在此代码段中）

const
限值=20，
LoadingTable=document.getElementById（'Loading-Table'）
;
让xdr=getXDomainRequest（“get”http://infoportal.vag.de/InfoPortal/busstations.xhr");
如果（！xdr）{
抛出新错误（“您的浏览器不允许跨域：/”；
};
xdr.onload=函数（）{
jsonData=JSON.parse（xdr.responseText）；
设直线=0；
用于（杰森达塔的榆树）{
让
行=LoadingTable.insertRow（行），
c_0=行插入单元格（0），
c_1=行插入单元格（1），
c_2=行插入单元（2），
c_3=行插入单元格（3）
;
c_0.textContent=elm；
c_1.textContent=jsonData[elm].name；
c_2.textContent=jsonData[elm].x；
c_3.textContent=jsonData[elm].y；
如果（++行>=限制）中断；
}
}
xdr.send（）；
函数getXDomainRequest（方法，url）{
var xdr=null；
if（window.XDomainRequest）{//MS ie
xdr=新的XDomainRequest（）；
open（方法，url）；
}
else if（window.XMLHttpRequest）{
xdr=newXMLHttpRequest（）；
if（xdr中的（'withCredentials'））{
xdr.open（方法、url、true）；
}
否则{
xdr=null；
}
} 
返回xdr；
}

正文{
字体大小：14px；
字体系列：Arial、Helvetica、无衬线字体；
}
#装载台{
边界塌陷：塌陷；
}
#装载台，
#装载台{
边框：1px纯灰；
}
#装载台{
填充：2x10px；
}

基于JSON数据创建一个表。

什么不起作用？有错误吗？这一页是空白的吗？响应是否返回了数据？这是一个跨来源请求问题，表的大小与我得到的无关：

Access to XMLHttpRequest at'http://infoportal.vag.de/InfoPortal/busstations.xhr“起源”http://localhost'已被CORS策略阻止：飞行前响应中的访问控制允许标头不允许请求标头字段内容类型。

尽管他可能没有同样的问题。

<!DOCTYPE html>
<html>
<body>

<h2>Make a table based on JSON data.</h2>

<p id="demo"></p>

<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { table: "name", limit: 50 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    myObj = JSON.parse(this.responseText);
    txt += "<table border='1'>"
    for (x in myObj) {
      txt += "<tr><td>" + myObj[x].name + "</td></tr>";
    }

    txt += "</table>"    
    document.getElementById("demo").innerHTML = txt;
  }
};
xmlhttp.open("GET", "http://infoportal.vag.de/InfoPortal/busstations.xhr", true);
xmlhttp.setRequestHeader("Content-type", "application/json");
xmlhttp.send("x=" + dbParam);
</script>

</body>
</html>