Is it possible to include a class in a .json object for use with CSS?

I am working with a .json object that is displayed using Angular's ng-bind directive:

<p ng-bind-html="paragraph" ng-repeat="paragraph in content.sections[0].pages[1].paragraphs"></p>

Here is the structure of the .json data:

{
  "header":"A",
  "url":"#/us/en/a/b/c/c",
  "paragraphs":[
    "Something something <a class='plink' href='http://blahblah.com' target='_blank'>blah blah</a>."
  ]
}

Although the code is successfully pulled through, the class is not applied to the link. There are no errors in the console.

What would be the best way for me to add a class to that link?

javascriptcssjsonangularjs

Answer №1

To properly format this, make sure to include double quotes with an escape character.

Here is an example:

{
  "title":"A",
  "link":"#/us/en/a/b/c/c",
  "content":[
    "Something something <a class=\"plink\" href='http://blahblah.com' target='_blank'>blah blah</a>."
  ]
}

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

Troubleshooting Problem with Flexbox and Expandable/Accordion Side Menu

I currently have a wrapper class that contains an expandable side menu and main content section positioned side by side. The side menu acts as a filter for the content displayed in the main area, but I am encountering an issue where the rows separate when ...

cssflexboxaccordion

Please submit the form triggered by a JavaScript event

I am looking to create a form that can be submitted when a user presses a key, such as tab or enter, which would cause them to lose focus. Additionally, clicking outside of the text field should also trigger a submit action. However, if the user clicks on ...

javascriptjqueryhtmlforms

Using JQ for parsing deeply nested arrays

Having trouble extracting data from a JSON file: { "operations": [ { "operationName": "GetValue", "batch_size": "2", "orders": [ { "clientId": "7836", "validation_time": { "place": "136", ...

arraysjsonscopenestedjq

Tips on inserting commas between JSON entities found in a .txt file followed by transforming it into a JSON array using Python

When reading a .txt file containing JSON objects without commas separating them, I need to insert commas between the objects and convert them into a JSON list or Array. After attempting to use JSON.loads and encountering a JSON Decode error, I realized th ...

pythonjsonpython-3.x

A guide on protruding a specific triangle within a mesh using three.js

Description: In my three.js project, I have implemented a selection tool that allows users to click and drag over the mesh to color the triangles red. Now, I am looking to create a function that will examine the mesh.geometry.attributes and extrude any tr ...

javascriptnode.jsthree.jswebglblender

What causes the issue when attempting to import multiple CSS files in a Vue.js project using @import more than once?

Currently, I am working on a project that involves one main component and several child components. These components require custom CSS files as well as additional vendor CSS files. A challenge I encountered is that I cannot use the @import "path/to/css/fi ...

javascriptcssvue.js

Traversing through intricate weather data in JSON with AngularJS

I've been diving into learning angularJS and have hit a roadblock when it comes to extracting values from specific objects in a JSON file. Despite searching online for solutions, all I've found are basic examples that don't quite fit my curr ...

javascriptjsonangularjs

What could be causing issues with my Ajax and JavaScript functionality?

While developing a website to search through my python database, I encountered an issue. The non-JavaScript version was functioning flawlessly. However, when attempting to implement AJAX so that the page would not have to be refreshed each time, I faced ...

javascriptajaxformssearch

What is the best way to retrieve JSON data like this?

Exploring My JSON Data In my JSON data, I have a collection of various resources including videos, PDFs, and notes. I'm looking for a way to display each type of resource separately. If anyone can provide assistance without the use of external libra ...

androidjson

`Loading CSS files in Node.js with Express``

My CSS isn't loading properly when I run my HTML file. Even though the HTML is correctly linked to the CSS, it seems like express and node.js are not recognizing it. I find it confusing to understand the articles, tutorials, and stack overflow questio ...

javascripthtmlcssnode.jsexpress

The functionality of jQuery clone is failing when draggable items are used to generate a duplicated version

I'm new to implementing jQuery Draggable functionality and I'm trying to create a drag and drop feature where the drag element is cloned and dropped to a specific location. Here is the code I have so far: $(function () { $('#D ...

javascriptjquery

"Troubleshooting: Why Won't insertAfter Function Work with

I have a p Element that I want to wrap inside a span tag. Then, I need to insert it after another p tag with the id output. Despite my attempts, the insertAfter function is not working as expected. $mytext = $("p#test").html(); $myspan = "<span styl ...

javascriptjqueryhtml

Utilizing jQuery to trigger animations when the form is hovered over or when the input box is

I am currently working on implementing opacity effects for an entire form when it is hovered over or when an input box is clicked while the mouse cursor has moved away from the hover area, ensuring that the effect remains visible. Here is the HTML code I ...

jqueryhtmlcss

Display a paragraph on a webpage based on the user's response being either true or false

I am looking to create an application that consists of 3 questions, each with 2 options: yes and no. Based on the user's response, I want to display a different paragraph. How should I approach this? <!DOCTYPE html> <html> <head> ...

javascripthtmlfunctionbuttonparagraph

Unlocking the power of dynamic stacking and unstacking in bar charts using chart.js

Looking to customize a barchart to toggle between stacked bars and bars behind each other? Keep in mind that the x-axes should be stacked behind each other. useEffect(() => { if (!myChart) return; if (barStack) { ...

javascriptreactjschart.js

Using Vue.js to pass an image URL as a prop for CSS animation by converting it to a CSS variable

Need help with a component that features a hover animation displaying 4 rotating images: animation: changeImg-1 2.5s linear infinite; @keyframes changeImg-1 { 0%, 100% { background-image: url('images/wel1.png'); } 25% { background-image: ur ...

cssvue.js

Activate Span element when image is clicked

To show and hide different span tags when clicking on specific images, you can use the following jQuery script: $("#img1").on('click', function() { $("#div1").fadeIn(); $("#div2,#div3").fadeOut(); }); $("#img2").on('click', functio ...

javascriptjquerycss

Nested JSONObjects in JAVA

I am faced with a challenge involving a JSONObject that is filled with multiple JSONobjects. I need to extract each of these individual objects into their own separate JSONObject so I can work with them independently. However, I am unsure of how to accompl ...

javajsonloops

What is the best way to preserve the allocated space in the DOM while utilizing CSS display:none?

I have explored the functionalities of display:none and visibility:hidden. However, I need to utilize display:none for a specific reason while still preserving the element's allocated space in the DOM to prevent any impact on adjacent elements. Is thi ...

javascriptjquerycss

Is there a way to streamline a function that substitutes certain words?

Looking for ways to simplify my function that shortens words when the label wraps due to different screen resolutions. It seems like it could be more efficient to use arrays for long and short word pairs, but I'm not sure how to implement it. Check ou ...

javascriptjqueryarraysfunctiontruncate