Load annotations from a JSON file with Annotator.js

Seeking assistance with incorporating annotations into my website using annotator.js. I have been encountering difficulties getting it up and running successfully.

My goal is to display highlighted annotations upon page load, but I keep receiving a JavaScript error message stating that ".slice is not a function." Despite numerous attempts to modify the JSON object, I have not been able to resolve this issue.

I have thoroughly reviewed the documentation provided by annotator.js, yet still have not been able to make any progress in loading annotations on my site.

Here is what I currently have implemented:

<div id="annon">
    Lorem ipsum
</div>

<script>
var annotator = $('#annon').annotator();
annotator.annotator('loadAnnotations', 
{"rows": 
[{
  "quote": "Lorem",
  "ranges":
      [{
          "endOffset": 5,
          "startOffset": 0,
          "end": "/",
          "start": "/"
      }],
  "text": "Lorem", "id": 1
 }],
"total": 1}
</script>
javascriptjsonannotations

Answer №1

It seems like there may be an issue with the object you are passing into the annotator function. In order for it to work correctly, you should pass in an array of annotation objects using the format specified here: Here's an example:

    var annotator = $('#annon').annotator();
    annotator.annotator('loadAnnotations', [{
        "quote": "Lorem",
        "ranges": [{
            "endOffset": 5,
            "startOffset": 0,
            "end": "/",
            "start": "/"
        }],
        "text": "A comment.",
        "id": 1
    }]);

However, it appears that annotator is encountering issues with the XPath that you have set in the start/end ranges. You will need to adjust the ranges correctly in order for the text to highlight properly.

Answer №2

After some experimentation, I successfully got the highlighted word to illuminate. In my browser testing, I manipulated the structure of the object to fix the RANGE property. Here is the solution I came up with:

annotator.loadAnnotations([{
"id": "39fc339cf058bd22176771b3e3187329",
"created": "2011-05-24T18:52:08.036814",
"updated": "2011-05-26T12:17:05.012544",
"text": "This is a comment",                
"quote": "Lorem",         
"ranges": 
[{
  "start": "/div[1]",         
  "end": "/div[1]",           
  "startOffset": 17,                    
  "endOffset": 22                     
}]

I'm puzzled as to why the startOffset is 17 when LOREM is the first word in the div.

If someone could shed some light on that, I would greatly appreciate it!

UPDATE I have figured out the issue with 17-22. It was caused by the spaces within the div that were automatically added by my IDE when I moved them to new lines.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue arises when attempting to transfer data collection object from Jquery ajax Method to MVC Controller resulting in null object being displayed

I am attempting to pass a data object to an MVC controller using a jQuery method. When I click the submit button, a data object is created in a JavaScript method. The data object is not null in the Ajax method. However, when I try to pass it to the MVC con ...

javascriptjqueryajaxasp.net-mvcasp.net-mvc-4

Solving Issues with URL Parameters and AJAX

My JSP page has a JavaScript function called loadData() that is triggered when the page loads. This function makes an AJAX request to a servlet in order to retrieve data and return the necessary HTML content to display on the page. I am trying to call thi ...

javascriptajaxjspservletsparameters

Is it possible to programmatically hide the Textarea and submit button for each row in a PHP-generated database table?

After spending a considerable amount of time on this project, I'm looking to incorporate a JavaScript effect (hide/unhide) into a basic submit form. Although the functionality is successful, it seems to be limited to only one row in the database tabl ...

javascriptphphtmlmysql

Is it possible to verify if each value satisfies a condition within a Javascript function?

I am currently working on a project using Vue.js and Laravel where I have a data list named "questions." My goal is to iterate through this list and check if the answer value for each question is not null. If any question has a null answer, I want to preve ...

javascriptlaravelformsvue.jsloops

Inserting an item into a list

Looking for assistance with this particular scenario: { "EekvB3cnwEzE":{ "name":"hi", }, "Brv1R4C6bZnD":{ "name":"yup", }, "kRwRXju6ALJZ":{ "name":"okay", } } I'm attempting to store each of these objects in an array. Howe ...

javascriptjqueryangularjs

Tips for successfully uploading FormData files using Axios: Resolving the TypeError of "file.mv is not a function"

When transmitting a file from one server to another using Axios, I am facing an interesting scenario where one server is an app backend and the other is a blockchain server. The destination for the file transmission is set up as follows: router.post("/a ...

javascriptnode.jsexpressaxiosform-data

Got a value of `false` for an attribute `closable` that is not meant to be a

Here's the code snippet I have: import { Modal } from "antd"; import styled from "styled-components"; export const StANTModal = styled(Modal)` & .ant-modal-content { border-radius: 20px; overflow: hidden; } `; And ...

javascriptreactjstypescriptantdstyled-components

Having trouble retrieving the attribute of an appended element in jQuery?

I am facing an issue where I am unable to retrieve the ID-attribute of an element that has been appended into my HTML. Each time I try, the result is always 'undefined'. How can I resolve this problem? jQuery('form#formular').append(&a ...

javascriptjqueryappendattr

Server headers in Node.js

As a newcomer to web development, I am currently delving into the world of node.js to create an app that involves retrieving data via REST and implementing search and sort functionalities. However, I've hit a roadblock when it comes to understanding h ...

javascriptnode.jsexpressweb

An in-depth guide on incorporating an Editor into a Reactjs project

Currently, I am working with Reactjs and using the Nextjs framework. My goal is to integrate the "Tinymce" editor into my project and retrieve the editor value inside a formsubmit function. How can I achieve this? Below is my current code: const editor = ...

javascriptreactjsnext.js

Iterate over an array of objects to showcase the property values within an HTML tag using JavaScript

I am a beginner in JavaScript and I am currently working on an exercise. My goal is to iterate through an array of objects within another object, map the index values from one object to the id values in another object, and based on that, perform a certain ...

javascript

The error message "The 'int' object does not have a 'replace' attribute when loading initial data in Django" was encountered

Looking to understand how to load initial data into a model using loaddata. Here is an example of my JSON structure: [ { "model": "locations.location", "pk": 1, "fields": { "name": "Cafe" } } ] This is what my model.py looks l ...

pythonjsondjango

Is there a way to dynamically apply styles to individual cells in a React Table based on their generated values?

I'm having trouble customizing the style of a table using react table, specifically changing the background color of each cell based on its value. I attempted to use the getProps function in the column array as suggested by the react table API documen ...

javascriptreactjsreact-tablereact-table-v6

Mock asynchronous calls in a React component using Jest

I am new to using jest/enzyme and I am facing a challenge in mocking a call to an asynchronous function that returns a Promise. This call is within a react component's componentDidMount method. The purpose of the test is to verify that componentDidMo ...

javascriptunit-testingreactjsjestjsenzyme

Avoid displaying passwords in source code

Currently, I am working on developing a password manager web application similar to LastPass. One issue that has come to my attention is the visibility of variables containing decrypted passwords in the source code after retrieving them from a database u ...

javascriptphppassword-manager

Having trouble displaying JSON response in Firefox console with Django

Code Snippet: from .views import get_data app_name = 'javascript' urlpatterns = [ path('', views.index, name='index'), path('api/data', get_data, name='api-data'), ] Views.py: from django.http ...

pythonjqueryjsonajaxdjango

Open the link and input the text into the text box?

Suppose I have the following JavaScript code: <script language="javascript" type="text/javascript"> function addText() { var newText = document.myForm.inputText.value; document.myForm.description.value += newText; } </script> I want t ...

phpjavascripthtmlforms

Adjusting the X-Axis Labels on a Scatterplot using Chart.js 2

I'm working with Chart.js 2 to create a scatter plot using Epoch timestamps for the x coordinates and integers for the y coordinates. Is there a way to customize the x-axis labels on the graph to show dates in a more readable format? Update: I am cur ...

javascriptchart.jschart.js2

Encountering an unexpected or invalid token in line 1 after reinstallation of Windows can be a frustrating experience

Yesterday, my JavaScript file was running smoothly. However, after reinstalling Windows and Node, I'm encountering an error when trying to run the same JavaScript file today. $ node index.js C:\Users\<user-name>\Google Drive&bsol ...

javascriptnode.js

Is it advisable to incorporate vue-resource in Vuex actions?

I am currently working on a web application that retrieves airport data from the backend. To manage states and data sharing, I am utilizing Vuex. My dilemma is whether to load the airports in my Vuex actions or within a method of my Vue instance which will ...

javascriptvue.jsvue-resourcevuex