How to get the output of data attributes into a JavaScript variable?

Question

I have a question about the following. I want to display a logo that changes every week by dynamic data. Below you see the code that generates the dynamic data.

<!-- Paste this where you want the article to appear --> 
<div 
    data-article="programma"
    data-param-teamcode="89678"
    data-param-gebruiklokaleteamgegevens="NEE"
    data-param-aantaldagen="100"
    data-param-eigenwedstrijden="JA"
    data-param-thuis="JA"
    data-param-uit="JA"
    id="clubcode1" data-fields="thuisteamclubrelatiecode" 
></div> 

<!-- This should be pasted once in the <head> for the best performance. If you already have jQuery included skip that script --> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="https://dexels.github.io/navajofeeds-json-parser/js/dist/feed-0.0.1.js"></script> 
<script> 
feed.init({ 
    clientId: "vbvEvjxCyc" 
}); 
</script>

When running the code above it generates three codes. The output of this code gives me: BBBC523, BBBC523 and BBBF79V. I need the first in the list for my other code to display a logo.

My other code looks like this:

<script>
    var link = "https://logoapi.voetbal.nl/logo.php?clubcode=";
    var clubcode2 = document.getElementById('clubcode1');
    var clubcode3 = clubcode2.getAttribute('data-fields');
    

    document.write("<img src=" + "'" + link + clubcode3 + "'");

</script>

The output that I need to display the logo of a football/soccer team looks like this:

document.write('<img src="https://logoapi.voetbal.nl/logo.php?clubcode=BBBC523"')

So I need to make a variable of the output of the dynamic data. From that output I need the first/first-child. I this case BBBC523. Can someone provide me the right steps/code to fix it?

Right now it got this <img src="https://logoapi.voetbal.nl/logo.php?clubcode=thuisteamclubrelatiecode" <="" div=""> but this is not good.

I searched hours on the internet to get a solution, but I'm still not successful. I like to see a solution for my problem.

Sup3rkirby · Accepted Answer · 2022-12-16T15:53:05.810

If you are just trying to display the logo, it seems you're just using the API wrong. I stumbled across this page that shows how to display a logo.

<!-- Paste this where you want the article to appear --> 
<div 
    data-article="clublogo"
    data-fields="clubdata.logo" 
></div> 

<!-- This should be pasted once in the <head> for the best performance. If you already have jQuery included skip that script --> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="https://dexels.github.io/navajofeeds-json-parser/js/dist/feed-0.0.1.js"></script> 
<script> 
feed.init({ 
    clientId: "vbvEvjxCyc" 
}); 
</script>

unfortunately StackSnippets don't work well with including js files like this so this is pasted as regular code

That gives you the logo based on that first clubcode.

However, if for some reason you are actually trying to do something else then you would probably want to use something like

let clubcode = document.querySelectorAll("#clubcode1 .string")[0].innerText

This would get the text inside of that first clubcode list that gets returned and added to the page.

Also, using document.write() is something that should be avoided and typically you would use something like .createElement() and .append() to add new elements to the page dynamically.

EDIT

Here I have a jsfiddle that dynamically loads the logos based on what the API returns to the page. I have included that jsfiddle to show that the code works because Stack Snippets do not seem to like the external <script> includes.

const _ElementAwait = el => {
  return new Promise(resolve => {
    if(document.querySelector(el)) return resolve(document.querySelector(el))

    const observer = new MutationObserver(ml => {
      if(document.querySelector(el)) {
        resolve(document.querySelector(el))
        observer.disconnect()
      }
    })

    observer.observe(document.body, { childList: true, subtree: true })
  })
}

const _AddLogo = i => {
  let clubcode = document.querySelectorAll("#clubcode1 .string")[i].innerText
  
  const logo = document.createElement("img")
  logo.src = `https://logoapi.voetbal.nl/logo.php?clubcode=${clubcode}`
  logo.alt = clubcode
  document.body.append(logo)
}


_ElementAwait("#clubcode1 .string").then(el => {
  _AddLogo(1)
  _AddLogo(3)
})

