JSON Google Books and Ajax

Question

I have a search box where a user inputs an ISBN number, when this is submitted a div displays info from Google Books API. This info is retrieved from a JSON file in the standard format. I am able to display the title, subtitle, author and description within the div without issues.

I then have an 'Add to Library' button which should send all this info to a database, my problem is that all of the fields send apart from authors. Instead of sending the authors names, the word 'Array' is sent to the database.

The only way I can get the authors name to send is by adding [0] to the end of my Ajax data object, however this only sends the name of the first author (if there is 3 authors two will be left out).

Update - It seems to be JSON related, if I change my Ajax data to anything other than "authors", "industryIdentifiers" or "categories" it works. Is that because they contain a list and are not single strings?

JS

$(document).ready(function() {

    $('#submit').click(function(ev) {
        ev.preventDefault();
        var isbn = $('#isbn_search').val(); //get isbn direct from input, no need for php
        var url='https://www.googleapis.com/books/v1/volumes?q='+isbn;
        $.getJSON(url,function(data){
            $('.result').empty();
            $.each(data.items, function(entryIndex, entry){
                var html = '<div class="results well">';                    
                html += '<h3>' + entry.volumeInfo.title + '</h3>';                  
                html += '<h5>' + entry.volumeInfo.subtitle + '</h5>'; 
                html += '<p>' + entry.volumeInfo.authors + '</p>';              
                html += '<p>' + entry.volumeInfo.description + '</p>';
                $('.result').append(html);
            });                        
        });
    });
});

AJAX

$.ajax({
     type: 'POST',
     url: 'addIsbnScript.php',
     data: {
         'isbn' : isbn,
         'title' : entry.volumeInfo.title,
         'subtitle' : entry.volumeInfo.subtitle,
         'authors' : JSON.stringify(entry.volumeInfo.authors),
         'description' : entry.volumeInfo.description
     },
     success: function () { 
     $("#add").prop('disabled', true);
    }
});

PHP

$isbn = $_POST['isbn'];
$title = $_POST['title'];
$subtitle = $_POST['subtitle'];
$authors = $_POST['authors'];
$decoded_authors = json_decode($authors);
print_r($decoded_authors);
$description = $_POST['description'];

$query = $conn->prepare("INSERT INTO `isbn` (isbn_num,title,subtitle,authors,description) VALUES (?,?,?,?,?)");

$query->bind_param('issss',

$isbn,
$title,
$subtitle,       
$decoded_authors,
$description        
        );

JSON

"volumeInfo":{
"title":string,
"subtitle":string,
"authors":[
string
],
"publisher":string,
"publishedDate":string,
"description":string,
"industryIdentifiers":[
{
"type":string,
"identifier":string
}
],
"pageCount":integer,
"dimensions":{
"height":string,
"width":string,
"thickness":string
},
"printType":string,
"mainCategory":string,
"categories":[
string
],
"averageRating":double,
"ratingsCount":integer,
"contentVersion":string,
"imageLinks":{
"smallThumbnail":string,
"thumbnail":string,
"small":string,
"medium":string,
"large":string,
"extraLarge":string
},
"language":string,
"previewLink":string,
"infoLink":string,
"canonicalVolumeLink":string
},

Please excuse the code if it's very amateur as I'm new to JS and this is merely for personal development.

How about `'authors' : JSON.stringify(entry.volumeInfo.authors),`? Then parse it at server-side and proceed? — Roy M J, Nov 24 '14 at 10:33
FYI: http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php — Roy M J, Nov 24 '14 at 10:34
Thanks @Rory it now sends the values in the following format ["Chris Cleave","Philippa Gregory","Sarah Pekkanen - so I will have a look at parsing the JSON server-side. I'll update shortly. — jonboy, Nov 24 '14 at 11:03
You can use http://php.net/manual/en/function.json-decode.php in server side to decode this. — Roy M J, Nov 24 '14 at 11:19

score 2 · Accepted Answer · answered Nov 24 '14 at 11:25

2

You would need to decode it in client side to pass the array to server side. Something like :

$.ajax({
     type: 'POST',
     url: 'addIsbnScript.php',
     data: {
         'isbn' : isbn,
         'title' : entry.volumeInfo.title,
         'subtitle' : entry.volumeInfo.subtitle,
         'authors' : JSON.stringify(entry.volumeInfo.authors),
         'description' : entry.volumeInfo.description
     },
     success: function () { 
     $("#add").prop('disabled', true);
    }
});

Then in your PHP file(addIsbnScript.php)

<?php
   $authors = $_POST['authors'];//'["Chris Cleave","Philippa Gregory","Sarah Pekkanen"]'
   $decoded_authors = json_decode($authors);
   print_r($decoded_authors);// Array ( [0] => Chris Cleave [1] => Philippa Gregory [2] => Sarah Pekkanen)
?>

Hope this helps. Cheers

answered Nov 24 '14 at 11:25

Roy M J

6,926
7
51
78

1

Thanks @Rory, I now have an understanding of what I should be doing. Although when I follow your code it still sends authors in the format ["Chris Cleave","Philippa Gregory","Sarah Pekkanen - I'm getting there, almost! – jonboy Nov 24 '14 at 12:21
Yes and in server side, you can use `json_decode` to get the array back and use it to your need. – Roy M J Nov 24 '14 at 12:32
Thanks for the advice, however when I use the updated code (see original question), the word 'Array' is sent to the database? Is it a problem with my query? – jonboy Nov 24 '14 at 13:08
1

@johnny_s : Yes, if you do not need to separate the authors then you do not need to user decode. Just insert `authors`. – Roy M J Nov 24 '14 at 14:03

JSON Google Books and Ajax

1 Answers1