从 Array Javascript 中的某些对象中获取随机项答案

【问题标题】：Get random item from some objects in Array Javascript从 Array Javascript 中的某些对象中获取随机项
【发布时间】：2021-03-22 10:16:00
【问题描述】：

您好开发人员我想从数组中的某些对象中获取随机数据，但是当我想显示它时说对象 [object]，它不显示来自对象的文本，我尝试了很多方法但没有奏效任何解决方案？非常感谢帮助我的人

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>

【问题讨论】：

标签： javascript html css arrays object

【解决方案1】：

返回 [object] 因为 text 变量是一个对象，所以如果你想得到名字你应该通过调用它的键来得到 like first.innerHtml = text.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>

【讨论】：