Extract data from Object Array

Question

this is about image to text (OCR) converter using terrasect. Refering to a working codepen demo at here, I managed to extract the text using data.text in my code. May I ask how to extract the numbers (Highlighted in Green) which is 936 and 385 in my case? I have tried using data.html but does not work.

I will aprreciate any help I can get. You will have to upload an image with words for it to work since it is an OCR Reader.

Image with text: https://i.ibb.co/gZLWbjC/dog.jpg

function result(data){
  var r = $(".result");
 console.log(data);
  r.append(
    "<div class='sixteen wide column output'>success" +
    "<div class='ui message'><pre>" + data.text +"</pre></div>" + 
    "</div>"
  );
}

I see that there are many occurrences of bbox 0 0 {greenNumbers}, do you only desire the first occurrence? — Damzaky
– Damzaky, Commented Jan 27, 2023 at 12:25
@Damzaky, hi, yes, the first occurence, bbox 0 0 936 385;, how do i extract the numbers from the html as text? I used data.html to extract the html as text in the console. I have added a text example above — Maximus Su
– Maximus Su, Commented Jan 27, 2023 at 14:14

Damzaky · Accepted Answer · 2023-01-27 14:32:49Z

1

You could use DOMParser to parse the HTML and then get the page_1 element and then get its title. After that, you could parse the title to get the numbers by selecting the numbers between bbox and ;, then you could take the third and fourth number.

Modify the function result(data) to this:

function result(data){
  var r = $(".result");
 
  const parser = new DOMParser();
  const parsed = parser.parseFromString(data.html, 'text/html');
  const firstOccurrence = parsed.getElementById('page_1').getAttribute('title');
  const numbers = firstOccurrence.split('bbox ')[1].split(';')[0].split(' ');

  console.log("green numbers:", numbers[2], numbers[3])
  
  r.append(
    "<div class='sixteen wide column output'>success" +
    "<div class='ui message'><pre>" + data.text +"</pre></div>" + 
    "</div>"
  );
}

Here is the working fork codepen.

answered Jan 27, 2023 at 14:32

Damzaky

10.9k2 gold badges14 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Extract data from Object Array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related