Array transformation with angular.forEach - AngularJS

Array transformation with angular.forEach - AngularJS

本文关键字：AngularJS forEach angular transformation with Array      更新时间：2023-09-26

我有从REST API获取的数据，我想使用 Angular 创建一个新object，然后再使用 $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
             }  ]
         }  ]
 }

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

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

cartItem和cartModifierItems

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

然后cartModifierItems会从所有menu_modifier_groups menu_modifier_items，selected: true这样我就剩下cartItem和cartItem.cartModifierItems

感谢任何帮助或指导。

下面是一个接受 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
//      }
//  ]
// }

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

  1. angular.copy。创建深层对象副本。结合delete我制作了一个没有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
}

  1. 当在menu_modifier_groups调用时，它会将每个值累积到作为第一个参数传递的函数返回的新数组（第二个参数）中。

  2. Array.prototype.filter. 通过传递到其中的函数menu_modifier_items的过滤器。如果任何遍历的项目具有真selected，则它会被拾取。

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

JSBin.

相关文章：