Skip to main content
Solved

Adding data to labels from the InSidedData object

  • June 21, 2023
  • 1 reply
  • 56 views
R

Hi, 

I am brand new here and am trying a few things out. I have created a widget to add the user name, rank and the current page to a widget in the sidebar. The Javascript works and I can step through the process in debug mode) to see the values added to the labels. But once the page is fully loaded, the values disappear. 

Excuse the code (it was quickly hacked together), but here is what I am using…

 

<label id="userLabel"></label>
<br>
<label id="rankLabel"></label>
<br>
<label id="currPageLabel"></label>

<script>

  const jsonData = window.inSidedData;
  const userLabel = document.getElementById("userLabel");
  const rankLabel = document.getElementById("rankLabel");
  const currPageLabel = document.getElementById("currPageLabel");

  userLabel.textContent = `User: ${jsonData.user.name}`;
  rankLabel.textContent = `Rank: ${jsonData.user.rankName}`;
  currPageLabel.textContent = `Current Page: ${jsonData.page.url}`;
 </script>

I can see that each of the labels is populated correctly by checking the values during debugging and looking at the page as I step through. But on ca complete load, they disappear.

Any ideas?

Best answer by rhall

My mistake. I didn’t consider waiting for the DOM to be fully loaded. For anyone else experiencing this, this is the change I made…

 

  <label id="userLabel"></label>
  <br>
  <label id="rankLabel"></label>
  <br>
  <label id="currPageLabel"></label>

  <script>

  document.addEventListener("DOMContentLoaded", function() {  

    const jsonData = window.inSidedData;
    const userLabel = document.getElementById("userLabel");
    const rankLabel = document.getElementById("rankLabel");
    const currPageLabel = document.getElementById("currPageLabel");

    userLabel.textContent = `User: ${jsonData.user.name}`;
    rankLabel.textContent = `Rank: ${jsonData.user.rankName}`;
    currPageLabel.textContent = `Current Page: ${jsonData.page.url}`;

});

  </script>

 

judahs

1 reply

R
  • rhall
  • Author
  • Expert ⭐️
  • Answer
  • June 21, 2023

My mistake. I didn’t consider waiting for the DOM to be fully loaded. For anyone else experiencing this, this is the change I made…

 

  <label id="userLabel"></label>
  <br>
  <label id="rankLabel"></label>
  <br>
  <label id="currPageLabel"></label>

  <script>

  document.addEventListener("DOMContentLoaded", function() {  

    const jsonData = window.inSidedData;
    const userLabel = document.getElementById("userLabel");
    const rankLabel = document.getElementById("rankLabel");
    const currPageLabel = document.getElementById("currPageLabel");

    userLabel.textContent = `User: ${jsonData.user.name}`;
    rankLabel.textContent = `Rank: ${jsonData.user.rankName}`;
    currPageLabel.textContent = `Current Page: ${jsonData.page.url}`;

});

  </script>

 

Zach B
Terms & ConditionsCookie settingsAccessibility statement