javascript - Angular 服务减法过滤器

Question

我有一个 Angular 服务，我正在尝试使用 Javascript 的 Array.prototype.filter() 方法返回过滤后的数据集。我将多个输入对象的 key value 对与另一组对象的 key value 对进行匹配，并返回如果匹配则对象。

这是我的服务:

app.service('scatterService', function(inputService) {
    return function(data) {
        var inputs = inputService.selectedInModel(); // returns 1 - 4 user input objects
        function getSelected(inputs) {
            return data.filter(function(obj) {
                // for each user input that exists
                angular.forEach(inputs, function(val, id) {
                    var dataProp = val['inData'];
                    // if prop value in data = prop value in user input
                    if (obj[dataProp] == val['value']) {
                        // returns objects that have *either* of the user inputs
                        return true;
                    }
                    return false;
                });
            });
        }
        var newData = getSelected(inputs);
        console.log(newData);
    };
});

这将返回一组对象，其中包含具有value“a”或value“b”的属性，但两者之一。我希望它只返回同时具有 a 和 b 值的对象。因此，如果理论上有四个用户输入，则用户选择的每个输入都会越来越缩小数据。或者，仅返回具有所有输入值的项目。

我还希望它能够在功能上过滤最多 4 个潜在输入。

编辑:添加对象结构

inputs: {
    'entertainment': {
        id: 'entertainment',
        inData: 'Ent',
        value: '',
    },
    'TV': {
        id: 'TV',
        inData: 'tv',
        value: '17'
    },
    'Radio': {
        id: 'radio',
        inData: 'radio',
        value: 'JackFM'  
    }
},

数据:300+ 项

data = [
    {
        id: '12345',
        Ent: 30,
        tv: 33
    },
    {
        id: 'TV',
        tv: 17,
        Ent: 999
    }
    // ... and so on
]

Answer 1

专注于您的 Array.prototype.filter 部分:

return data.filter(function(obj) {
    // for each user input that exists
    angular.forEach(inputs, function(val, id) {
        var dataProp = val['inData'];
        // if prop value in data = prop value in user input
        if (obj[dataProp] == val['value']) {
            // returns objects that have *either* of the user inputs
            return true;
        }
        return false;
    });
});

当您找到匹配的属性值时，您将立即返回true - 这会导致obj在任何一个时被过滤器选择值匹配。

相反，您可以对每个输入使用 bool AND 运算符来构建结果。当且仅当每个中间输入测试都为 true 时，结果才会为 true。如果任何一个失败，结果将为false。

return data.filter(function(obj) {
    // result tracks if this is a matching obj
    // initially assume that it is
    var result = true;

    // for each user input that exists
    angular.forEach(inputs, function(val, id) {
        var dataProp = val['inData'];
        // AND the current result value with this input's test 
        result = result && obj[dataProp] === val['value'];
    });

    // return the resulting chain of ANDs
    return result;
});