根据对象数组中的属性过滤掉非空和未定义的项目

Question

如何通过对字符串类型的属性进行条件检查来过滤对象数组中的项目

我的 JSON 是这样的

{"startIndex":2,"selections":[{"type":"SKU","colIndex":0,"values":[{"value":1231319,"bgcolour":"","textcolour":"","type":1,"colIndex":0,"rowIndex":2,"selected":false},{"value":1231320,"bgcolour":"","textcolour":"","type":1,"colIndex":0,"rowIndex":3,"selected":false},{"bgcolour":"","textcolour":"","type":0,"colIndex":0,"rowIndex":4,"selected":false},{"value":1231322,"bgcolour":"","textcolour":"","type":1,"colIndex":0,"rowIndex":5,"selected":false},{"value":1231323,"bgcolour":"","textcolour":"","type":1,"colIndex":0,"rowIndex":6,"selected":false},{"value":1231324,"bgcolour":"","textcolour":"","type":1,"colIndex":0,"rowIndex":7,"selected":false},{"value":1231325,"bgcolour":"","textcolour":"","type":1,"colIndex":0,"rowIndex":8,"selected":false},{"bgcolour":"","textcolour":"","type":0,"colIndex":0,"rowIndex":9,"selected":false},{"bgcolour":"","textcolour":"","type":0,"colIndex":0,"rowIndex":10,"selected":false},{"bgcolour":"","textcolour":"","type":0,"colIndex":0,"rowIndex":11,"selected":false},{"bgcolour":"","textcolour":"","type":0,"colIndex":0,"rowIndex":12,"selected":false},{"bgcolour":"","textcolour":"","type":0,"colIndex":0,"rowIndex":13,"selected":false},{"bgcolour":"","textcolour":"","type":0,"colIndex":0,"rowIndex":14,"selected":false},{"bgcolour":"","textcolour":"","type":0,"colIndex":0,"rowIndex":15,"selected":false},{"bgcolour":"","textcolour":"","type":0,"colIndex":0,"rowIndex":16,"selected":false},{"bgcolour":"","textcolour":"","type":0,"colIndex":0,"rowIndex":17,"selected":false},{"bgcolour":"","textcolour":"","type":0,"colIndex":0,"rowIndex":18,"selected":false},{"bgcolour":"","textcolour":"","type":0,"colIndex":0,"rowIndex":19,"selected":false}]},{"type":"QTY","colIndex":1,"values":[{"value":2,"bgcolour":"","textcolour":"","type":1,"colIndex":1,"rowIndex":2,"selected":false},{"value":1,"bgcolour":"","textcolour":"","type":1,"colIndex":1,"rowIndex":3,"selected":false},{"value":-1,"bgcolour":"","textcolour":"","type":1,"colIndex":1,"rowIndex":4,"selected":false},{"value":0,"bgcolour":"","textcolour":"","type":0,"colIndex":1,"rowIndex":5,"selected":false},{"value":1,"bgcolour":"","textcolour":"","type":1,"colIndex":1,"rowIndex":6,"selected":false},{"value":2,"bgcolour":"","textcolour":"","type":1,"colIndex":1,"rowIndex":7,"selected":false},{"value":3,"bgcolour":"","textcolour":"","type":1,"colIndex":1,"rowIndex":8,"selected":false},{"value":1,"bgcolour":"","textcolour":"","type":1,"colIndex":1,"rowIndex":9,"selected":false},{"value":"Some more products under a merged cell just to be annoying","bgcolour":"","textcolour":"","type":0,"colIndex":1,"rowIndex":10,"selected":false},{"value":"product ID","bgcolour":"","textcolour":"","type":0,"colIndex":1,"rowIndex":11,"selected":false},{"value":333444,"bgcolour":"","textcolour":"","type":1,"colIndex":1,"rowIndex":12,"selected":false},{"value":333445,"bgcolour":"","textcolour":"","type":1,"colIndex":1,"rowIndex":13,"selected":false},{"value":333446,"bgcolour":"","textcolour":"","type":1,"colIndex":1,"rowIndex":14,"selected":false},{"value":333447,"bgcolour":"","textcolour":"","type":1,"colIndex":1,"rowIndex":15,"selected":false},{"value":333448,"bgcolour":"","textcolour":"","type":1,"colIndex":1,"rowIndex":16,"selected":false},{"value":333449,"bgcolour":"","textcolour":"","type":1,"colIndex":1,"rowIndex":17,"selected":false},{"bgcolour":"","textcolour":"","type":0,"colIndex":1,"rowIndex":18,"selected":false},{"value":333451,"bgcolour":"","textcolour":"","type":1,"colIndex":1,"rowIndex":19,"selected":false}]},{"type":"Name","colIndex":2,"values":[{"value":"BRONZE HAT","bgcolour":"","textcolour":"","type":0,"colIndex":2,"rowIndex":2,"selected":true},{"value":"GOLD HAT","bgcolour":"","textcolour":"","type":0,"colIndex":2,"rowIndex":3,"selected":true},{"value":"unknown?","bgcolour":"","textcolour":"","type":0,"colIndex":2,"rowIndex":4,"selected":true},{"value":8,"bgcolour":"","textcolour":"","type":1,"colIndex":2,"rowIndex":5,"selected":true},{"value":"this data is a bit messy%","bgcolour":"","textcolour":"","type":0,"colIndex":2,"rowIndex":6,"selected":true},{"value":"Trouser A","bgcolour":"","textcolour":"","type":0,"colIndex":2,"rowIndex":7,"selected":true},{"value":"Trouser B","bgcolour":"","textcolour":"","type":0,"colIndex":2,"rowIndex":8,"selected":true},{"bgcolour":"","textcolour":"","type":0,"colIndex":2,"rowIndex":9,"selected":true},{"bgcolour":"","textcolour":"","type":0,"colIndex":2,"rowIndex":10,"selected":true},{"value":"quantity required","bgcolour":"","textcolour":"","type":0,"colIndex":2,"rowIndex":11,"selected":true},{"value":2,"bgcolour":"","textcolour":"","type":1,"colIndex":2,"rowIndex":12,"selected":true},{"value":1,"bgcolour":"","textcolour":"","type":1,"colIndex":2,"rowIndex":13,"selected":true},{"value":-1,"bgcolour":"","textcolour":"","type":1,"colIndex":2,"rowIndex":14,"selected":true},{"bgcolour":"","textcolour":"","type":0,"colIndex":2,"rowIndex":15,"selected":true},{"value":1,"bgcolour":"","textcolour":"","type":1,"colIndex":2,"rowIndex":16,"selected":true},{"value":2,"bgcolour":"","textcolour":"","type":1,"colIndex":2,"rowIndex":17,"selected":true},{"value":3,"bgcolour":"","textcolour":"","type":1,"colIndex":2,"rowIndex":18,"selected":true},{"value":1,"bgcolour":"","textcolour":"","type":1,"colIndex":2,"rowIndex":19,"selected":true}]}]}

