当解析json数据时--只使用javascript --没有数据出现吗？
当解析json数据时--只使用javascript --没有数据出现吗？
提问于 2018-06-19 01:01:43
我有一个来自api的json数据url。我试图仅使用javascript将数据放入表中，并将其转换为HTML。我尝试了多种方法，但不管怎样，该表都无法使用JSON文件中的数据。我想知道有没有什么明显不起作用的东西能脱颖而出？我已经为此目的创建了url (真正的url是提取json文件)。
当我通过开发人员工具运行它时，它给出了以下错误：
testingjson.html:7未捕获ReferenceError:未定义$
<html>
<head>
<script>
$(function() {
var people = [];
$.getJSON('https://api.url.come', function(data) {
$.each(data.person, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.organization + "</td>" +
"<td>" + f.service_url + "</td>" + "<td>" + f.account + "</td>" + "<td>" + f.created_at + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
});
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="profile">
<table id= "userdata" border="2">
<thead>
<th>Organization</th>
<th>URL</th>
<th>Account</th>
<th>Created</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>在阅读和尝试了所有的建议之后:这个似乎是最接近的，但还没有提取任何数据：
<html>
<head>
</head>
<body>
<div class="wrapper">
<div class="profile">
<table id= "userdata" border="2">
<thead>
<th>Organization</th>
<th>URL</th>
<th>Account</th>
<th>Created</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script>
(function() {
var table = document.getElementById("userdata");
var people = [];
fetch('https://api.gsa.gov/systems/digital-registry/v1/social_media.json?agencies=2200')
.then(data => data.json())
.then(json => json.map(f=>{
var tblRow = "<tr>" + "<td>" + f.account + "</td>" +
"<td>" + f.service_url + "</td>" + "<td>" + f.created_at + "</td>" + "<td>" + f.id + "</td>" + "</tr>"
table.innerHTML += tblRow;
}))
})();
</script>
</body>
</html>现在，我试了一下，它仍然不起作用：
<html>
<head>
<script type="text/javascript">
var url = "https://api.gsa.gov/systems/digital-registry/v1/social_media.json?agencies=2200";
var tableBody = document.getElementById("userdataBody");
var req = new XMLHttpRequest();
req.open("GET", url, true);
req.onload = function(data) {
if (req.status === 200) {
console.log("Success");
var persons = JSON.parse(req.response);
var newContent = "";
persons.forEach(function(person) {
var tblRow = "<tr>" + "<td>" + person.organization + "</td>" +
"<td>" + person.account + "</td>" + "<td>" + person.service_url + "</td></tr>";
newContent += tblRow;
});
tableBody.innerHTML += newContent;
} else {
console.log("Error : %d (%s)", req.status, req.statusText);
}
}
req.send();
</script>
</head>
<body>
<div class="wrapper">
<div class="profile">
<table id="userdata" border="2">
<thead>
<th>Name</th>
<th>Unsername</th>
<th>Email</th>
</thead>
<tbody id="userdataBody">
</tbody>
</table>
</div>
</div>
</body>
</html>回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-19 01:31:51
更新：https://jsfiddle.net/nz810m4r/24/我认为其中一个问题是url，我认为API不支持像?agencies=2200那样的查询
(function() {
var table = document.getElementById("userdata");
var people = [];
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var res = JSON.parse(this.responseText);
console.log(res.results);
res.results.map(f=>{
var tblRow = "<tr>" + "<td>" + f.account + "</td>" +
"<td>" + f.service_url + "</td>" + "<td>" + f.created_at + "</td>" + "<td>" + f.id + "</td>" + "</tr>"
table.innerHTML += tblRow;
});
}
};
xhttp.open("GET", "https://api.gsa.gov/systems/digital-registry/v1/social_media.json", true);
xhttp.send();
})();下面是一个函数示例https://jsfiddle.net/nz810m4r/
当然，这不是唯一的解决方案，但在本例中，我用$.getJSON代替了fetch()和promises，用$.each代替了map()。
(function() {
var table = document.getElementById("userdata");
var people = [];
fetch('https://jsonplaceholder.typicode.com/posts')
.then(data => data.json())
.then(json => json.map(f=>{
var tblRow = "<tr>" + "<td>" + f.userId + "</td>" +
"<td>" + f.id + "</td>" + "<td>" + f.title + "</td>" + "<td>" + f.body + "</td>" + "</tr>"
table.innerHTML += tblRow;
}))
})();Stack Overflow用户
发布于 2018-06-19 01:31:40
i在您的function(i,f)声明中做了什么？
而且，您使用append()方法完全是错误的。
它应该是：
$('#userdata tbody').append(tblRow);另外，请检查以下链接：
Stack Overflow用户
发布于 2018-06-19 01:13:20
将此代码添加到script标记中会有所帮助：
type="text/javascript"页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50914329
复制相关文章
相似问题