javascript - 通过 Angular Factory 在 Javascript 中进行过滤、切片、排序

Question

我正在尝试创建一个数据项列表，这些数据项首先按值过滤，然后按降序值排序，然后切片以仅显示前 5 个项目。我使用 Angular 工厂将这些值返回到我的 Controller ，以便我可以在 DOM 中显示这些值。

我已成功对数据进行排序和切片，但在运行 dataHandler.filter 时遇到问题。我收到错误:'Cannot read property 'slice' of undefined' .

这是我的 Controller ，我在运行每个函数后尝试返回一个新列表:

Controller

getData().then(function(data) {

    function updateChart() {
        // get match value
        var filterValue = inputService.primaryInputs[0]["value"];

        // plug match value into filter ** should return only data items with matches
        var filtered = dataHandler.filter(data, "Description", filterValue);

        // sort by descending value "percent"
        var sorted = dataHandler.sort.descending(filtered, "Percent");

        // return top 5 results
        var sliced = dataHandler.slice(sorted, 5);
        $scope.barData = sliced;
    }
    updateChart();

});

我知道dataHandler.sort.descending和dataHandler.slice或工作正常，因为我可以使用 data作为 dataHandler.sort.descending 中的参数并且列表完美返回。但是，当我尝试插入使用 filtered ，我得到'Cannot read property 'slice' of undefined' .

工厂

app.factory('dataHandler', function ($rootScope) {
    return {
        filter: function(data, dataProp, input) {
            data.filter(function(value, index, array) {
                console.log(value[dataProp] == input);
                return value[dataProp] == input;
            });
        },
        sort: {
            ascending: function (data, sortCriteria) {
                if (data) {
                    data.sort(function (a, b) {
                        return a[sortCriteria] - b[sortCriteria];
                    });
                };
                return data;
            },
            descending: function (data, sortCriteria) {
                if (data) {
                    data.sort(function (a, b) {
                        return b[sortCriteria] - a[sortCriteria];
                    });
                };
                return data;
            }
        },
        slice: function (data, howMany) {
            if (howMany) {
                return data.slice(0, howMany);
            } else {
                return data;
            }
        }
    };

再次 - 我想使用dataHandler.filter返回一个新列表，其中仅包含 Description 的项目值与 filterValue 匹配.

Answer 1

它不起作用的原因是您没有在 dataHandler.filter 函数中返回任何内容。

应该是:

filter: function(data, dataProp, input) {
  return data.filter(function(value, index, array) {
    console.log(value[dataProp] == input);
    return value[dataProp] == input;
  });
}

请记住Array.prototype.filter无法正常工作，例如 Array.prototype.reverse .

<小时/>

尽管这可行，但我建议您实际上并不需要工厂来完成这些任务。过滤、切片和排序是非常通用的任务，不需要包装 native 实现(除非您要进行填充)。

我会将整个工厂重写为可重用转换函数的服务，可用于一系列链式操作。

.service('Transform', function() {
  // we will pass this to filter
  this.propEquals = function(property, value) {
    return function(data) {
      return data[property] === value;
    };
  };

  // we'll pass this to sort
  this.sort = function(criteria, ascending) {
    return function(a, b) {
      return ascending?
        a[criteria] - b[criteria] : b[criteria] - a[criteria];
    };
  };
})

然后你的 updateChart 方法就变成了。

function updateChart() {
  var filterValue = inputService.primaryInputs[0]["value"];

  $scope.barData = data
    .filter(Transform.propEquals("description", filterValue))
    .sort(Transform.sort("Percent", false))
    .slice(0, 5);
}