按日期和部门排序/过滤

Posted 2023-02-22

【中文标题】按日期和部门排序/过滤

【英文标题】：Sort/filter by date and department

【发布时间】：2019-11-28 02:37:19

【问题描述】：

我是 react-native 的新手。基本上，我创建了一个网站，用于存储每个部门的通知/公告帖子。

我的 API：localhost:8000/api/notifications

这给了我以下结果。我可以将它显示到平面列表中，但我如何sort/filter 这个数据，以便当我单击按钮 Date:olderst or department: FGO using picker or button 并查看新屏幕或同一屏幕时。

我是否必须创建可以过滤所有这些的新 API

[
    
        "id": 9,
        "title": "UTAR FIRST NOTIFICATION USING VOYAGER PLUGIN",
        "description": "<p>THIS IS TO TEST IF THIS WORKED IF I ADD PLUGIN</p>",
        "image": "[\"notifications\\\\July2019\\\\CJXexAyUxJEe053uVSqk.png\",\"notifications\\\\July2019\\\\8BED9ewaEH1EHqC4hh3T.jpg\"]",
        "attachment": "[\"download_link\":\"notifications\\\\July2019\\\\3c8wC2IxHz19cH2oTKUA.docx\",\"original_name\":\"Persona.docx\",\"download_link\":\"notifications\\\\July2019\\\\tvZdM6rSsmMn35mTTK5W.docx\",\"original_name\":\"proof.docx\"]",
        "department": "FGO",
        "link": null,
        "created_at": "2019-07-18 10:11:00",
        "updated_at": "2019-07-18 10:17:27",
        "deleted_at": null
    ,
    
        "id": 11,
        "title": "WELCOME TO FIRST FYP PROJECT",
        "description": "<p>THIS IS MY FYP PRO</p>",
        "image": null,
        "attachment": "[]",
        "department": "DCI",
        "link": null,
        "created_at": "2019-07-19 06:21:39",
        "updated_at": "2019-07-19 06:21:39",
        "deleted_at": null
    
]

【问题讨论】：

重新获取带有排序和过滤变量的api，否则你会遇到分页问题。

最好在服务器上处理分页和排序，这样您在处理长列表时就不必将所有内容加载到内存中。您可以在客户端和订单上处理此问题，但前提是存在较小的数据子集并且您知道您将拥有一个最大值

现在在我的控制器中我把 $notifications = App\Notification::all();我应该更改为 $notifications = App\Notification::paginate(10);

【参考方案1】：

无需在您的 API 中执行此操作。你可以在你的Js代码中完成，

在您的情况下，可以使用以下方法进行排序（通过 created_at），

myData.sort((a, b) => 
  let dateA = new Date(a.created_at),
    dateB = new Date(b.created_at);
  return dateA - dateB;
);

在此之后，如果您将对象数组打印到控制台，您将看到它是按 created_at 变量排序的。

也可以这样过滤（按部门），

const newArray = myData.filter(function (item) 
  return item.department === 'FGO';
);

打印newArray 变量后，您将看到新的过滤对象数组。

【讨论】：

但是这会发生在我的同一个屏幕上还是我需要传递到不同的屏幕

您可以在同一个屏幕上执行此操作，无需另一个屏幕。只需在从服务器获取数据后执行此操作即可。

好的，我下周试试这个，因为我会在考试后继续做，如果它有效，我会告诉你

【参考方案2】：

您可以使用Array.prototype.filter method:

newList = yourList.filter(function (el) 
  return el.department=== 'FGO';
);

另一种通用的过滤方法

function filterArray(column,value)
    newList = yourList.filter(function (el) 
          return el.column === value;
        );