Can't extract JSON from API response - Google Cloud Vision API (Node.js library)

Question

This is probably a simple JSON issue but I am struggling to extract data from the text detection response using the Google Vision API on Node.js

The response I am getting looks like JSON data to me (here is a sample of the raw response as a string):

[{webDetection: null, logoAnnotations: [], context: null, safeSearchAnnotation: null, 
fullTextAnnotation: {pages: [{blocks: [{blockType: TEXT, paragraphs: [{words: [{symbols:
 [{boundingBox: {normalizedVertices: [], vertices: [{x: 568, y: 0}, {x: 601, y: 1}, {x: 
600, y: 84}, {x: 567, y: 83}]}, property: {detectedBreak: null, detectedLanguages: 
[{languageCode: en, confidence: 0}]}, confidence: 0.9900000095367432, text: B}, 
{boundingBox: {normalizedVertices: [], vertices: [{x: 615, y: 0}, {x: 640, y: 0}, {x: 639,
 y: 83}, {x: 614, y: 83}]}, property: {detectedBreak: null, detectedLanguages: 
[{languageCode: en, confidence: 0}]}, confidence: 1, text: a}, {boundingBox: 
{normalized...

However when I try and parse it as follows, I am getting an error.

const jsonData = response[0].fullTextAnnotation;
const textAnnotation = JSON.parse(jsonData);

Error: SyntaxError: Unexpected token o in JSON at position 1

Any ideas what I am doing wrong and how I can extract the data correctly?

Update

I've tried reading the data as arrays and maps which doesn't work with regular for loops, but does if I use an int loop eg

Doesn't work:

const fullTextAnnotation = response[0].fullTextAnnotation;
  const pages = fullTextAnnotation.pages;
  const allBlocks = [];
  for (var page in pages) {
    const blocks = page.blocks;
    for (var block in blocks) {
      allBlocks.push(block);
    }
  }

Does work:

const fullTextAnnotation = response[0].fullTextAnnotation;
  const pages = fullTextAnnotation.pages;
  const allBlocks = [];
  for (var i = 0; i<pages.length;i++) {
    const blocks = pages[i].blocks;
    for (var j = 0; j<blocks.length;j++) {
      allBlocks.push(blocks[j]);
    }
  }

When I use the regular for loop I get an error: Property 'blocks' does not exist on type 'string'.

When I use the int loop, the blocks property is properly shown as: const blocks: vision.protos.google.cloud.vision.v1.IBlock[]

This is something I can deal with I guess, however I am definitely curious what is going wrong, because it took a lot of guessing to find the workaround.

Answer 1

It's hard to tell without the full string, and without the previous code, but it looks like you might be grabbing the fullTextAnnotation before you are parsing the string. I would suggest trying to parse response or response[0], and then assign fullTextAnnotation to the textAnnotation variable.

If you could share a console.log() of response, response[0], the respective JSON.parses() for those, and then possibly the unparse response[0].fullTextAnnotation, that would definitely help us diagnose the issue!