首页 > 解决方案 > Google Books API 的“无法从未定义中读取属性“0””

问题描述

在我script.js的 Google Book API 搜索网络应用程序中,在少数情况下我会遇到以下错误:

未捕获的类型错误:无法读取未定义的属性“0”

这是指以下代码行:

isbn = data.items[i].volumeInfo.industryIdentifiers[0].identifier;

那么,有没有办法避免这个错误,并industryIdentifiers在分配变量之前检查查询返回的数据中是否存在?

我尝试先检查是否industryIdentifiers存在,然后将值分配给变量,industryIdentifiers在分配之前检查是否为空或“未定义”,但我无法解决这个问题。

这是我目前正在使用的代码:

/*global document, $, console, event, results */

function bookSearch() {                          //function triggered by button
    /* eslint-disable no-console */
    event.preventDefault();                      //preventing auto refresh of the page
    //console.log("This function is working.");  //console.log to see if the function was running properly

    var search = document.getElementById('book').value; //storing the value of search
    document.getElementById('results').innerHTML = '';  
    //console.log(search);                       //console.log to see "search" in console 

    $.ajax({

        url: "https://www.googleapis.com/books/v1/volumes?q=" + search + "&startIndex=0&maxResults=40&key=AIzaSyCOBbymaad4eBVNFVF5JC-Pc0TQzE6AHOw", //linking API + our search
        //-------------^this increments the number of results returned. default 10
        dataType: "json",

        success: function(data) {
            console.log(data)
            //var results = document.getElementById('results');  //creating variable results

            //var title,authors, publisher,link,thumbNail,isbn = ''; //variables to use in results.innerHTML

            for (i = 0 ; i < data.items.length ; i++ ) {
                         //-------------^loop runs as much as the lenght of items
                title = data.items[i].volumeInfo.title;              //storing informations to display
                authors = data.items[i].volumeInfo.authors;
                link = data.items[i].volumeInfo.infoLink;
                thumbNail = data.items[i].volumeInfo.imageLinks.smallThumbnail;

                if( typeof data.items[i].volumeInfo.publisher != "undefined"){
                    publisher = data.items[i].volumeInfo.publisher;

                }

                isbn = data.items[i].volumeInfo.industryIdentifiers[0].identifier;

                results.innerHTML += "<h2>" + title + "</h2>" +      //writing the results returned 
                                     "<h3>By: " + authors + "</h3>" 
                if(publisher != null){                               //this solves the problem of showing 

                    results.innerHTML += "<h3>Published by: " + publisher + "</h3>"   

                 }  
                 results.innerHTML += "<a href=" + link +'"><img src="'+ thumbNail + '"></a>' +
                 "<h4>ISBN " + isbn + "</h4>" +    
                 "<hr><br>"



            }  
        },

    type: "GET"

    })

}

标签: javascriptapitypeerror

解决方案


如果不查看出现错误时收到的实际数据与没有错误时收到的实际数据,以下是防止异常的方法:

if (data.items[i].volumeInfo.industryIdentifiers 
        && data.items[i].volumeInfo.industryIdentifiers[0]) {
    isbn = data.items[i].volumeInfo.industryIdentifiers[0].identifier;
}

如果您不确定volumeInfo属性,您甚至可以添加要检查的内容:

if (data.items[i].volumeInfo 
        && data.items[i].volumeInfo.industryIdentifiers 
        && data.items[i].volumeInfo.industryIdentifiers[0]) {
    isbn = data.items[i].volumeInfo.industryIdentifiers[0].identifier;
}

这基本上检查“industryIdentifiers”不为空,并且其中包含第零个元素。当您尝试时,您可能错过了检查第二部分。

如果即使此解决方案不起作用,请添加您在出错时以及成功时得到的实际响应。


推荐阅读