Making AJAX requests to retrieve data from a JSON database array, then utilizing the CSS visibility property to conceal HTML elements dynamically

Question

Making AJAX requests to retrieve data from a JSON database array, then utilizing the CSS visibility property to conceal HTML elements dynamically

As a enthusiastic beginner, I'm facing a challenge that seems to have no easy solution. Can someone please assist me with this:

How can I assign all the ids from a JSON database to the variable dotContainer, in order to hide all corresponding HTML id elements using the CSS property “dot-hide” (instead of manually specifying each id like "n788" with getElementById).

Essentially, I want the JSON database, which updates dynamically with new id values like n790 or n786, to asynchronously hide the matching dots on my HTML page using the “dot-hide” CSS class.

Here's the JavaScript code:

var dotContainer = document.getElementById("n788"); //THIS TO CONTAIN ALL ID VALUES FROM THE JSON DB
    var dataRequest = new XMLHttpRequest();
    dataRequest.open('get', 'https://raw.githubusercontent.com/sicronerver/sicronerve/master/dbn.json');
    dataRequest.onload = function() {
        var ourData = JSON.parse(dataRequest.responseText);
        //setInterval(function(){ 
            renderdata(ourData);
        //}, 1000);      
    };
dataRequest.send(); {
    }
function renderdata(dataobjectarray) {
        var texString = ""
        for (i = 0; i < dataobjectarray.length; i++) {
            texString += dataobjectarray[i].id + ",";
        }
  dotContainer.insertAdjacentText('afterEnd', texString); //REFERENCE OF JSON ID VALUES TO HIDE HTML ID ELEMENTS
  dotContainer.classList.add("dot-hide");
}

Here's the JSON data:

[{"id":"n787"},{"id":"n788"},{"id":"n789"}]

Here's the HTML structure:

<div class="grid">
  <a id = "n786" class = "dot" href="#786"></a>  
  <a id = "n787" class = "dot" href="#787"></a>  
  <a id = "n788" class = "dot" href="#788"></a>  
  <a id = "n789" class = "dot" href="#789"></a>
  <a id = "n790" class = "dot" href="#790"></a>

Here's the CSS styling:

.dot-hide {
  visibility: hidden;
  opacity: 0;
  transform: scale(.75);
}

.grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(9, 1fr);
}

.dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #777777;
}

.dot:hover {
  background-color: rgb(60, 255, 0);
  opacity: 50%;
}

.dot:active {
  background-color: #ff0000;
  opacity: 50%;
}

#n786 {
  position: relative;
  grid-column: 3 / span 2;
  grid-row: 6 / span 2;
}

#n787 {
  position: relative;
  grid-column: 6 / span 2;
  grid-row: 6 / span 2;
}

#n788 {
  position: relative;
  grid-column: 9 / span 2;
  grid-row: 6 / span 2;
}

#n789 {
  position: relative;
  grid-column: 12 / span 2;
  grid-row: 6 / span 2;
}

#n790 {
  position: relative;
  grid-column: 15 / span 2;
  grid-row: 6 / span 2;
}

If you want to see it in action, check out my CodePen: https://codepen.io/andijonson/pen/gOpEmEQ

Thank you for your help, Andi

javascript html css json ajax

Answer 1

Answer №1

To manipulate the CSS, you need to add and remove certain styles.

Here is a sample code snippet:

var dotContainer = document.getElementById("n788"); 
var dataRequest = new XMLHttpRequest();
dataRequest.open(
  "get",
  "https://raw.githubusercontent.com/sicronerver/sicronerve/master/dbn.json"
);
dataRequest.onload = function() {
  var ourData = JSON.parse(dataRequest.responseText);
  renderdata(ourData);
};
dataRequest.send();

function renderdata(dataobjectarray) {
  document.querySelectorAll("div a").forEach(x => {
    x.className = "dot";
  });
  var texString = "";
  for (i = 0; i < dataobjectarray.length; i++) {
    texString += dataobjectarray[i].id + ",";
  }
  dotContainer.insertAdjacentText("afterEnd", texString);
}

Check out the demo below:

window.onload = () => {
  function fetchData() {
    fetch(
      "https://raw.githubusercontent.com/sicronerver/sicronerve/master/dbn.json"
    )
      .then(res => res.json())
      .then(renderdata);
  }
  function renderdata(data) {
    document.querySelectorAll("div a").forEach(x => {
      x.classList.remove("hide");
    });
    data.forEach(item => {
      const elm = document.getElementById(item.id);
      elm.classList.add("hide");
    });
  }
  function start() {
    setInterval(fetchData, 2000);
  }
  start();
};

.hide {
  visibility: hidden;
  opacity: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(9, 1fr);
}

.dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #777777;
}
  
.dot:hover {
  background-color: rgb(60, 255, 0);
  opacity: 50%;
}
  
.dot:active {
  background-color: #ff0000;
  opacity: 50%;
}

