实现前端数据按用户ID过滤：方法、局限与最佳实践

1. 前端数据过滤需求与现有问题

在web应用开发中，常见需求之一是根据当前登录用户显示其专属数据。例如，一个职位发布平台可能需要用户只能看到自己发布的职位列表，而不是所有用户发布的职位。

在提供的代码示例中，通过 $.getJSON 从API获取了所有职位列表数据，然后使用 $.each 遍历这些数据，动态生成HTML表格行并添加到页面中。问题在于，这种方法默认会显示所有数据，而没有根据当前用户的身份进行筛选。

核心需求是：在将每个职位信息渲染到HTML表格之前，判断该职位的 createdByUserID 字段是否与当前登录用户的ID匹配。如果不匹配，则跳过该条数据的渲染。

2. 前端过滤的实现方法

为了实现这一目标，我们需要在 $.each 循环内部，tblRow 变量构建之前，加入一个条件判断。

实现步骤：

立即学习“前端免费学习笔记（深入）”；

1. 获取当前登录用户ID： 假设当前登录用户的ID可以通过特定的HTML元素获取，例如

   。我们可以使用jQuery来获取这个ID。

   var currentUserID = $('[data-ms-member="id"]').text(); // 从HTML元素中获取用户ID
   // 确保 currentUserID 是一个有效的字符串或数字，根据实际情况可能需要类型转换

2. 插入过滤逻辑： 在 $.each 循环内部，tblRow 变量声明之前，添加一个 if 语句来比较当前用户ID和数据项中的创建者ID。

   $(function() {
       var records = [];
       // 获取当前登录用户ID
       var currentUserID = $('[data-ms-member="id"]').text(); 
   
       $.getJSON('https://db-ommitted-for-privacy?tableName=JobListings&fields=company,logo,img,companyDescription,role,roleDescription,location,link,createdByUserID,dateAdded&view=AllListings', function(data) {
           $.each(data.records, function parseJSON(i, { fields: f }) {
               // 确保 currentUserID 和 f.createdByUserID 具有相同的类型进行比较
               if (currentUserID && currentUserID != f.createdByUserID) {
                   return true; // 跳过当前循环迭代，处理下一条数据
               }
   
               var tblRow = "" + 
                   "" + 
                       "
   " + 
                           "
   " + 
                               "" + 
                                   "" + 
                                       "@@##@@" + 
                                   "     " + 
                                       f.company + "   |   " + f.role + 
                                   "     " + f.location +"" + 
                               "" + 
                               "
   " + 
                                   "@@##@@" +
                                   "
   " + 
                                   "
   Posted: " + f.dateCreated + "   |   Status: " + f.status + "
   " + 
                                   "
   About this role:
   " + 
                                   "
   " + f.roleDescription + "
   " + 
                                   "
   About " + f.company + ":
   " + 
                                   "
   " + f.companyDescription + "
   " + "
   " + 
                                   "Apply   " + 
                                   "
   " + "
   " + 
                               "
   " + 
                           "
   " + 
                       "