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.
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