在 EJS 中对对象数组进行排序

Question

我在对 EJS 中的对象数组进行排序时遇到了问题（从 Node.js 中的服务器发送）。对象数组由多个课程及其详细信息组成。下面是 joinLecture.js 文件，其中对象数组被发送到 EJS。 res.render("lectureSearch", {searchData: mappedResults});。这完全可以正常工作，并且可以在 EJS 中显示（没有排序功能）。下面是在对对象数组进行排序时给我带来麻烦的 EJS。

<h2>Current Lectures</h2>
        <table id="lecturesTable">
            <thead>
                <tr>
                    <th>School</th>
                    <th>Location</th>
                    <th>Class</th>
                    <th>Subject</th>
                    <th>Teacher</th>
                    <th>Date</th>
                    <th>Start Time</th>
                    <th>End Time</th>
                    <th>Additional Notes</th>                               
                </tr>
            <thead>
            <tbody id="lecturesTableData">
                <% if(data.length){ %>
                    <% function loadTableData(data){ %>
                       <% for(let i = 0; i < data.length; i++) { %>
                            <tr>
                                <td><%=data[i].school%></td>
                                <td><%=data[i].location%></td>
                                <td><%=data[i].class%></td>
                                <td><%=data[i].subject%></td>
                                <td><%=data[i].teacher_name%></td>
                                <td><%=data[i].date%></td>
                                <td><%=data[i].start_time%></td>
                                <td><%=data[i].end_time%></td>
                                <td><%=data[i].additional_notes%></td>
                            </tr>
                        <% } %>
                    <% } %>
                <% }else{ %>
                    <tr>
                        <td>No Lessons</td>
                    </tr>
                <% } %>
            </tbody>
        </table>
        <button onclick="sortSchoolAscending()">School Ascending</button>
        <button onclick="sortSchoolDescending()">School Descending</button>
        <button onclick="sortLocationAscending()">Location Ascending</button>
        <button onclick="sortLocationDescending()">Location Descending</button>
</body>
<script> 
    function sortSchoolAscending(){
        data.sort(function(a, b) {
            return parseFloat(b.school) - parseFloat(a.school);
        });
        loadTableData(data);
    }

    function sortSchoolDescending(){
        data.sort(function(a, b) {
            return parseFloat(a.school) - parseFloat(b.school);
        });
        loadTableData(data);
    }

    function sortLocationAscending(){
        data.sort(function(a, b) {
            return parseFloat(b.school) - parseFloat(a.school);
        });
        loadTableData(data);
    }

    function sortLocationDescending(){
        data.sort(function(a, b) {
            return parseFloat(a.school) - parseFloat(b.school);
        });
        loadTableData(data);
    }
</script>

课程 table 在没有 loadTableData EJS 功能的情况下运行良好，但没有排序。以下是我收到的错误。

Uncaught ReferenceError: data is not defined at sortSchoolAscending at HTMLButtonElement.onclick.

我已经尝试解决这个问题很长时间了，非常感谢您的帮助。谢谢。

Answer 1

它不适用于该功能。再次删除它，所以你只有：

    <tbody id="lecturesTableData"> 
        <% if(data.length){ %>
           <% for(let i = 0; i < data.length; i++) { %>
                <tr>
                    <td><%=data[i].school%></td>
                    <td><%=data[i].location%></td>
                    <td><%=data[i].class%></td>
                    <td><%=data[i].subject%></td>
                    <td><%=data[i].teacher_name%></td>
                    <td><%=data[i].date%></td>
                    <td><%=data[i].start_time%></td>
                    <td><%=data[i].end_time%></td>
                    <td><%=data[i].additional_notes%></td>
                </tr>
            <% } %>
        <% }else{ %>
            <tr>
                <td>No Lessons</td>
            </tr>
        <% } %>
    </tbody>

这将在页面加载时填充 table。然后可以根据 table 行本身进行排序。

您的 script 标签可以按如下方式对 table 行进行排序：

const tbody = document.getElementById("lecturesTableData");

// Helper function for sorting on a given column, with a given comparator
function tableSort(colNum, cmp) {
  let rows = [...tbody.rows];
  rows.sort((a, b) => cmp(a.cells[colNum].textContent, b.cells[colNum].textContent))
    .map(row => tbody.appendChild(row));
}

function sortSchoolAscending() {
  tableSort(0, (a, b) => a - b); // assuming that school column has number representations
}

function sortSchoolDescending() {
  tableSort(0, (a, b) => b - a); // assuming that school column has number representations
}

function sortLocationAscending() {
  tableSort(1, (a, b) => a.localeCompare(b)); // assuming that location column has strings
}

function sortLocationDescending() {
  tableSort(1, (a, b) => b.localeCompare(a)); // assuming that location column has strings
}

td, th { border: 1px solid }
th { background: lightgray }
table { border-collapse: collapse }
button { margin: 5px }

<table>
  <thead>
    <tr>
      <th>School</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody id="lecturesTableData">
    <tr>
      <td>122</td>
      <td>Madrid</td>
    </tr>
    <tr>
      <td>30</td>
      <td>Paris</td>
    </tr>
    <tr>
      <td>99</td>
      <td>Brussels</td>
    </tr>
  </tbody>
</table>
<button onclick="sortSchoolAscending()">School Ascending</button>
<button onclick="sortSchoolDescending()">School Descending</button>
<button onclick="sortLocationAscending()">Location Ascending</button>
<button onclick="sortLocationDescending()">Location Descending</button>

我在这里假设学校列有数字表示，位置列有不是数字表示的字符串。这样您就可以看到对 tableSort 的调用有何不同，并根据需要进行调整。

在 EJS 中对对象数组进行排序

Sorting array of objects in EJS

html

javascript

arrays

object

ejs