jquery 如何将JSON数据放入表中？

cpjpxq1n 于 2023-01-04 发布在 jQuery

关注(0)|答案(2)|浏览(158)

我的JS文件中有一个函数可以从PostgreSQL表中带回数据，我想在HTML文件的表中显示结果，但是现在我得到了一个未定义的响应。
JS功能：

function ReadAllResult(json, status, req)
{    
    let html ="";
    for (let s in json)
    {
        let student =json[s];
        html += `Name: ${student.Name} `;
        html += `Age: ${student.Age} Course: ${student.Course}<br/>`;
    }
    $("#all-students tbody").append(`<tr><td>${html.Name}</td><td>${html.Age}</td><td>${html.Course}</td></tr>`);
}

超文本：

<!DOCTYPE html>
<html>
  <head>
    <title>See All Products Page</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <form action="" method="POST">
        <input id="read-button" type="button" value="See all Products" />    
    </form>

    <!-- <div id ="all-students"> </div> -->
    <table id="all-students">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Course</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Loading..</td>
            </tr>
        </tbody>
    </table>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script src="js/readstudentspage.js"></script>
  </body>
</html>`

jquery

来源：https://stackoverflow.com/questions/74993770/how-do-i-put-json-data-into-a-table

2条答案

按热度按时间

4nkexdtk1#

您的代码存在一些问题：
我用了你的逻辑修正了它。

function ReadAllResult(json) {
  let html = {};
  $("#all-students tbody tr:first-child").remove();
  for (let i=0; i < json.length; i++) {
    html = json[i];
    
    $("#all-students tbody").append(`<tr><td>${html.Name}</td><td>${html.Age}</td><td>${html.Course}</td></tr>`);
  }
  
}
const data = [ {Name : 'name1', Age:24, Course:1}, {Name : 'name2', Age:25, Course:1} ];
ReadAllResult(data);

<!DOCTYPE html>
<html>

<head>
  <title>See All Products Page</title>
  <meta charset="utf-8" />
</head>

<body>
  <form action="" method="POST">
    <input id="read-button" type="button" value="See all Products" />
  </form>

  <!-- <div id ="all-students"> </div>  -->
  <table id="all-students">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Course</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Loading..</td>
      </tr>
    </tbody>
  </table>

  <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  <script src="js/readstudentspage.js"></script>
</body>

</html>`

赞(0）回复(0）举报 2023-01-04

hrirmatl2#

假设您使用$. getJSON或其他AJAX从一个文件中获取JSON，则数据在到达函数时是一个对象
同样假设JSON如下所示
第一个月
我们可以有这样一个过程

const process = data => {
  $("#all-students tbody").html(
    data.map(({Name,Age,Course}) => `<tr><td>${Name}</td><td>${Age}</td><td>${Course}</td></tr>`).join('')
  );
};

// $.getJSON("students.json",process); // uncomment this and remove the lines below
const data = JSON.parse(`[{"Name": "Joe", "Age" : 18, "Course": "JS101"}, {"Name": "Brad", "Age" : 17, "Course": "Algebra"}]`)
process(data)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="POST">
    <input id="read-button" type="button" value="See all Products" />
  </form>

  <!-- <div id ="all-students"> </div>  -->
  <table id="all-students">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Course</th>

      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Loading..</td>
      </tr>
    </tbody>
  </table>

赞(0）回复(0）举报 2023-01-04

我来回答

jquery 如何将JSON数据放入表中？

2条答案

相关问题

热门标签

最新问答