Question

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

我的API：localhost:8000/api/notifications

这给了我下面的结果。我可以将其显示在清单中，但是如何sort/filter来显示这些数据，以便当我单击按钮Date：olderst或department：FGO时使用选择器或按钮并进入新屏幕或同一屏幕。

我是否必须创建可以过滤所有API的新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
    }
]

Answer 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变量后，您将看到新的过滤对象数组。

Answer 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;
        });
}

按日期和部门排序/过滤

2 个答案: