Assigning value from JSON attribute to innerHTML of an element

Question

Hi guys i got an <a> tag which look like this:

<a class="js-swatch-item-link swatch__item-inner-image" data-layer-click="{"event":"interaction","interaction":{"category":"colorPattern","action":"Select","label":"DARK GREY MELANGE","value":"DARK GREY MELANGE"}}}" href="#">DARK GREY MELANGE</a>

I am trying to fetch the value of the interaction section of the JSON string, and then afterwards assigning this value to the innerHTML of the <a> tag.

My JavaScript code looks like this:

var SWATCH_COLOR_LINK = '.swatch.colorpattern a';
var swatchColorLink = document.querySelectorAll(SWATCH_COLOR_LINK);
var swatchColorTitle = JSON.parse(swatchColorLink.getAttribute('data-layer-click')).interaction.value;

for (var i = 0; i < swatchColorLink.length; i++) {
    swatchColorLink[i].innerHTML = swatchColorTitle;
}

The function is giving me the following error: swatchColorLink.getAttribute is not a function

However if I try to just select the first element like this: document.querySelectorAll(SWATCH_COLOR_LINK)[0]

The function works fine and sets the right value from the JSON string to the innerHTML of the <a> tag.

Im guessing im doing something wrong in my loop to go over all <a> tags and assigning them the value of their JSON string.

Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Sebastian Simon, Apr 03 '18 at 12:47
That’s confusing. In the `for` loop, you know that `swatchColorLink` contains a collection of elements, in the `.getAttribute` line, however, you don’t…? — Sebastian Simon, Apr 03 '18 at 12:52

score 1 · Accepted Answer · edited Apr 03 '18 at 12:50

Your mistake is laying in swatchColorLink.getAttribute(). Because your swatchColorLink's value is a NodeList which is returned from querySelectorAll() method. When you are doing document.querySelectorAll(SWATCH_COLOR_LINK)[0] you are getting the first element from this NodeList so in this case your swatchColorLink is the single node.

var SWATCH_COLOR_LINK = '.swatch.colorpattern a';
var swatchColorLink = document.querySelectorAll(SWATCH_COLOR_LINK);


for (var i = 0; i < swatchColorLink.length; i++) {
    var swatchColorTitle = JSON.parse(swatchColorLink[i].getAttribute('data-layer-click')).interaction.value;
    swatchColorLink[i].innerHTML = swatchColorTitle;
}

I send you kisses ! Thanks for your answer, this helped a lot. — Mikkel Fennefoss, Apr 03 '18 at 12:59

score 1 · Answer 2 · edited Apr 03 '18 at 13:05

Correct your JSON string {"event":"interaction","interaction":{"category":"colorPattern","action":"Select","label":"DARK GREY MELANGE","value":"DARK GREY MELANGE"}}}

you should escape the quotes " in the string and remove the last }

<a class="js-swatch-item-link swatch__item-inner-image" data-layer-click="{\"event\":\"interaction\",\"interaction\":{\"category\":\"colorPattern\",\"action\":\"Select\",\"label\":\"DARK GREY MELANGE\",\"value\":\"DARK GREY MELANGE\"}}"href="#">DARK GREY MELANGE</a>

Assigning value from JSON attribute to innerHTML of an element

2 Answers2