How can I retrieve a data field with a colon in its key using Cytoscape.js?

After diligently going through the official documentation and following the steps in the tutorial, I have successfully managed to access a node's data field and use it for labeling, as long as the key is a simple string.

However, my data will contain fields with colons in their keys (as can be seen in the code snippet below). How can I adjust my approach to accommodate these keys and expect 'aa' and 'bb' as node labels?

I have tried various approaches such as using single or double quotes, bracket notation, etc., but none of them seem to work. Any suggestions on how to make this example function properly?

<html>
  <head>
    <title>Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.21.2/cytoscape.min.js"></script>
  </head>

  <style>
    #cy {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
    }
  </style>

  <body>
    <div id="cy"></div>
    <script>
      var cy = cytoscape({
        container: document.getElementById("cy"),
        elements: [
          { data: { "id": "a", "skos:prefLabel": "aa" } },
          { data: { "id": "b", "skos:prefLabel": "bb" } },
          { data: {
              id: "ab",
              source: "a",
              target: "b",
            },
          },
        ],
        style: [
          {
            selector: "node",
            style: {
              "shape": "square",
              "background-color": "red",
              "label": "data(skos:prefLabel)" /* What do I put here? I know that replacing this 
                                                 with "data(id)" works for the id field, but I 
                                                 need it to work for the skos:prefLabel field, 
                                                 expecting 'aa' and 'bb' */
            },
          },
        ],
      });
      
      console.log(cy._private.elements[1]._private.data["skos:prefLabel"]); /*  I can see the data 
                                                                                is there and I 
                                                                                can access it 
                                                                                using standard 
                                                                                javascript. */
    </script>
  </body>
</html>

Answer №1

After finding inspiration from a solution to this particular query, I managed to resolve my own issue.

By implementing a function, I successfully accessed the field containing a colon in its key:

// check against code snippet above

style: [
          {
            selector: "node",
            style: {
              "shape": "square",
              "background-color": "red",
              "label": (element) => element.data("skos:prefLabel"), /* this led to 
                                                                    displaying 'aa' 
                                                                    and 'bb' as node 
                                                                    labels. /*
            },

You can also view the functioning codepen here.

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

Using the setInterval function in conjunction with the remoteCommand to create a

I am attempting to create a remote command that calls a bean function and updates a progress bar every 2 seconds until cancelled. The remote command looks like this: <p:remoteCommand id="usedCall" name="queryUsed" onco ...

Finding the index of a column based on a continuous sequence of values can be achieved by following these

Consider this sequence of numbers representing components on a page: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 Every set of 3 numbers makes up a page, with indexing restarting for each new page. Essentially, it follo ...

Tips for integrating angular signature functionality using fabricjs in the latest version of Angular (Angular 11)

After struggling to make paperjs and the angular-signature library work together, I was at my wit's end. But then, I stumbled upon a different solution that proved to be much better. I realized that posting the solution under the appropriate question ...

Attempting to save the result of a fetch call into a variable for the purpose of rendering it as a list in a

I'm attempting to fetch the top 5 NFT collections based on volume and display them in a table format. However, I'm facing an issue where the data is not being mapped correctly and when I click the "get" button, all content on the webpage disappea ...

Splitting JavaScript Arrays: Exploring Efficient Division

I'm attempting to develop a recursive function that divides an array in half until it only consists of lengths of 3 and 2. After dividing, I want to neatly organize all the new arrays into another array. My idea is to find a way to determine the numb ...

Challenges related to streaming processes and uploading to S3 cloud storage

Encountering difficulties with a zero byte stream. Currently, I am resizing an image and sending it as a stream to S3. Initially, when I connect the output to the response, it displays properly. // To retrieve the file remotely var request = http.get(&apo ...

Is it necessary for a TypeScript Library's repository to include the JavaScript version?

Is it necessary to include a JavaScript version of the library along with the Typescript repository for consumers? Or is it best to let consumers handle the compilation process themselves? Or should I consider another approach altogether? ...

Google Chrome successfully transmits two variables with AJAX, whereas Mozilla Firefox does not send them

Having an issue with sending two values through ajax - currently only one value is being sent in Mozilla browser. Ajax script: $('#post_submit').click(function() { event.preventDefault(); var great_id = $("#post_container_supreme:first").attr(" ...

Is it possible to establish multiple connections simultaneously using Stomp?

I have been utilizing the ng2-stomp-service in my Angular application. Is it advisable to set up multiple connections (not just multiple subscriptions)? In the past, I have always seen a single connection being established, with several subscriptions made ...

Tips for managing errors when using .listen() in Express with Typescript

Currently in the process of transitioning my project to use Typescript. Previously, my code for launching Express in Node looked like this: server.listen(port, (error) => { if (error) throw error; console.info(`Ready on port ${port}`); }); However ...

JQuery submit event not triggering object setting

I'm looking to gather input values from a form and store them in an object for an offer. After trying the following code on submit: $(document).ready(function(){ $('#formOffre').on('submit', function(e) { e.preventDefault ...

What sets apart importing components in computed from importing components in dynamic import in Vue.js?

Imagine there are 4 components available on a page or within a component, and the user can utilize them based on their selection by toggling between Input, Image, Video, or Vudio components. There are two ways to lazily load these components: 1) <temp ...

swap out a method within a publicly available npm module

Currently, I am using an API wrapper package that utilizes the request module for making API requests. While this setup works well in most cases, I am facing a situation where I need to use this package in a node-webkit environment and replace the request ...

Wait to fade in until the fade out process is completely finished

When I click on a button, the old box fades out and the new box fades in. However, I want to ensure that the .fadeIn() only happens once the .fadeOut() is complete. This will prevent two containers from being displayed simultaneously. Any suggestions on ...

Unable to retrieve the length of HTMLCollection

I've been having an issue with accessing all the dynamically created list elements (<li>) on my page using getElementsByTagName. The console keeps showing that the length of my li array is 0. Despite going through documentation and examples rel ...

Looking for a way to efficiently add multiple value inputs to a JSON object using jQuery or JavaScript?

Here is the HTML input tag code I am working with: <form id="info"> <input id="A" name="A" type="hidden" nodetye="parent" value="A"> <input id="A1" name="A1" type="text" nodetype="child" value="a1val"> <input id="A2" name ...

A guide on showing POST values from javascript XMLHttpRequest() in php

I have encountered an issue where I am using the XMLHttpRequest() javascript function to send parameters in Json format to another php page, but for some reason $_POST['appoverGUID'] is not receiving the posted values. Below is my Javascript cod ...

How to utilize a Jquery loop, implement a condition, and store the results in

After using dd() in PHP, the array displayed is as follows: 1 [▼0 => "1,18,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,19,20,21,22,23,24"] I need to iterate through the array and o ...

The baffling quirks of variables within a Jquery loop

Unfortunately, I'm struggling to come up with a more fitting title for my question, but I'll do my best to provide a clear explanation of my issue. Here is the code snippet I am working with: let pdfInvoice_sub_template = [ {text: '{ ...

Encountering a script error that reads "TypeError: $ is not defined as a function

I am attempting to send an email using web services in asp.net, utilizing html and sending the information through a jquery ajax function. Below is the html form: <div class="col-md-6"> <h2>DROP ME A LINE</h2> & ...