search

annotorious / annotorious-openseadragon

An OpenSeadragon plugin for annotating high-res zoomable images
https://annotorious.github.io
BSD 3-Clause "New" or "Revised" License
123 stars 42 forks source link

setAnnotations throws an error #191

Closed AGrinthal closed 8 months ago

AGrinthal commented 8 months ago

I am trying to add annotations programmatically using setAnnotations. Figured it would be pretty straight forward (See sample function below)

End goal is to read Annotations from a database however no sense in getting that to work if I can't get passed the fact that I can't load the annotations from a string to start with.

I get the following error WITHIN the annotorious JS file:

Uncaught TypeError: (e || []).map is not a function at Gc.setAnnotations (annotorious.min.js:24:109535) at LoadNotes2 (index.html:170:14) at HTMLButtonElement.onclick (index.html:43:58)

This is the line in annotorious.min.js that it hangs on:

h(this, "setAnnotations", e=>{ const r = (e || []).map(o=>new Je(o)); this._app.current.setAnnotations(r) }

What am I doing wrong? Thanks Andy

function LoadNotes(){

var RawData = '[{"@context":"http://www.w3.org/ns/anno.jsonld","type":"Annotation","body":[{"type":"TextualBody","value":"Side Building","purpose":"commenting","creator":{"id":"agg","name":"Andy Grinthal "},"created":"2024-01-12T22:41:34.868Z","modified":"2024-01-12T22:41:36.919Z"},{"type":"TextualBody","value":"Auxilary","purpose":"tagging","creator":{"id":"agg","name":"Andy Grinthal "},"created":"2024-01-12T22:41:45.322Z","modified":"2024-01-12T22:41:47.577Z"}],"target":{"source":"http://127.0.0.1:5501/image.png","selector":{"type":"FragmentSelector","conformsTo":"http://www.w3.org/TR/media-frags/","value":"xywh=pixel:26,404,204,130"}},"id":"#b85f14fd-94c2-43a8-b54b-319850be5b3a"}]'

alert(RawData) anno.setAnnotations(RawData)

}

rsimon commented 8 months ago

You can't load a string. You need to supply a JavaScript object. JSON.parse(yourstring) should do the trick.

AGrinthal commented 8 months ago

Ah Rainer Thank you VERY much for your quick reply! You da Man!

Not a JS expert – was thinking an array could be a string as well

Worked like a charm!

Now to get these all loaded into a database!

Thanks much!

A

var RawData = @.***":"http://www.w3.org/ns/anno.jsonld","type":"Annotation","body":[{"type":"TextualBody","value":"Side Building","purpose":"commenting","creator":{"id":"agg","name":"Andy Grinthal "},"created":"2024-01-12T22:41:34.868Z","modified":"2024-01-12T22:41:36.919Z"},{"type":"TextualBody","value":"Auxilary","purpose":"tagging","creator":{"id":"agg","name":"Andy Grinthal "},"created":"2024-01-12T22:41:45.322Z","modified":"2024-01-12T22:41:47.577Z"}],"target":{"source":"http://127.0.0.1:5501/image.png","selector":{"type":"FragmentSelector","conformsTo":"http://www.w3.org/TR/media-frags/","value":"xywh=pixel:26,404,204,130"}},"id":"#b85f14fd-94c2-43a8-b54b-319850be5b3a"}]'

const myNotes = JSON.parse(RawData)

anno.setAnnotations(myNotes)

From: Rainer Simon @.> Sent: Tuesday, January 16, 2024 2:11 PM To: annotorious/annotorious-openseadragon @.> Cc: AGrinthal @.>; Author @.> Subject: Re: [annotorious/annotorious-openseadragon] setAnnotations throws an error (Issue #191)

You can't load a string. You need to supply a JavaScript object. JSON.parse(yourstring) should do the trick.

— Reply to this email directly, view it on GitHub https://github.com/annotorious/annotorious-openseadragon/issues/191#issuecomment-1894355461 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AK3D5EACRDVLKWOFM5LUWLTYO3GGDAVCNFSM6AAAAABB5J6MXKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOJUGM2TKNBWGE . You are receiving this because you authored the thread. https://github.com/notifications/beacon/AK3D5EEP7BRTXFLSQXQCDVDYO3GGDA5CNFSM6AAAAABB5J6MXKWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTTQ5GJAK.gif Message ID: @. @.> >