在Angular中工作,我正在使用一个简单的AJAX程序从JSON文件中获取数据并将其作为表获取。我在HTML和JS文件的简单结构中尝试了我的代码,其工作正常,但该代码在Angular中不起作用, 。 附注:我使用资产中的JavaScript,因为我的打字稿不好。
// main.js file in assets/js/ folder
var xmlhttp, myObj, x, txt = "";
xmlhttp = new XMLHttpRequest;
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
txt += "<thead><tr>" +
"<th>Id</th>" +
"<th>Brand</th>" +
"<th>Project Name</th>" +
"<th>Location</th>" +
"<th>Sector</th>" +
"<th>Created By</th>" +
"<th>Created On</th>" +
"</tr></thead><tbody>";
for (x=0; x<4 ; x++) {
txt += "<tr><td>"+
myObj[x].id + "</td> <td>" +
myObj[x].brand + "</td> <td>" +
myObj[x].project_name + "</td> <td>" +
myObj[x].location + "</td> <td>" +
myObj[x].sector + "</td> <td>" +
myObj[x].created_by + "</td> <td>" +
myObj[x].created_on + '</td><td>'+
"</td></tr>";
}
txt += " </tbody>"
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("POST", "../json/detail.json", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();
我的json文件如下:
//detail.json file in assets/json/
[
{
"id":"896",
"brand":"a2",
"project_name":"qwerty",
"location":"pune",
"sector":"4",
"created_by":"M.S",
"created_on":"2/4/19"
},
{
"id":"02",
"brand":"a3",
"project_name":"bottle",
"location":"mumbai",
"sector":"5",
"created_by":"C.S",
"created_on":"24/4/19"
},
{
"id":"03",
"brand":"a4",
"project_name":"tottles",
"location":"kolkata",
"sector":"6",
"created_by":"P.S",
"created_on":"9/12/19"
},
{
"id":"09",
"brand":"a6",
"project_name":"Device 23",
"location":"Delhi",
"sector":"7",
"created_by":"T.S",
"created_on":"08/4/19"
}
]
应该在
中获取JSON<table id="demo"></table>