Retrieving the JSON value from a data attribute and then locating the corresponding JSON key in a designated element within the DOM

Question

Retrieving the JSON value from a data attribute and then locating the corresponding JSON key in a designated element within the DOM

I have an HTML element that contains a data attribute:

<a href="#" data-trigger="{ "rem": "albatros", "ap":1 }'">Remove</a>
<div data-container>
    <p>lorem ipsum<p>
    <p data-rem></p>
</div>

1.

Sometimes (but not always) a value is sent in the data-trigger attribute:

I am trying to select all elements that have the attribute data-trigger:

document.querySelectorAll(['data-trigger']).forEach(function (trigger, index) {

Then, for each of these trigger elements, I aim to retrieve the DOM and JSON value and parse it:

dom = trigger;   
value = JSON.parse(trigger.getAttribute('data-trigger'));

Although I successfully retrieve the DOM reference, I always end up with a null value.

Does using getAttribute trigger a reevaluation in the DOM?

Iterating through the data-container, I search for elements that contain attributes corresponding to one of the keys found in the JSON.parse result. I then proceed to set the value of these elements to the value of the key.

For instance:

<p data-rem>albatros</p>

javascript json

Answer 1

Answer №1

The current roadblock for your script is the incorrect selector inside querySelectorAll().

Make sure it is '[data-trigger]', not ['data-trigger'].

Once you correct this, you will successfully retrieve all elements with a data-trigger attribute. However, keep in mind that the string in the data-trigger attribute as it stands will not be parsed as a JavaScript object. To fix this, replace quotes with double quotes and vice versa to create a valid JSON string that can be parsed like this:

<a href="#" data-trigger='{"rem": "albatros"}'>Remove</a>

JSON.parse(elem.getAttribute('data-trigger')) // where elem refers to the DOM element above

Although the purpose of your script is not entirely clear, assuming you are looking to find DOM elements with 'data-'+foundKey equal to foundVal, you can use the following selector:

document.querySelectorAll('[data-'+foundKey+'="'+foundVal+'"]').forEach(function(el, i){
  console.log(el, i);
})

However, based on your current elements, this selector will not return any results because there is no element like:

<x data-rem="albatros"></x>

Here's an example that demonstrates the concept applied to your code:

document.querySelectorAll('[data-trigger]').forEach(function (trigger, index) {
  const triggerProp = JSON.parse(trigger.getAttribute('data-trigger')),
        foundKey = Object.keys(triggerProp)[0],
        foundVal = triggerProp[Object.keys(triggerProp)[0]],
        targets = document.querySelectorAll('[data-'+foundKey+']').forEach(function(target, index) {
    console.log(target, 'key:'+foundKey, 'val:'+target.getAttribute('data-'+foundKey));
  });
})

<a href="#" data-trigger='{"rem": "albatros"}'>Remove</a>
<div data-container>
    <p>lorem ipsum<p>
    <p data-rem="test"></p>
</div>

Keep in mind that this example works because the data-trigger value is valid JSON. To prevent failure, consider adding a try/catch block to test if the value is valid JSON before parsing. Alternatively, you can use a library that handles relaxed JSON parsing.

Answer 2

The current roadblock for your script is the incorrect selector inside querySelectorAll().

Make sure it is '[data-trigger]', not ['data-trigger'].

Once you correct this, you will successfully retrieve all elements with a data-trigger attribute. However, keep in mind that the string in the data-trigger attribute as it stands will not be parsed as a JavaScript object. To fix this, replace quotes with double quotes and vice versa to create a valid JSON string that can be parsed like this:

<a href="#" data-trigger='{"rem": "albatros"}'>Remove</a>

JSON.parse(elem.getAttribute('data-trigger')) // where elem refers to the DOM element above

Although the purpose of your script is not entirely clear, assuming you are looking to find DOM elements with 'data-'+foundKey equal to foundVal, you can use the following selector:

document.querySelectorAll('[data-'+foundKey+'="'+foundVal+'"]').forEach(function(el, i){
  console.log(el, i);
})

However, based on your current elements, this selector will not return any results because there is no element like:

<x data-rem="albatros"></x>

Here's an example that demonstrates the concept applied to your code:

document.querySelectorAll('[data-trigger]').forEach(function (trigger, index) {
  const triggerProp = JSON.parse(trigger.getAttribute('data-trigger')),
        foundKey = Object.keys(triggerProp)[0],
        foundVal = triggerProp[Object.keys(triggerProp)[0]],
        targets = document.querySelectorAll('[data-'+foundKey+']').forEach(function(target, index) {
    console.log(target, 'key:'+foundKey, 'val:'+target.getAttribute('data-'+foundKey));
  });
})

<a href="#" data-trigger='{"rem": "albatros"}'>Remove</a>
<div data-container>
    <p>lorem ipsum<p>
    <p data-rem="test"></p>
</div>

Keep in mind that this example works because the data-trigger value is valid JSON. To prevent failure, consider adding a try/catch block to test if the value is valid JSON before parsing. Alternatively, you can use a library that handles relaxed JSON parsing.

Answer 3

Answer №2

This JSON String is not considered valid.

<a href="#" data-trigger="{'rem': 'albatros'}">Remove</a>

If you want a valid JSON String, try this:

<a href="#" data-trigger='{"rem": "albatros"}'>Remove</a> <!-- Remember to use double quotes for JSON -->

document.querySelectorAll("[data-trigger]").forEach(function (trigger, index) {
  var val = JSON.parse(trigger.getAttribute('data-trigger'));
  for( key in val){ //Loop through (JSON-)Object
  setInnerElements(val[key], key);
  }
  
});

function setInnerElements(val,key){

document.querySelectorAll("[data-container] > [data-"+ key +"]").forEach(function (el, index) {
  el.innerHTML = val;
  })
}

<a href="#" data-trigger='{"rem": "albatros", "foo":"test1", "bar":"test2"}'>Remove</a>
<div data-container>
<p>lorem ipsum<p>
<p data-rem></p>
<p>lorem ipsum<p>
<p data-foo></p>
<p>lorem ipsum<p>
<p data-bar></p>
</div>

Answer 4

This JSON String is not considered valid.

<a href="#" data-trigger="{'rem': 'albatros'}">Remove</a>

If you want a valid JSON String, try this:

<a href="#" data-trigger='{"rem": "albatros"}'>Remove</a> <!-- Remember to use double quotes for JSON -->

document.querySelectorAll("[data-trigger]").forEach(function (trigger, index) {
  var val = JSON.parse(trigger.getAttribute('data-trigger'));
  for( key in val){ //Loop through (JSON-)Object
  setInnerElements(val[key], key);
  }
  
});

function setInnerElements(val,key){

document.querySelectorAll("[data-container] > [data-"+ key +"]").forEach(function (el, index) {
  el.innerHTML = val;
  })
}

<a href="#" data-trigger='{"rem": "albatros", "foo":"test1", "bar":"test2"}'>Remove</a>
<div data-container>
<p>lorem ipsum<p>
<p data-rem></p>
<p>lorem ipsum<p>
<p data-foo></p>
<p>lorem ipsum<p>
<p data-bar></p>
</div>

Retrieving the JSON value from a data attribute and then locating the corresponding JSON key in a designated element within the DOM

Answer №1

Answer №2

Similar questions

Importing an external JSON file into a ChartJs chart

remove leading spaces in JavaScript after retrieving data from database

Contrasting images showcasing Headless vs Non Headless settings in Puppeteer

Don't give up on the entire task just because one promise was rejected

"Make a phone call following the completion of an HTTP

What is the best way to extract the value from a resolved Promise?

Efficiently update a multi-step form using Ajax and jQuery by adding new content without needing to reload the

Error: When attempting to send a message in a different channel, an undefined property 'send' is encountered causing a TypeError

Creating dynamic values in data-tables using Vuetify

Is there a way to keep my fixed button at a consistent size while zooming on mobile devices?

What is the correct way to encode an HTML string in JavaScript?

In search of javascript implementations of the pubhubsubbub protocol that are open source

The JSONObject encountered an exception as it could not find a value for the

What is the process for loading a font file in Vue.js and webpack?

Height of the Accordion List

The functionality is verified in Postman, however, it is not functioning properly when accessed from my client's end

Steps to create an iframe that opens in a new window

Showcasing articles in an XML feed according to specific keywords found in the headline

When receiving a GET response after a server crash

When attempting to change an image using JavaScript, the image fails to load