Get random item from some objects in Array Javascript

Question

Hello Developers I want to get a random data from some objects in Array, but when i want to display it says object [object], that not display the text from object, I tried so many methods but didn't worked any Solution? thanks so much who helps me

let bill = [
 {
   name : "Sandra",
     price : "50$",
     payment : "visa",
     cardnumber:"1234 5678 9012 3456"
 },
  {
   name : "Johnson",
     price : "200$",
     payment : "master",
     cardnumber:"1234 5678 9012 3456"
 },
 ]
 
 let get  = document.querySelector(".get");
 let first =  document.querySelector(".first");
  let second =  document.querySelector(".second");
     let third =  document.querySelector(".third");
      let fourth=  document.querySelector(".fourth");
        
get.addEventListener("click" , ()=> {
let text= bill[Math.floor(Math.random()* bill.length)];

first.innerHTML =  text;
second.innerHTML = text;
third.innerHTML =  text;
fourth.innerHTML =  text;

})

body {
 font-family:"Lato",sans-serif;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}

<body>

<h1>
Get latest invoice
</h1>
<button class="get">Get</button>
<table >
  <tr>
    <th>Name</th>
    <th>Price</th> 
    <th>Payment</th>
            <th>Card Number</th>

  </tr>
  <tr>
    <td class="first"></td>
    <td class="second "></td>
    <td class="third"></td>
            <td class="fourth"></td>

  </tr>
    </table>
    </body>

Fatwa Anugerah · Accepted Answer · 2020-12-10 23:55:26Z

It's return [object] because the text variable is an object, so if you want to get the name you should get by calling its key like first.innerHtml = text.name (to get the name)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <style>
    body {
      font-family: "Lato", sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
  </style>
  <body>
    <h1>Get latest invoice</h1>
    <button class="get">Get</button>
    <table>
      <tr>
        <th>Name</th>
        <th>Price</th>
        <th>Payment</th>
        <th>Card Number</th>
      </tr>
      <tr>
        <td class="first"></td>
        <td class="second"></td>
        <td class="third"></td>
        <td class="fourth"></td>
      </tr>
    </table>
  </body>

  <script>
    let bill = [
    {
      name : "Sandra",
        price : "50$",
        payment : "visa",
        cardnumber:"1234 5678 9012 3456"
    },
      {
      name : "Johnson",
        price : "200$",
        payment : "master",
        cardnumber:"1234 5678 9012 3456"
    },
    ]

    let get  = document.querySelector(".get");
    let first =  document.querySelector(".first");
    let second =  document.querySelector(".second");
    let third =  document.querySelector(".third");
    let fourth=  document.querySelector(".fourth");

    get.addEventListener("click" , ()=> {
    let text= bill[Math.floor(Math.random()* bill.length)];
    console.log(text);

    first.innerHTML =  text.name;
    second.innerHTML = text.name;
    third.innerHTML =  text.name;
    fourth.innerHTML =  text.name;

    })
  </script>
</html>

Collectives™ on Stack Overflow

Get random item from some objects in Array Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related