Hey fellow Developers, I'm having trouble getting a random piece of data from some objects in an Array. When I try to display it, all I see is [object Object] instead of the actual text from the object. I've tried various methods but nothing seems to work. Can anyone offer a solution? Thank you so much in advance to anyone who can help.
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>