<!-- Paste this where you want the article to appear --> 
<div 
    data-article="programma"
    data-param-teamcode="89678"
    data-param-gebruiklokaleteamgegevens="NEE"
    data-param-aantaldagen="100"
    data-param-eigenwedstrijden="JA"
    data-param-thuis="JA"
    data-param-uit="JA"
    data-fields="thuisteamclubrelatiecode" 
    id="clubcode1"
    style="display: none"
></div> 

<!-- This should be pasted once in the <head> for the best performance. If you already have jQuery included skip that script --> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="https://dexels.github.io/navajofeeds-json-parser/js/dist/feed-0.0.1.js"></script> 
<script> 
feed.init({ 
    clientId: "vbvEvjxCyc" 
}); 
</script>

To explain a little further, basically the API writes a <table> inside of the <div> we have on the page, with each row containing a different clubcode. And each code is inside of a <span> with a class of string, which we can used to specifically select those elements using .querySelectorAll().

The only other thing to note is that you need to wait for the API to return the codes and write them to the page, which is what the _ElementAwait() function is for. All this does is creates an observer that will return when an element finally exists on a page. It's just one way to do this but I find it to be a handy function for other things as well.

Thanks for taking the time to give an answer. It is possible to get the clublogo trough that way, but this is only useable for the home-team. I want to display the upcoming fixture with the logo's of the teams playing. I have to link the output of data fields with my code. — jelmervalk, Dec 16 '22 at 15:26
@jelmervalk I also outlined how to grab the first **clubcode** based on the method you were currently using. Have you tried this? The catch is that you have to wait until the codes have finished pulling from the API. — Sup3rkirby, Dec 16 '22 at 15:38
@jelmervalk I have edited my answer to fully explain my `let clubcode = document.querySelectorAll("#clubcode1 .string")[0].innerText` answer and included a jsfiddle (*the StackSnippet won't work on here because of the external script include*) that fully demonstrates how this works. — Sup3rkirby, Dec 16 '22 at 15:54
Really appreciate the time and effort you put into this! The solution you provided worked! Thank you very much I was trying multiple things the past two days but nothing worked. You made it work just the way I wanted it. Just one question: _ElementAwait("#clubcode1 .string").then(el => { _AddLogo(1) _AddLogo(3) < With the AddLogo I select which logo I want to display, so AddLogo(1) gives me the first code in the list? Thanks again. — jelmervalk, Dec 16 '22 at 16:24
@jelmervalk Essentially yes. `_AddLogo()` will pull the **clubcode** based on which number you pass in. It technically starts at **0** (the header), but the first team/club logo is **1**. I used **1** and **3** because the first code was repeated. — Sup3rkirby, Dec 16 '22 at 16:36
Thanks for the explanation. I have tried it but I'm facing some problems. Right now when I apply the code you provided on my WordPress, the images show up at the bottom of the page. I like to see them inside the div of the code block where I put the code in. My other issue is that I like to apply classes to the logo's so that I'm able to style them with CSS. Can you help me with that? Or update the JSFiddle? Thanks in advance — jelmervalk, Dec 16 '22 at 19:17
@jelmervalk All of this depends on things like what element (tag name, id, class, etc.) you want the images added to. If you are just inserting a ` — Sup3rkirby, Dec 16 '22 at 20:01
I gave a class to my logo's. So that is fixed, thanks! The element is a div with id="#div_block-15-68" class=".logoplek" — jelmervalk, Dec 16 '22 at 20:22
@jelmervalk [This jsfiddle](https://jsfiddle.net/zp61y3h8/) adds the class you mentioned and appends the logos to a `
` with the id of `div_block-15-68`. — Sup3rkirby, Dec 17 '22 at 14:56
Hello @Sup3rkirby that is the full solution! Thank you very much, very grateful for all the time and effort you put into it. Now I make it totally the way I like it with CSS. — jelmervalk, Dec 19 '22 at 11:41

How to get the output of data attributes into a JavaScript variable?

1 Answers1

EDIT