我正在使用以下打字稿，但仍然返回所有项目

 var selected_skus = this.selectionSettings.selections.filter(e => e.type === 'SKU' && e.values.filter(x=>x.value?.length >0 ))
      .map(obj => obj.values);
    console.log(selected_skus);

如何确保 x.value 不为空的项目返回

Answer 1

您不能以这种方式在过滤器内部使用过滤器。您希望按 SKU 进行过滤，然后 为每个匹配的 skus 集 映射 values 数组。此外，.length 属性存在于字符串中，因此我们将其转换为字符串进行检查。

json.selections.filter(e => e.type === 'SKU') // first get an array of all SKU sets
    .map(s => ({...s,  values:s.values // map each set of SKUs, transforming the values array within
                 .filter(x=>x.value?.toString().length >0 )})) // filter that property exists && is is not empty

let json = {"startIndex":2,"selections":[{"type":"SKU","colIndex":0,"values":[{"value":1231319,"bgcolour":"","textcolour":"","type":1,"colIndex":0,"rowIndex":2,"selected":false},{"value":1231320,"bgcolour":"","textcolour":"","type":1,"colIndex":0,"rowIndex":3,"selected":false},{"bgcolour":"","textcolour":"","type":0,"colIndex":0,"rowIndex":4,"selected":false},{"value":1231322,"bgcolour":"","textcolour":"","type":1,"colIndex":0,"rowIndex":5,"selected":false},{"value":1231323,"bgcolour":"","textcolour":"","type":1,"colIndex":0,"rowIndex":6,"selected":false},{"value":1231324,"bgcolour":"","textcolour":"","type":1,"colIndex":0,"rowIndex":7,"selected":false},{"value":1231325,"bgcolour":"","textcolour":"","type":1,"colIndex":0,"rowIndex":8,"selected":false},{"bgcolour":"","textcolour":"","type":0,"colIndex":0,"rowIndex":9,"selected":false},{"bgcolour":"","textcolour":"","type":0,"colIndex":0,"rowIndex":10,"selected":false},{"bgcolour":"","textcolour":"","type":0,"colIndex":0,"rowIndex":11,"selected":false},{"bgcolour":"","textcolour":"","type":0,"colIndex":0,"rowIndex":19,"selected":false}]}]}
let selected_skus = json.selections.filter(e => e.type === 'SKU').map(s => ({...s, values:s.values.filter(x=> x.value?.toString().length >0 )}))
console.log(selected_skus)

