使用angular.forEach进行数组转换 - AngularJS

I have data I'm fetching from a REST API that I want to create a new object using Angular before passing it back to my API using $http

我有从REST API获取的数据,我想使用Angular创建一个新对象,然后使用$ http将其传回我的API

orderItem:  { 
    id: 159
    name: Empanadas (Choice of 2)
    description: Choice of Diced Beef; Spinach, Stilton and Onion; or Smoked Ham and Mozzarella
    price: 700
    available: 1
    created_at: 2016-01-31 16:50:31
    updated_at: 2016-01-31 16:50:31
    menu_category_id: 41
    restaurant_id: 11
    menu_modifier_groups: 
        [  { 
            id: 9
            name: Choose 2 Empanadas
            instruction: null
            min_selection_points: 2
            max_selection_points: 2
            force_selection: 1
            created_at: 2016-02-01 01:03:35
            updated_at: 2016-02-01 01:12:23
            menu_item_id: 159
            restaurant_id: 11
                menu_modifier_items: 
                [  { 
                    id: 34
                    name: Diced Beef
                    price: 0
                    created_at: 2016-02-01 01:04:08
                    updated_at: 2016-02-01 01:04:08
                    menu_modifier_group_id: 9
                    restaurant_id: 11
                    menu_item_id: 159
                    selected: true
                 } ,  { 
                    id: 35
                    name: Smoked Salmon & Mozzarella
                    price: 0
                    created_at: 2016-02-01 01:04:37
                    updated_at: 2016-02-01 01:04:37
                    menu_modifier_group_id: 9
                    restaurant_id: 11
                    menu_item_id: 159
                    selected: true
                 } ,  { 
                    id: 36
                    name: Stilton, Spinach and Onion
                    price: 0
                    created_at: 2016-02-01 01:05:05
                    updated_at: 2016-02-01 01:05:05
                    menu_modifier_group_id: 9
                    restaurant_id: 11
                    menu_item_id: 159
                    selected: false
             }  ]
         }  ]
 }

As you can see I have orderItem which contains several menu_modifier_groups which then contain several menu_modifier_items

如你所见,我有orderItem,其中包含几个menu_modifier_groups,然后包含几个menu_modifier_items

What I want to do is transform this data into;

我想要做的是将这些数据转换成;

cartItem and cartModifierItems

cartItem和cartModifierItems

cartItem will be:

cartItem将是:

id: 159
name: Empanadas (Choice of 2)
description: Choice of Diced Beef; Spinach, Stilton and Onion; or Smoked Ham and Mozzarella
price: 700
available: 1
created_at: 2016-01-31 16:50:31
updated_at: 2016-01-31 16:50:31
menu_category_id: 41
restaurant_id: 11
cartModifierItems: // an array containing all menu_modifier_items from all the menu_modifier_groups where selected = true

And then cartModifierItems will be all menu_modifier_items from all the menu_modifier_groups where selected: true that way I'm left with cartItem and cartItem.cartModifierItems

然后cartModifierItems将从所有menu_modifier_groups中选择所有menu_modifier_items:真的那样我留下了cartItem和cartItem.cartModifierItems

Any help or guidance appreciated.

任何帮助或指导表示赞赏。

1 个解决方案

#1

Here's a function that accepts orderItem and outputs cartItem:

这是一个接受orderItem并输出cartItem的函数:

function makeCartItem(orderItem) {
    var cartItem = angular.copy(orderItem)
    delete cartItem.menu_modifier_groups
    cartItem.cartModifierItems = orderItem.menu_modifier_groups.reduce(function(acc, menuModifierGroup) {
        const selectedItems = menuModifierGroup.menu_modifier_items.filter(function(item) {
            return item.selected
        })
        return acc.concat(selectedItems)
    }, [])
    return cartItem
}

// {
//  "id": 159,
//  "name": "Empanadas (Choice of 2)",
//  "description": "Choice of Diced Beef; Spinach, Stilton and Onion; or Smoked Ham and Mozzarella",
//  "price": 700,
//  "available": 1,
//  "created_at": "2016-01-31 16:50:31",
//  "updated_at": "2016-01-31 16:50:31",
//  "menu_category_id": 41,
//  "restaurant_id": 11,
//  "cartModifierItems": [
//      {
//          "id": 34,
//          "name": "Diced Beef",
//          "price": 0,
//          "created_at": "2016-02-01 01:04:08",
//          "updated_at": "2016-02-01 01:04:08",
//          "menu_modifier_group_id": 9,
//          "restaurant_id": 11,
//          "menu_item_id": 159,
//          "selected": true
//      },
//      {
//          "id": 35,
//          "name": "Smoked Salmon & Mozzarella",
//          "price": 0,
//          "created_at": "2016-02-01 01:04:37",
//          "updated_at": "2016-02-01 01:04:37",
//          "menu_modifier_group_id": 9,
//          "restaurant_id": 11,
//          "menu_item_id": 159,
//          "selected": true
//      }
//  ]
// }

Your question isn't really about angular, but more about data transformation in JavaScript. Check out the methods and functions I've used to achieve the result:

你的问题不是关于角度问题,而是关于JavaScript中数据转换的更多问题。查看我用于实现结果的方法和函数:

angular.copy. Creates a deep object copy. In conjunction with delete I made a new orderItem-derived copy without menu_modifier_groups:

angular.copy。创建深层对象副本。与删除相结合,我创建了一个没有menu_modifier_groups的新orderItem派生副本:
```
var cartItem = angular.copy(orderItem)
delete cartItem.menu_modifier_groups
```

{
    "id": 159,
    "name": "Empanadas (Choice of 2)",
    "description": "Choice of Diced Beef; Spinach, Stilton and Onion; or Smoked Ham and Mozzarella",
    "price": 700,
    "available": 1,
    "created_at": "2016-01-31 16:50:31",
    "updated_at": "2016-01-31 16:50:31",
    "menu_category_id": 41,
    "restaurant_id": 11
}

Array.prototype.reduce. When called on menu_modifier_groups, it accumulates every value into new array (second argument) returned from the function passed as a first argument.

Array.prototype.reduce。当在menu_modifier_groups上调用时,它会将每个值累积到从作为第一个参数传递的函数返回的新数组(第二个参数)中。
Array.prototype.filter. Filters menu_modifier_items by a function passed into it. If any traversed item has truish selected, then it gets picked.

Array.prototype.filter。通过传递给它的函数过滤menu_modifier_items。如果选择了任何遍历的项目,那么它将被选中。
Array.prototype.concat. Combines accumulator array with selected items array into a new array that contains both.

Array.prototype.concat。将累加器数组与所选项数组合并为一个包含两者的新数组。

JSBin.

#1