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

时间:2022-09-25 08:45:12

I have a problem that I've been stuck on for awhile and am looking for some advice.

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

On my controller I have a Restangular call to my back-end to retrieve some data, which looks like this

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

Angularjs controller (using 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);
    });

}]);

Now when I log out $scope.content I get an array with three objects that look similar to this

现在当我注销$ 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

There is a lot more to these objects, but i've simplified it for the question and these are the only properties that I want to get out of the objects.

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

The banner_heading, banner_text, and banner_img are all properties that were dynamically created in the controller above using the lodash forEach loop.

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

Now on to what I am trying to accomplish. I need to create one object from this array of objects that looks like this

现在谈谈我想要完成的事情。我需要从这个看起来像这样的对象数组中创建一个对象

{
    "banner_heading": {
        "data": "Services",
        "id": 1 
    },
    "banner_text": {
        "data": "some banner text",
        "id": 2 
    },
    "banner_img": {
        "data": "services.jpg",
        "id": 3 
    }
}

Basically in my view I need to be able to output the data like {{ banner_heading }} but I also need to be able to maintain the ids for updating the data with the server side.

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

I'm not sure how this can be done, I've been puzzling over it for a few hours and would great appreciate any help.

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

1 个解决方案

#1


1  

I am going to propose a solution that doesn't require grouping or doing anything with the original array data:

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

Assuming we have this per the question:

假设我们有这个问题:

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

We can write a function to pull what we need:

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

$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;
}

And on the view:

在观点上:

{{ getData('banner_text') }}

Here is a demo: http://plnkr.co/edit/eHT42YQTaXWtmpbGwUZB?p=preview

这是一个演示:http://plnkr.co/edit/eHT42YQTaXWtmpbGwUZB?p = preview

#1


1  

I am going to propose a solution that doesn't require grouping or doing anything with the original array data:

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

Assuming we have this per the question:

假设我们有这个问题:

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

We can write a function to pull what we need:

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

$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;
}

And on the view:

在观点上:

{{ getData('banner_text') }}

Here is a demo: http://plnkr.co/edit/eHT42YQTaXWtmpbGwUZB?p=preview

这是一个演示:http://plnkr.co/edit/eHT42YQTaXWtmpbGwUZB?p = preview