AngularJS / JavaScript从另一个对象创建一个新对象

时间:2014-07-18 21:13:29

标签: javascript arrays json angularjs object

我遇到一个问题,我已经坚持了一段时间,并且正在寻找一些建议。

在我的控制器上,我有一个Restangular调用我的后端来检索一些数据,看起来像这样

Angularjs控制器(使用Restangular)

Pages.controller('PageContentController', ['$scope', '$routeParams', '$location', 'Restangular', function($scope, $routeParams, $location, Restangular) {

    $scope.id = $routeParams.id;

    Restangular.one('pages', $scope.id).getList('content').then(function(response) {
        $scope.content = response;

        $scope.content = _.forEach($scope.content, function(content) {
            content[content.name] = content.content;
        });
        console.log($scope.content);
    });

}]);

现在当我退出$scope.content时,我得到一个包含三个与此

相似的对象的数组
Array[3]
    0: Object
        banner_heading: "Services",
        id: 1

    1: Object 
        banner_text: "some banner text",
        id: 2

    2: Object
        banner_img: "services.jpg",
        id: 3

这些对象还有很多,但我已经针对这个问题对其进行了简化,这些是我想要从对象中获取的唯一属性。

banner_heading,banner_text和banner_img都是使用lodash forEach循环在上面的控制器中动态创建的属性。

现在谈谈我想要完成的事情。我需要从这个看起来像这个

的对象数组中创建一个对象
{
    "banner_heading": {
        "data": "Services",
        "id": 1 
    },
    "banner_text": {
        "data": "some banner text",
        "id": 2 
    },
    "banner_img": {
        "data": "services.jpg",
        "id": 3 
    }
}

基本上在我看来,我需要能够输出像{{ banner_heading }}这样的数据,但我还需要能够维护用于在服务器端更新数据的ID。

我不确定如何做到这一点,我已经困惑了几个小时,非常感谢任何帮助。

1 个答案:

答案 0 :(得分:1)

我将提出一个不需要对原始数组数据进行分组或执行任何操作的解决方案:

假设我们有这个问题:

 $scope.content = [{ banner_heading: "Services", id: 1}, {banner_text:'some text', id:2}, {banner_img:'service.jpg', id:3}];

我们可以编写一个函数来提取我们需要的东西:

$scope.getData = function(n) {
   // question states lodash is being used
   var row = _.find($scope.content, function(item) {
       return n in item;
   });
   return row[n];
}

$scope.getId = function(n) {
  var row = _.find($scope.content, function(item) {
       return n in item;
   });
   return row.id;
}

并且在观点上:

{{ getData('banner_text') }}

以下是演示:http://plnkr.co/edit/eHT42YQTaXWtmpbGwUZB?p=preview

相关问题