我试图将信息从JSON文件提取到JavaScript然后再转到HTML页面，但是当我到达一个从所述文件中获取信息的for循环时，它会一直出错。
function digiLevel() {
document.getElementById("digivice").innerHTML = "Loading...";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
if (xmlhttp.status == 200) {
var textBox = document.getElementById("digivice");
var output1 = "";
var output2 ="";
var output3 = "";
var digimon = xmlhttp.responseText;
console.dir(digimon);
digimon = JSON.parse(digimon);
console.dir(digimon);
output1 = "<ul>";
for (i = 0; i < 6; i++) {
output2 += "<li>" + digimon[i].name + " is a(n) " + digimon[i].level + "</li><br>";
}
output3 = "</ul>";
textBox.innerHTML = output1 + output2 + output3;
}
}
xmlhttp.open("GET", "http://ec2-54-158-64-221.compute-1.amazonaws.com/Challenge9/webService.php?content=data&format=json", true);
xmlhttp.send();
}
它返回
行上的Uncaught TypeError output2 += "<li>" + digimon[i].name + " is a(n) " + digimon[i].level + "</li><br>";
我不知道如何命名＆＃39;未定义？也许我只是失明;这是凌晨1点。
编辑：
感谢指导意见;我找到了我的错误：
即使有索引变量，数码手本身并没有自己的名称标签，所以我通过访问了名称标签 digimon.digivice.digimon[i].name
答案 0 :(得分：2)
改变这个：
digimon = JSON.parse(digimon);
到：
digimon = JSON.parse(digimon).digivice.digimon
根据您的代码：
xmlhttp.open("GET", "http://ec2-54-158-64-221.compute-1.amazonaws.com/Challenge9/webService.php?content=data&format=json", true);
并且更好地改变这个：
for (i = 0; i < 6; i++) {
到
for (let i = 0; i < digimon.length; i++) {
答案 1 :(得分：2)
它返回
行上的Uncaught TypeErroroutput2 += "<li>" + digimon[i].name + " is a(n) " + digimon[i].level + "</li><br>";
不确定为什么你将for循环硬编码为
for (i = 0; i < 6; i++) { //where is 6 coming from
在迭代期间某处看起来digimon[i]不存在（undefined），因此将您的for循环条件设为
for (i = 0; i < digimon.length; i++) { //where is 6 coming from
答案 2 :(得分：-1)
let fetchbtn = document.getElementById('fetchbtn');
let popbtn = document.getElementById('populate');
fetchbtn.addEventListener('click', buttonClickHandler)
popbtn.addEventListener('click', pophandler)
function buttonClickHandler() {
console.log('You Have Clicked The Fetch Button')
//Create XHR Object
const xhr = new XMLHttpRequest();
//Open The Object
xhr.open('POST', 'http://dummy.restapiexample.com/api/v1/create', true);
xhr.getResponseHeader('Content-type', 'application/json')
//What To Do On Progress
xhr.onprogress = function() {
console.log('On Progress')
}
// xhr.onreadystatechange = function (){
// console.log('ready state', xhr.readyState)
// }
//Response Is Ready
xhr.onload = function() {
if (this.status === 200) {
console.log(this.responseText)
console.log('We are done')
} else {
console.error('Some Error Occoured')
}
}
//Send Data
params = `{"name":"Krishna","salary":"210000","age":"1234568945465"}`;
xhr.send(params)
}
function pophandler() {
console.log('You Have Just Clicked The Populate Handler')
const xhr = new XMLHttpRequest()
xhr.open('GET', 'ajax.json', true)
xhr.getResponseHeader = ('Content-type', 'application/j-son')
xhr.onprogress = function() {
console.log('Loading Pop')
}
xhr.onreadystatechange = function statechange() {
console.log('Current Loading State Is ', xhr.readyState)
}
xhr.onload = function() {
if (this.status === 200) {
let obj = JSON.parse(this.responseText)
console.log(obj)
let list = document.getElementById('list');
str = "";
for (i in obj) {
str += `<li>${obj[i].name}</li>`;
}
list.innerHTML = str;
console.log('We Are Done')
} else if (this.status === 429) {
console.error('To Many Requests')
} else {
console.error('Some Error Occoured')
}
}
xhr.send()
}
// http://dummy.restapiexample.com/api/v1/employees<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<title>Hello, AJAX</title>
</head>
<body>
<div class="container my-4">
<h1>AJAX Tutorial</h1>
<button type="button" id="fetchbtn" title='Fetch Data' class="btn btn-primary">Write Data</button>
<button type="button" id="populate" title='Populate Data' class="btn btn-success">Fetch Data</button>
<ul id="list">
<h1></h1>
</ul>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="ajax.js"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>