How to read data using JSONP, Ajax and jquery?

Question

I am trying to read data from this API, but it is not working, I have an input box where I enter the isbn number and then get the data, using jsonp. Could you possibly help me in identifying where my error("Cannot read property 'title' of undefined") is?

function add(){
        var isbn = parseInt($("#isbn").val());
        var list = $("#list");
        console.log(parseInt(isbn));

        $.ajax({
            url: "https://openlibrary.org/api/books?bibkeys=" + isbn + "&jscmd=details&callback=mycallback",
            dataType: "jsonp",
            success: function(isbn){
                var infoUrl = isbn.info_url;
                var thumbnailUrl = isbn.thumbnail_url;
                var title = isbn.details.title;
                var publishers = isbn.details.publishers;
                var isbn13 = isbn.details.isbn_13;


                console.log(isbn.info_url);
                              }
        });
    }

First do console.log(isbn) to see what information is available. — Al.G.
– Al.G., Commented Jan 28, 2017 at 17:51
Did you comment out/delete the variable declarations to prevent the error and see the result? I mean: success: function(isbn) { console.log(isbn); } without anything inside. — Al.G.
– Al.G., Commented Jan 28, 2017 at 17:53
@AI.G Now, I did, and the data is a bit weird: Object proto : Object defineGetter : defineGetter__() __defineSetter : defineSetter__() __lookupGetter : lookupGetter__() __lookupSetter : lookupSetter__() constructor : Object() hasOwnProperty : hasOwnProperty() isPrototypeOf : isPrototypeOf() propertyIsEnumerable : propertyIsEnumerable() toLocaleString : toLocaleString() toString : toString() valueOf : valueOf() get __proto : proto__() set __proto : __proto__() — M.T
– M.T, Commented Jan 28, 2017 at 17:55
@MT console.log(isbn) the comment all those var infoUrl = isbn.info_url; etc.. — jemz
– jemz, Commented Jan 28, 2017 at 17:55

Jonathan Lonowski · Accepted Answer · 2017-01-28 20:28:07Z

1

Open Library's API expects bibkeys to be prefixed with their type and a colon, rather than just the number alone:

function add(){
    var isbn = 'ISBN:' + $("#isbn").val();
    // ...

The colon also means the value should be URL-encoded, which jQuery can do for you:

$.ajax({
    url: "https://openlibrary.org/api/books?jscmd=details&callback=?",
    data: { bidkeys: isbn },
    dataType: "jsonp",

Then, the data it returns reuses the bibkeys you provided as properties:

{ "ISBN:0123456789": { "info_url": ..., "details": { ... }, ... } }

To access the book's information, you'll have to first access this property:

success: function(data){
    var bookInfo = data[isbn];

    console.log(bookInfo.details.title);
    // etc.
}

Example: https://jsfiddle.net/3p6s7051/

You can also retrieve the bibkey from the object itself using Object.keys():

success: function (data) {
    var bibkey = Object.keys(data)[0];
    var bookInfo = data[bibkey];

    console.log(bookInfo.details.title);
    // ...
}

Note: You can use this to validate, since the request can be technically successful and not include any book information (i.e. no matches found):
success: function (data) {
    var bibkeys = Object.keys(data);

    if (bibkeys.length === 0)
        return showError('No books were found with the ISBN provided.');

    // ...

Example: https://jsfiddle.net/q0aqys87/

edited Jan 28, 2017 at 20:28

answered Jan 28, 2017 at 18:05

Jonathan Lonowski

124k35 gold badges203 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

M.T Over a year ago

Thanks for your reply but, I am trying this too, and I am getting the same error.

M.T Over a year ago

I tried printing only the bookInfo part and I am getting underfined.

Jonathan Lonowski Over a year ago

@M.T I've updated my answer with a few notes from the API's docs. Also included an example JSFiddle.

M.T Over a year ago

Hey Jonathan, sorry but still it is not working... and thanks!

M.T · Accepted Answer · 2017-01-31 12:01:16Z

0

I asked a professor, and this is how she told me to solve it:

function add(){
    var isbn = parseInt($("#isbn").val());
    var list = $("#list");
    console.log(parseInt(isbn));

    $.ajax({
        url: "https://openlibrary.org/api/books?bibkeys=" + isbn + "&jscmd=details&callback=mycallback",
        dataType: "jsonp",
        success: function(data){
            var thumb=data["ISBN:"+isbn+""].thumbnail_url;
             ....
       }
    });
}

answered Jan 31, 2017 at 12:01

M.T

3034 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to read data using JSONP, Ajax and jquery?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related