How can we structure relational data in JSON that cannot be easily categorized together?

Hey there, I'm new around here so please bear with me if this question seems basic. Could you point me in the right direction for resources?

Consider this sentence:

"This approach combines the best of both worlds."

Now let's say I want to highlight the bolded text when a user hovers over it. I know how to do that. But what about this sentence:

"Speaking of (in this case quite literally) the devil, ..."

In this instance, the important words are separated, but I still want them highlighted when hovered over. How should I structure this data in a JSON coming from the backend? Which highlights belong together and which don't?

{
 sentence: [
  { word: "This",
    highlight: false
  },
  { word: "approach",
    highlight: false
  },
  ...
  {
   word: "the best of both worlds",
   highlight: true
  }
 ]
}

I'm not sure if this is the best solution. Let's say I have multiple elements in one sentence that need individual highlighting. How can I organize this data in JSON when they can't be directly grouped together?

javascriptjsonmongodbdata-structuresdatabase-design

Answer №1

A great strategy would be to create an array of words and then loop through each word in the array.

{
 highlights: [
  {
      word: "One"
  },
  {
      word: "find joy in the little things"
  }
 ]
}

Answer №2

Revised 2020: I prefer utilizing a list of tuples and processing it in sequence.

[["Talking", true], ["about (literally)", false], ["the evil one", true]]

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

How can I retrieve the identifier in Socket.io?

Is there a way to retrieve the unique Id from the server using socket.io? I attempted using clients[socket.id] = socket; However, I encountered an error stating: connections property is deprecated. use getconnections() method Does anyone have any sugg ...

javascriptnode.jswebsocketsocket.io

Switch the background color of the checkbox div or label with a single click

I have successfully implemented the following code, with one small issue. When I select the checkbox, the background color of the div changes from #fff to #ffe600 as expected. However, after submitting the form and refreshing the page, the background color ...

javascriptjqueryhtmlcsscheckbox

Angular is not providing the anticipated outcome

I'm new to Angular (7) and I'm encountering an issue while trying to retrieve the status code from an HTTP request. Here's the code snippet used in a service : checkIfSymbolExists() { return this.http.get(this.url, { observe: 'res ...

javascriptangulartypescripthttpangular7

Ways to guarantee a distinct identifier for every object that derives from a prototype in JavaScript

My JavaScript constructor looks like this: var BaseThing = function() { this.id = generateGuid(); } When a new BaseThing is created, the ID is unique each time. var thingOne = new BaseThing(); var thingTwo = new BaseThing(); console.log(thingOne.id == ...

javascriptinheritanceprototype

Showing the Datepicker from jQuery right in the middle of the screen

Here's the generated code as default: <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper- clearfix ui-corner-all ui-datepicker-multi ui-datepicker-multi-2" style="width: 34em; position: absolute; left: ...

javascriptjquerycss

Beware, search for DomNode!

I attempted to create a select menu using material-ui and React const SelectLevelButton = forwardRef((props, ref) => { const [stateLevel, setStateLevel] = useState({ level: "Easy" }); const [stateMenu, setStateMenu] = useState({ isOpen ...

javascriptreactjsmaterial-uireact-hooksuse-ref

Struggling with serving static content on NodeJS using Express.js

I set up a basic NodeJS and Express server on my development machine running Windows 10. var express = require('express'); var app = express(); app.use(express.static('app')); app.use('/bower_components', express.static(&apo ...

javascriptnode.jsexpress

Extracting JavaScript variable data to PHP using Ajax technology

I've been trying to save latitude and longitude values in PHP variables, but I'm having trouble. Here is the code I'm using. Can anyone please help me figure out why these values are not being stored in PHP variables: Code: <!DOCTYPE h ...

javascriptphphtmlajax

Is there a problem triggering a link click with another click in jquery?

I'm currently facing a situation where I have implemented a simple tab menu from a resource found here. <ul class="tabs"> <li><a href="#tab1">tab1</a></li> <li><a id="myprofile" href="#tab2">tab2</a>< ...

javascriptjquerytabs

The error message "writeUserData is not defined" is indicating that there is an undefined variable in the react code

I'm still learning React and I've been working on a new function: This is my code in summary: class Signup extends Component { constructor(props) { super(props); } componentDidMount() { } writeUserData = (userId, username, email) => ...

javascriptreactjs

The iOS app icon for React Native is not appearing on the screen

After using XCode 12, I encountered an issue while trying to archive my iOS app. Despite no errors and no issues with app assets, the app icon mysteriously fails to show up. I've tried various solutions, including modifying codes in the pod file and r ...

javascriptiosreact-nativecross-platform

Using PHP to iterate through nested JSON loops

I'm working with a JSON structure that looks like this: [ { “id” : 1, “user_id” : 1, “location” : { “long” : 34.2489234, “lat” : -117.234234, }, “active” : 1 }, { “id” : 2, ...

phpjson

Safari is struggling with the backface visibility feature not functioning as expected

I have implemented a cssflip animation in my code where the element rotates on hover. I included transition and backface-visibilty properties. While it works well on Chrome, I faced issues with Safari. I even added the webkit prefix for Safari browser. `. ...

javascripthtmlcsssafari

WSO2 does not accept the use of the '@' symbol as an input parameter in its methods

Every time I try to input an @ symbol, instead of the expected empty list of roles, I get an error. The function in question is roles(), with the input parameter being the last part of the URL. I specifically need to use the @ symbol as I intend to use ema ...

jsoncurlwso2-api-managerwso2

Tips for Converting a JavaScript Array into JSON

I am dealing with data structured like this: "team": "Yankees" "players": ["jeter", "babe ruth", "lou gehrig", "yogi berra"] In my code, I extract these values from a form where they ar ...

javascriptjsonreactjs

What could be the reason for my inability to retrieve req.user.username with passport.js?

I recently started using passport.js for authentication and I'm encountering an issue. When I log in via Google, the only information available to me through req.user is the user id. I have provided my passport setup code, along with the routes, hopin ...

javascriptnode.jsjsonexpresspassport.js

Copying data from global memory using a local pointer

I am working with a global structure called xbar. Three instances of xbar are allocated using calloc, and then a local pointer is passed to a function where it is assigned to a short array inside the global function. However, when I attempt to use memcpy ...

cpointersdata-structuresglobal-variables

Using jSLint in combination with Angular leads to an unexpected error regarding the variable "$scope"

When performing a jSLint check on my Angular-based app, I encountered an "Unexpected '$scope'" error. To replicate the issue, you can try inputting the code snippet below into jslint.com. I'm puzzled as to why the first function declaration ...

javascriptangularjsjslint

Implementing HTML page authentication with Identity ADFS URL through JavaScript

I have a basic HTML page that displays customer reports using a JavaScript function. The JavaScript makes an ajax call to retrieve the reports from a backend Spring REST API. In the Spring REST API, I have set up an endpoint "/api/saml" for authentication ...

javascripthtmljqueryjquery-pluginsadfs

What is the best way to locate the closest points using their positions?

I have a cluster of orbs arranged in the following pattern: https://i.sstatic.net/9FhsQ.png Each orb is evenly spaced from one another. The code I am using for this setup is: geometry = new THREE.SphereGeometry(1.2); material = new THREE.MeshPhongMateri ...

javascriptmaththree.js