簡體   English   中英

根據多個條件過濾JSON對象數組

[英]Filter the JSON array of objects according to multiple conditions

我有一個JSON對象數組。 我正在創建一個過濾器來過濾這些數據。

var allData = {
  "items":[
     {
       "orderNumber": 1010,
       "area": "JAPAN",
       "category": "orange",
       "orderApprover": "John Smith"
     },
     {
       "orderNumber": 1020,
       "area": "EM-JAPAN",
       "category": "red",
       "orderApprover": "Paul Smith"
     },
     {
       "orderNumber": 1013,
       "area": "EMEA",
       "category": "orange",
       "orderApprover": "Mike Smith"
     },
     {
       "orderNumber": 1140,
       "area": "APAC",
       "category": "yellow",
       "orderApprover": "Jake Smith"
     }
]}

如果過濾條件為:(查找orderNumbers包含10的項目)

然后輸出:

{
  "items":[
     {
       "orderNumber": 1010,
       "area": "JAPAN",
       "category": "orange",
       "orderApprover": "John Smith"
     },
     {
       "orderNumber": 1020,
       "area": "EM-JAPAN",
       "category": "red",
       "orderApprover": "Paul Smith"
     },
     {
       "orderNumber": 1013,
       "area": "EMEA",
       "category": "orange",
       "orderApprover": "Mike Smith"
     }
]}

如果過濾條件為:(查找orderNumbers包含114的項目)

然后輸出:

{
  "items":[
    {
      "orderNumber": 1140,
      "area": "APAC",
      "category": "yellow",
      "orderApprover": "Jake Smith"
    }
]
}

如果過濾條件為:(查找orderNumber包含10且區域包含EM的項目)

然后輸出:

{
  "items":[
     {
       "orderNumber": 1020,
       "area": "EM-JAPAN",
       "category": "red",
       "orderApprover": "Paul Smith"
     },
     {
       "orderNumber": 1013,
       "area": "EMEA",
       "category": "orange",
       "orderApprover": "Mike Smith"
     }
]}

有沒有辦法實現連續過濾器的連接?

編輯:我想讓它變得一般。

我已將過濾器字段值存儲在狀態對象中。

this.state = {
  orderNumberData: '',
  areaData: '',
  .
  .
  .
  .
}

Array selectedFilters存儲過濾器。

像這樣:

selectedFilters = [orderNumberData, areaData,........]

我如何現在迭代並實現所需的過濾器。 我試圖遍歷selectedFilters數組並檢查包含所需字符串的每個項目。 我不知道如何使用基於selectedFilters數組的JSON對象字段填充空白。 兩者之間需要某種映射。 假設如果selectedFilters [1] = orderNumberData,則orderNumber應該進入該空白。

for(var i=0; i<selectedFilters.length; i++) {
   allData.items.filter(item => item.________.toString().includes(this.state[this.state.selectedFilters[i]]))
}

如果我對JSON字段進行了硬編碼,則此方法有效。

allData.items.filter(item => item.orderNumber.toString().includes(this.state[this.state.selectedFilters[i]]))

您可以通過使用Array#every檢查所有(AND條件)約束,或者如果只需要一些(OR條件),將約束信息移動到過濾器數組和過濾器中,取Array#some

 var data = [{ orderNumber: 1010, area: "JAPAN", category: "orange", orderApprover: "John Smith" }, { orderNumber: 1020, area: "EM-JAPAN", category: "red", orderApprover: "Paul Smith" }, { orderNumber: 1013, area: "EMEA", category: "orange", orderApprover: "Mike Smith" }, { orderNumber: 1140, area: "APAC", category: "yellow", orderApprover: "Jake Smith" }], filters = [ o => o.orderNumber.toString().includes('10'), o => o.area.includes('EM') ], result = data.filter(o => filters.every(fn => fn(o))); console.log(result); 

您可以使用filter,但由於orderNumber是一個整數,因此使用toString將其轉換為字符串,然后使用includes來檢查值是否包含所需的數字

 var allData = { "items": [{ "orderNumber": 1010, "area": "JAPAN", "category": "orange", "orderApprover": "John Smith" }, { "orderNumber": 1020, "area": "EM-JAPAN", "category": "red", "orderApprover": "Paul Smith" }, { "orderNumber": 1013, "area": "EMEA", "category": "orange", "orderApprover": "Mike Smith" }, { "orderNumber": 1140, "area": "APAC", "category": "yellow", "orderApprover": "Jake Smith" } ] } let data = allData.items.filter(item => item.orderNumber.toString().includes('10')); console.log(data) 

您可以進一步微調過濾器回調以集成EM搜索

我們可以通過將過濾條件放在外部數組中來完成動態過濾。 在我的例子中,它是filterCond數組。

然后迭代過濾條件數組並檢查對象屬性的每個值是否與同一索引中的filterCond數組中的數據匹配。

如果條件為false,則遞增計數器,如果計數器大於0則返回false。

應根據對象中鍵的索引放置標准。

 var allData = {"items":[{ orderNumber: 1010, area: "JAPAN", category: "orange", orderApprover: "John Smith" }, { orderNumber: 1020, area: "EM-JAPAN", category: "red", orderApprover: "Paul Smith" }, { orderNumber: 1013, area: "EMEA", category: "orange", orderApprover: "Mike Smith" }, { orderNumber: 1140, area: "APAC", category: "yellow", orderApprover: "Jake Smith" }]}; function getFilteredData(allData, filterCond){ return allData.items.filter((itm) =>{ count = 0; filterCond.forEach((cond, idx) => { count = Object.values(itm)[idx].toString().includes(cond) === false ? count + 1: count; }) return count === 0; }); } console.log("Filtering by orderNumber 10 and area EM"); let filterCond = ["10", "EM"]; console.log(getFilteredData(allData, filterCond)); console.log("Filtering by orderNumber 114"); filterCond = [114]; console.log(getFilteredData(allData, filterCond)); console.log("Filtering by only orderNumber 10"); filterCond = [10]; console.log(getFilteredData(allData, filterCond)); console.log("Filtering by only area APAC"); filterCond = [, "APAC"]; //leaving first criteria blank console.log(getFilteredData(allData, filterCond)); 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM