0

I am using google books api for my search

"https://www.googleapis.com/books/v1/volumes?q="+text

When using:

book.innerHTML = '<input type="button" data-text="' data.items[i].volumeInfo.description +'">';

Some of my results don't work well and I found out that some descriptions have a quote in the start, i.e

"\"There it was, hanging in the sky above the school: the blazing green skull with a serpent tongue, the mark Death Eaters left behind whenever they had entered a building... wherever they had murdered...\" When Dumbledore"

How can I avoid this error?

2 Answers2

0

That's not an error. The data is returned by Google is in a JSON format.

From JSON.org we see that JSON uses double quotes, but not single quotes as markup syntax. The escaped double quotes - which look like this: \" are designed to prevent the string from being closed too early.

When the returned data is run through a JSON parse() command, then it will turn the "string-ified" data into a JavaScript object. Once parsed, then you can access the properties using dot . notation & bracket [variable] notation.

Try something like this:

var searchUrl = 'https://www.googleapis.com/books/v1/volumes?q=' + text;
var response = useYourAjaxMethodHere(searchUrl);

response = JSON.parse(response);

console.log(response.items[0].volumeInfo.description);
Clomp
  • 3,168
  • 2
  • 23
  • 36
  • Doesn't Ajax already fix this? I am creating my buttons in a for loop in the success area. –  Feb 13 '18 at 23:59
  • This is right, but does not fix the HTML escaping issue. JSON strings can still contain quotes and other special characters. – Bergi Feb 14 '18 at 00:04
  • I am getting this error SyntaxError: JSON Parse error: Unexpected identifier "object" –  Feb 14 '18 at 00:12
  • Do you have a working jsfiddle.net or a plnkr.co example of your code, which we could see to help you figure it out? – Clomp Feb 14 '18 at 00:15
  • @Bergi Yes, JSON can contain those items internally. According to the official JSON.org specification (about 1/2 way down the page), the double quote is shown as markup syntax. Single quotes & other special characters aren't listed in the illustrations, but they can be used inside of the text strings. I've updated my answer to clarify it. – Clomp Feb 14 '18 at 00:18
  • No I don't have that but my code is simple and if no "/ then working $.ajax({ url: "https://www.googleapis.com/books/v1/volumes?q="+text, dataType: "json", success: function(data){ for (i = 0; i < data.items.length; i++) { book.innerHTML = ''; } }, type: 'GET' –  Feb 14 '18 at 00:19
  • I've created a jsFiddle for you. See: https://jsfiddle.net/briankueck/ne56xdcb/ The problem is that the double quotes are breaking the data-text attribute. You'll need to replace the double quotes with blank strings, as they aren't needed in those attributes. Button 3 has double quotes in the returned JSON description, which I've had to string replace to fix that button. – Clomp Feb 14 '18 at 00:37
  • I only added this now description = data.items[i].volumeInfo.description.replace(/\"/g,''); And it works now. Thx –  Feb 14 '18 at 00:45
-1

rather than specifying what Special Characters you don't like to be in your string, you can expect what you want instead. For example, if your string must only contains alphabets (a to z and A to Z), numbers, white spaces, and dots, then the following will work good for you

var str = data.items[i].volumeInfo.description
str = str.replace(/[^a-zA-Z0-9 \.,]/g, "");

Explanation:

[a-z] means any character from a-z

[a-zA-Z] means any character from a-z and A-Z

[a-zA-Z0-9] means any character from a-z and A-Z and 0-9

[a-zA-Z0-9 ] means any character from a-z and A-Z and 0-9 and white spaces

[a-zA-Z0-9 \.] means any character from a-z and A-Z and 0-9 and white spaces and dots

If you want to allow some more characters, then simply add them to the logic. For example, if you want to allow underscore '_', then you new regex will be 

 str.replace(/[^a-zA-Z0-9 \._]/g, "");
Saad Zaamout
  • 656
  • 1
  • 5
  • 10