AngularJS 和 LoDash：组合 API 对象答案

【问题标题】：AngularJS & LoDash: Combining API objectsAngularJS 和 LoDash：组合 API 对象
【发布时间】：2014-09-18 13:50:34
【问题描述】：

--更新-- 更新 Plunker - http://plnkr.co/edit/QX00S7gH2OwmobiNUqyL?p=preview

如果我取消注释对 LoDash 的调用，一切仍然会中断，但至少循环可以工作。

以下所有代码已相应更新 --更新--

我有一个以“块”形式提供数据的 API，因此我正在尝试使用令人难以置信的 LoDash 创建一个可用的对象。我的第一个 LoDash 应用程序就像一个魅力，可以从几笔贷款中提取一笔贷款。但是，当我尝试添加到该对象时，它会停止工作。

我创建了一个 plunker，它显示了我需要的最终输出（在 $scope.desired 变量中）以及我目前拥有的代码 -- http://plnkr.co/edit/QX00S7gH2OwmobiNUqyL?p=preview

这是我的控制器：

    var app = angular.module('app',[]);

app.constant('_', window._)
  .run(function ($rootScope) {
    $rootScope._ = window._;
  });

app.controller('MainController', ['$scope', '_', function($scope, _) {
  $scope.loans = [
    {id: 1, selCropsId: ['1','3'], budget: 30000},
    {id: 2, selCropsId: ['1','2'], budget: 50000},
    {id: 3, selCropsId: ['2','3'], budget: 10000}
  ];

  $scope.crops = [
    {id: 1, crop: 'Cotton', uom: 'lb'},
    {id: 2, crop: 'Soybeans', uom: 'bu'},
    {id: 3, crop: 'Sugar Cane', uom: 'ton'}
  ];

  $scope.funduse = [
    {loan_id: 1, crop_id: 1, seed: 150},
    {loan_id: 1, crop_id: 1, fertilizer: 85},
    {loan_id: 1, crop_id: 3, seed: 300},
    {loan_id: 1, crop_id: 3, fertilizer: 175},
    {loan_id: 2, crop_id: 1, seed: 350},
    {loan_id: 2, crop_id: 1, fertilizer: 200},
    {loan_id: 2, crop_id: 2, seed: 500},
    {loan_id: 2, crop_id: 2, fertilizer: 250},
    {loan_id: 3, crop_id: 2, seed: 80},
    {loan_id: 3, crop_id: 2, fertilizer: 20},
    {loan_id: 3, crop_id: 3, seed: 125},
    {loan_id: 3, crop_id: 3, fertilizer: 60}
  ];

  $scope.loan = _.find($scope.loans, function(i) {
      return i.id == 2;
  });

  $scope.loan.crops = [];

  for(var c=0; c<$scope.loan.selCropsId.length; c++){
    $scope.loan.crops.push($scope.loan.selCropsId[c]);
    //$scope.loan.crops.push(getUse($scope.loan.selCropsId[c]));
  }

  function getUse(id){
    _.find($scope.crops, function(i){
      return i.id == selCropsId[c];
    });
  }

  $scope.desired = [
    {
      id: 2,
      selCropsId: ['1','2'],
      budget: 50000,
      crops: [
        {
          id: 1,
          crop: 'cotton',
          uom: 'lb',
          funduse: {
            seed: 350,
            fertilizer: 200
          }
        },
        {
          id: 2,
          crop: 'Soybeans',
          uom: 'bu',
          funduse: {
            seed: 500,
            fertilizer: 250
          }
        }
      ]
    }  
  ];

}]);

我的 HTML 很简单：

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="angular.js@1.3.0-rc.1" data-semver="1.3.0-rc.1" src="https://code.angularjs.org/1.3.0-rc.1/angular.js"></script>
    <script data-require="lodash.js@*" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController">
    <pre>{{ loan | json }}</pre>
    <pre>{{ desired | json }}</pre>
  </body>

</html>

非常感谢任何帮助！！！

【问题讨论】：

明确一点，这和angularjs没有关系吧？只是您想将对象从一种结构转换为另一种结构——在这种情况下，您可以使用 lodash，它肯定会有所帮助。
我正在使用 Laravel 创建的 API 并在 AngularJS 前端使用它。我已将 LoDash 注入控制器。如果有更好的——一种 Angular 方式来做到这一点——我愿意学习；否则，只需弄清楚为什么 LoDash 不会像第一次那样在第二次工作。

标签： angularjs lodash

【解决方案1】：

getUse 函数中有 2 个错误。

第一个是您尝试使用selCropsId[c]，而您应该使用id 参数。
第二个问题是您没有返回_.find 调用的结果

这是您更新后的getUse 函数

  function getUse(id){
    // you need to return the result
    return _.find($scope.crops, function(i){
      return i.id == id; // you need to use the id parameter
    });
  }

我认为您应该能够弄清楚如何获得所需的其余对象结构。

【讨论】：