#n786 {
  position: relative;
  grid-column: 3 / span 2;
  grid-row: 6 / span 2;
}

#n787 {
  position: relative;
  grid-column: 6 / span 2;
  grid-row: 6 / span 2;
}

#n788 {
  position: relative;
  grid-column: 9 / span 2;
  grid-row: 6 / span 2;
}

#n789 {
  position: relative;
  grid-column: 12 / span 2;
  grid-row: 6 / span 2;
}

#n790 {
  position: relative;
  grid-column: 15 / span 2;
  grid-row: 6 / span 2;
}

<div class="grid">
    <a id="n786" class="dot" href="#"></a>
    <a id="n787" class="dot" href="#"></a>
    <a id="n788" class="dot" href="#"></a>
    <a id="n789" class="dot" href="#"></a>
    <a id="n790" class="dot" href="#"></a>
</div>

Answer 2

To manipulate the CSS, you need to add and remove certain styles.

Here is a sample code snippet:

var dotContainer = document.getElementById("n788"); 
var dataRequest = new XMLHttpRequest();
dataRequest.open(
  "get",
  "https://raw.githubusercontent.com/sicronerver/sicronerve/master/dbn.json"
);
dataRequest.onload = function() {
  var ourData = JSON.parse(dataRequest.responseText);
  renderdata(ourData);
};
dataRequest.send();

function renderdata(dataobjectarray) {
  document.querySelectorAll("div a").forEach(x => {
    x.className = "dot";
  });
  var texString = "";
  for (i = 0; i < dataobjectarray.length; i++) {
    texString += dataobjectarray[i].id + ",";
  }
  dotContainer.insertAdjacentText("afterEnd", texString);
}

Check out the demo below:

window.onload = () => {
  function fetchData() {
    fetch(
      "https://raw.githubusercontent.com/sicronerver/sicronerve/master/dbn.json"
    )
      .then(res => res.json())
      .then(renderdata);
  }
  function renderdata(data) {
    document.querySelectorAll("div a").forEach(x => {
      x.classList.remove("hide");
    });
    data.forEach(item => {
      const elm = document.getElementById(item.id);
      elm.classList.add("hide");
    });
  }
  function start() {
    setInterval(fetchData, 2000);
  }
  start();
};

.hide {
  visibility: hidden;
  opacity: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(9, 1fr);
}

.dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #777777;
}
  
.dot:hover {
  background-color: rgb(60, 255, 0);
  opacity: 50%;
}
  
.dot:active {
  background-color: #ff0000;
  opacity: 50%;
}

#n786 {
  position: relative;
  grid-column: 3 / span 2;
  grid-row: 6 / span 2;
}

#n787 {
  position: relative;
  grid-column: 6 / span 2;
  grid-row: 6 / span 2;
}

#n788 {
  position: relative;
  grid-column: 9 / span 2;
  grid-row: 6 / span 2;
}

#n789 {
  position: relative;
  grid-column: 12 / span 2;
  grid-row: 6 / span 2;
}

#n790 {
  position: relative;
  grid-column: 15 / span 2;
  grid-row: 6 / span 2;
}

<div class="grid">
    <a id="n786" class="dot" href="#"></a>
    <a id="n787" class="dot" href="#"></a>
    <a id="n788" class="dot" href="#"></a>
    <a id="n789" class="dot" href="#"></a>
    <a id="n790" class="dot" href="#"></a>
</div>

Making AJAX requests to retrieve data from a JSON database array, then utilizing the CSS visibility property to conceal HTML elements dynamically

Answer №1

Similar questions

Implementing method overrides in TypeScript class objects inherited from JavaScript function-based classes

Fill a .js script with moustache.js

Send a POST request with an NSDictionary set in the HTTPBody

Discover the Phillips Hue Bridge within the operational web application on a separate network

What steps can be taken to safeguard data while navigating within the Angular framework?

What is the process for initializing the default/prefilled value of an input element within a mat-form-field when the page loads?

Using Three.js to extract Vertex Colors based on the z-coordinate of Vectors

The geocomplete function is not available for use with autocomplete

What is the best practice for updating state immutably in React using Redux and Redux Toolkit?

Maintain the current application state within a modal until the subsequent click using Jquery

Can someone guide me on the process of opening and closing a Material-UI Dialog within a Meteor/React application?

Tips for updating a URL using data obtained from a JSON response

Even with explicit waiting, Selenium is unable to locate an element on an Ajax page

Where should I place my .json file to integrate Google Sheets data into my Flask web app successfully?

Issues encountered when updating values in MaterialUI's TextField using Formik

Error encountered: Invalid symbol detected ('<') while attempting to parse JSON in an Angular application

The issue of CSS transitions flickering in Internet Explorer

tips for maximizing the safari browser window during automation testing

Using JavaScript and PHP to dynamically update a field based on two input values within a row of a table

Displaying the format when entering a value with react-number-format