表中对象数组的显示不起作用

Question

Html Code Html 代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>
    Some Mysterious People
  </title>
  <!-- <link rel="stylesheet" href="style.css" type="text/css"> -->
  <script src="dataService.js"></script>
  <script src="populateTable.js"></script>
</head>

<body>
  <h1>What dorm were these people in?</h1>
  <table>
    <thead>
      <th>Name</th>
      <th>Gender</th>
      <th>Address</th>
      <th>Age</th>
      <th>Ph #</th>
      <th>Picture</th>
    </thead>
    <tbody id="rows">
    <!-- <tr>
        <td>
        Vic Norman
        </td>
        <td>
        M
        </td>
        <td>
        1818 Very-very Wealthy Street
        </td>
        <td>
        54
        </td>
        <td>
        (616) 555-3776
        </td>
        <td>
        <img src="" />
        </td>
    </tr> -->
    </tbody>
  </table>

  <button  onclick="addDataRows()">Fetch Data</button>
</body>

</html>

JavaScript Code DataService.js JavaScript 代码 DataService.js

    class DataService {
    constructor() {
      }
    
    data = [{
      name: "Clarence",
      gender: "Nonbinary",
      address: "1234 1st Grand Rapids, MI",
      age: 45,
      phoneNumber: "123456790"},
      { name: "Kwami",
      gender: "Male",
      address: "6432 5th Grand Rapids, MI",
      age: 21,
      phoneNumber: "9782603214"
      }]
    getData(numRecords = null){
      if(numRecords==null){
        return this.data
      }
      else{
        var i;
        const returndata = [];
        for(i =0; i <numRecords; i++){
          returndata.push(this.data[i]); 
        }
        return returndata;
      }
      }
}

module.exports.DataService = DataService;
//ds = new DataService();
//console.log(ds.getData(1));

populateTable.js populateTable.js

var ss = require("./dataService.js");
var ds =new ss.DataService();

function addDataRows() {
    ds = new ss.DataService();
    results = ds.getData();
    var html = "";
    for (var i = 0; i < results.length; i++) {
    html+="<tr>";
    html+="<td>"+results[i].name+"</td>";
    html+="<td>"+results[i].gender+"</td>";
    html+="<td>"+results[i].address+"</td>";
    html+="<td>"+results[i].age+"</td>";
    html+="<td>"+results[i].phoneNumber+"</td>";
    html+="</tr>";
    }
    document.getElementById("rows").innerHTML = html;
}

I having trouble with displaying an array created in DataService.js.我在显示在 DataService.js 中创建的数组时遇到问题。 I am unable to display that on the dom.我无法在 dom 上显示它。 I attempt to be able to display this using the add rows function in populateTable.js.我尝试使用 populateTable.js 中的添加行 function 来显示它。 I am wondering if the issue lies in how I am using the document.getElementById function.我想知道问题是否在于我如何使用 document.getElementById function。

Answer 1

I tried to use 'document.getElementById("rows").innerHTML = html;'我尝试使用 'document.getElementById("rows").innerHTML = html;' and found it ok.并发现没问题。 So I think you can make sure there is no error in F12 console.所以我认为你可以确保 F12 控制台没有错误。 Debug your code is also a nice way to find the problem.调试代码也是发现问题的好方法。

Wish you a good day!祝你有个美好的一天！

表中对象数组的显示不起作用

问题描述

1 个解决方案

解决方案1
0 2020-10-10 05:58:46

表中对象数组的显示不起作用

问题描述

1 个解决方案

解决方案1 0 2020-10-10 05:58:46

解决方案1
0 2020-10-10 05:58:46