How to Get Random Name and Image from JSON for each Object in JavaScript-CodePudding

I want to create a random ruffling game where it randomly chooses the name and image of a certain user.

My problem is how would every image be linked to that specific user when it starts ruffling randomly, the image and name may not match.

I want it such that every object in the json array that has a name and an image to be matched when picking randomly

How can i do that?

here is my code:

script.js
    const ENTRANTS = [{
      name:"John",
      image:"images/sun-rise.jpg"
      },{
        name:"Jack",
        image:"images/tree-736885__480.jpg"
      },{
        name:"Jane",
        image:"images/pexels-anjana-c-674010.jpg"
      }];
     
    const rollEl = document.querySelector(".roll");
    const rollAgainEl = document.querySelector(".roll-again");
    const namesEl = document.querySelector(".names");
    const imageEl = document.querySelector(".image");
    const winnerEl = document.querySelector(".winner");
    const boxEl = document.querySelector(".text-box");
    const winnerTextELEMENT = document.querySelector(".winnerText");
    const values = Object.values(ENTRANTS)
    winnerTextELEMENT.classList.add('hide')
    function randomName() {
      const rand = Math.floor(Math.random() * values.length);
      const name = values[rand].name;
      const image = values[rand].image;
    
      namesEl.innerText = name;
      imageEl.src = image
    }
    
    function rollClick() {
      boxEl.classList.remove("hide")
      rollEl.classList.add("hide");
      rollAgainEl.classList.add("hide");
      winnerEl.classList.add("hide");
      namesEl.classList.remove("hide");
    
      setDeceleratingTimeout(randomName, 10, 30);
    
      setTimeout(() => {
        namesEl.classList.add("hide");
        winnerEl.classList.remove("hide");
        rollAgainEl.classList.remove("hide");
    
        const winner = namesEl.innerText;
        winnerEl.innerText = winner;
        winnerTextELEMENT.classList.remove('hide')
      }, 4000);
    }
    
    function setDeceleratingTimeout(callback, factor, times) {
      const internalCallback = ((t, counter) => {
        return () => {
          if (--t > 0) {
            setTimeout(internalCallback,   counter * factor);
            callback();
          }
        };
      })(times, 0);
    
      setTimeout(internalCallback, factor);
    }

index.html:

<!DOCTYPE html>
<html lang="en" >
  
<head>
  <meta charset="UTF-8">
  <title>Ruffle</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="./style.css">
</head>

<body>

  <button  onclick="rollClick()">Start</button>


    <span >WINNER</span>
    <div >
      <img  src=""/>
      <div >

    </div>
      <div ></div>
    </div>

    <button  onclick="rollClick()"> Start Again</button>
    <script  src="./script.js"></script>

</body>

</html>

CodePudding user response：

Create Two Arrays using the names and images value. Use Math.Floor(Math.random * array.length)For both of the arrays to get a random value that you can use an index value for the array so you get a random index value. Then use the random number/index value to get the random name and picture you want.

CodePudding user response：

You should convert the JSON into a array then do MyArray[Math.round((Math.random()*number) * 10000) / 10000] and you may get the image and name that you want selected this is all in Javascript of course