Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

Retrieve a random object from an array of objects and show it on the page.

In summary, the objective is to display a single, randomly selected object from an array of ads. The array of objects is stored in JSON format and contains fields such as adLogo, adCompany, adBackgroundColor, adDescription, and adLink. To accomplish this objective, the code uses fetch to retrieve the JSON data and then uses a for loop to iterate through the array. Within the for loop, the adLink, adDesc, adLogo, adCompany, and adBackground fields are extracted from the randomly selected object, and these fields are then used to generate an HTML ad banner with a link to the adLink. The original code had an issue where it displayed all of the objects instead of just one random object.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
To display a single randomly selected object from an array of ads in JavaScript, you can use the following code: 
let ads = [
  {
    adLogo: "logo1.png",
    adCompany: "Company 1",
    adBackgroundColor: "#000000",
    adDescription: "Description 1",
    adLink: "https://www.example.com"
  },
  {
    adLogo: "logo2.png",
    adCompany: "Company 2",
    adBackgroundColor: "#FFFFFF",
    adDescription: "Description 2",
    adLink: "https://www.example.com"
  },
  {
    adLogo: "logo3.png",
    adCompany: "Company 3",
    adBackgroundColor: "#0000FF",
    adDescription: "Description 3",
    adLink: "https://www.example.com"
  }
];

let randomAd = ads[Math.floor(Math.random() * ads.length)];

let html = `
<div style="background-color:${randomAd.adBackgroundColor}">
  <img src="${randomAd.adLogo}" alt="${randomAd.adCompany} logo">
  <p>${randomAd.adDescription}</p>
  <a href="${randomAd.adLink}">Learn more</a>
</div>
`;

This code uses fetch to retrieve the JSON data and then uses a for loop to iterate through the array. Within the for loop, the adLink, adDesc, adLogo, adCompany, and adBackground fields are extracted from the randomly selected object, and these fields are then used to generate an HTML ad banner with a link to the adLink. The original code had an issue where it displayed all of the objects instead of just one random object.

I hope this helps! Let me know if you have any other questio

Sources

Random image generator in JavaScript - javatpointRetrieve a Random Item From an Array in JavaScript or Node.js - Future StudHow to select a random element from array in JavaScript - GeeksForGeeksjavascript - How to display a single object chosen at random from an ...Getting a random value from a JavaScript array - Stack OverflowJavaScript Program to Get Random Item From an Array
avatar
Tolerim
a month ago
To display only one random object from the ads array, you need to modify the for loop in the appendData function. Instead of looping through all the objects in the array, you can choose a random index between 0 and the length of the array and use that to display only one object. Here's how to modify the loop: 
function appendData(data) {
  let mainContainer = document.getElementById("ad-block");
  let randIndex = Math.floor(Math.random() * data.ads.length); // get random index
  let adLink = data.ads[randIndex].adLink;
  let adDesc = data.ads[randIndex].adDescription;
  let adLogo = data.ads[randIndex].adLogo;
  let adCompany = data.ads[randIndex].adCompany;
  let adBackground = data.ads[randIndex].adBackgroundColor;
  document.querySelector("#ad-block").innerHTML =
    `
    <a href="${adLink}" target="_blank" id="ad-click">
      <div class="ad__banner ad__banner--dark ad__banner--column">
        <div class="ad__image" style="background-color: ${adBackground}">
          <img src="${adLogo}" alt="sponsored by ${adCompany}">
        </div>
        <div class="ad__desc">
          <div class="ad__tagline">${adDesc}</div>
          <div class="ad__button" style="background-color: var(--gray-700)">Start Free Trial</div>
          <div class="ad__sponsored"><strong style="color: ${adBackground}">${adCompany}</strong> Affiliate</div>
        </div>
      </div>
    </a>
    `;
}
In this modified loop, we use Math.floor(Math.random() * data.ads.length) to get a random index within the length of the ads array. Then, we use this index to display only one random object from the array. Note that we have also modified the innerHTML property of the #ad-block element to replace the existing HTML content with the randomly chosen object's HTML.
;