Question

请帮助我从1小时开始尝试并且无法解决什么错误

＆＃13;

<!DOCTYPE html>
<html>
<body>

<div id="id01">Result<br/></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://it-ebooks-api.info/v1/book/2279690981";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out =  arr[i].ID + arr[i].Title + arr[i].Description;
    }
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>

＆＃13;

我正在尝试从http://it-ebooks-api.info/v1/book/2279690981获取详细信息，但它只显示返回的空数组。需要进行哪些更改？

变形例我在JSON对象上添加了[]并且它工作了..请有人解释一下。

提前感谢：）

Answer 1

响应不包含数组，因此不需要for循环，这可以为您提供所需的结果：

<!DOCTYPE html>
<html>
<body>

<div id="id01">Result<br/></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://it-ebooks-api.info/v1/book/2279690981";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myresponse = JSON.parse(xmlhttp.responseText);
        myFunction(myresponse);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {
    var out = "";
    var i;
        out =  "<p>" + response.ID + response.Title + response.Description + "<p>"; 
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>

如果你使用http://it-ebooks-api.info/v1/search/php提供的完整列表，那么你需要for循环来完成这样的数组：

<!DOCTYPE html>
<html>
<body>

<div id="id01">Result<br/></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://it-ebooks-api.info/v1/search/php";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myresponse = JSON.parse(xmlhttp.responseText);
        myFunction(myresponse.Books);
    }
}

function myFunction(Books) {
    var out = "";
    for (var i = 0; i < Books.length; i++) {
      out += "<p>ID: " + Books[i].ID + "</p>" + "<p>Title: " + Books[i].Title + "</p>" + "<p>Description: " + Books[i].Description + "</p>"
    }
    document.getElementById("id01").innerHTML = out;
}

xmlhttp.open("GET", url, true);
xmlhttp.send();
</script>

</body>
</html>

为了使它更优雅，你可以有一个添加书籍的功能，如果你只得到一本书，你可以直接从onreadystatechange调用它，如果你有完整的列表，那么你可以循环它，但仍然使用相同的功能。所以像这样：

    <!DOCTYPE html>
<html>
<body>

<div id="id01">Result<br/></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://it-ebooks-api.info/v1/search/php";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var response = JSON.parse(xmlhttpo.responseText);
        if (response.Books) { // If the response object has Books array, we pass it to the parseBooks functoin to add them all one by one.
          parseBooks(response.Books)
        } else {
          addBook(response); // If there is no Books array, we assume that there is only one book and add it to the list with addBook function.
        }
    }
}

function addBook (Book) {
  var text = document.getElementById("id01").innerHTML;
  var body = "<p>ID: " + Book.ID + "</p><p>Title: " + Book.Title + "</p><p>Description: " + Book.Description + "</p>";

  document.getElementById("id01").innerHTML = text + body; // Append the innerHTML with the new Book.
}

function parseBooks(Books) {
    for (var i = 0; i < Books.length; i++) {
      addBook(Books[i]) // Add all books in the array one by one
    }
}

xmlhttp.open("GET", url, true);
xmlhttp.send();
</script>

</body>
</html>

Answer 2

您的JSON Feed只是一个简单的对象，而不是一个对象数组。 请注意返回Feed中的大括号： {}

然后您应该更改myFunction函数，使其仅通过删除for循环来通过对象而不是数组：

function myFunction(obj) {
    var out = "",
    id01 = document.getElementById("id01");
    out =  obj.ID + obj.Title + obj.Description;
    id01.innerHTML = id01.innerHTML + out;
}

编辑：

当你必须解析一个对象数组时，你可以在for循环中使用相同的函数。

将 http://it-ebooks-api.info/v1/search/php 返回的JSON作为Feed，您可以检索Books值，然后循环遍历它：

var xmlhttp = new XMLHttpRequest();
var url = "http://it-ebooks-api.info/v1/book/2279690981";
var url2 = "http://it-ebooks-api.info/v1/search/php";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var rslt = JSON.parse(xmlhttp.responseText);
        console.log(rslt);
        var books = rslt.Books;
        for (var i = 0; i < books.length; i++)
        {
            myFunction(books[i]);
        }
    }
}
xmlhttp.open("GET", url2, true);
xmlhttp.send();

JSON响应返回null数组

2 个答案:

编辑：