Answer 2

e.values.filter(x=>x.value?.length > 0)

将始终返回一个数组。它可能是一个空数组 [] - 但它仍然是一个数组。并且数组是“真实的” - 所以第二部分

e => e.type === 'SKU' && e.values.filter(x=>x.value?.length > 0)

无论哪种方式都将评估为真。是否为空数组。

您需要做的是检查过滤后数组的长度是否 > 0，所以

(e => e.type === 'SKU') && (e.values.filter(x=>x.value?.length > 0).length > 0)

也是你内心的检查

x.value?.length > 0

实际上没有意义，因为您在那里检查数字。检查 number 类型的长度属性不是您想要的。所以最后你需要

(e => e.type === 'SKU') && (e.values.filter(x => x !== null && x !== undefined).length > 0)

Answer 3

首先按type "SKU" 过滤，然后映射过滤后的数据，并为每个项目过滤data.values 属性，并将assign the filtered values 过滤到data.values 属性。

let selectionSettings = {
  "startIndex": 2, "selections": [
    {
      "type": "SKU", "colIndex": 0, "values":
        [{ "value": 1231319, "bgcolour": "", "textcolour": "", "type": 1, "colIndex": 0, "rowIndex": 2, "selected": false },
        { "value": 1231320, "bgcolour": "", "textcolour": "", "type": 1, "colIndex": 0, "rowIndex": 3, "selected": false },
        { "bgcolour": "", "textcolour": "", "type": 0, "colIndex": 0, "rowIndex": 4, "selected": false },
        { "value": 1231322, "bgcolour": "", "textcolour": "", "type": 1, "colIndex": 0, "rowIndex": 5, "selected": false },
        { "value": 1231323, "bgcolour": "", "textcolour": "", "type": 1, "colIndex": 0, "rowIndex": 6, "selected": false },
        { "value": 1231324, "bgcolour": "", "textcolour": "", "type": 1, "colIndex": 0, "rowIndex": 7, "selected": false }]
    },
    {
      "type": "QTY", "colIndex": 1, "values":
        [{ "value": 2, "bgcolour": "", "textcolour": "", "type": 1, "colIndex": 1, "rowIndex": 2, "selected": false },
        { "value": 1, "bgcolour": "", "textcolour": "", "type": 1, "colIndex": 1, "rowIndex": 3, "selected": false },
        { "value": -1, "bgcolour": "", "textcolour": "", "type": 1, "colIndex": 1, "rowIndex": 4, "selected": false },
        { "value": 0, "bgcolour": "", "textcolour": "", "type": 0, "colIndex": 1, "rowIndex": 5, "selected": false }]
    }
  ]
};

const filterList = (list) => {
  return list.selections.filter(e => e.type === 'SKU')
    .map(data => {
      data.values = data.values.filter(({value}) => !(value === undefined || value === null));
      return data;
    });
}

console.log(filterList(selectionSettings));