从数组中提取 JS 对象字段

Question

这是我的产品

[
  {
    "quantity": 8,
    "size": "S",
    "product": {
      "_id": "607283d971fbe12de4e42ebe",
      "title": "LEVI Denim",
      "name": "TRUCKER JACKET",
      "category": "men",
      "price": 8999,
      "rating": 5,
      "sales": 69,
      "variant": {
        "img": [
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/723340131-front-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1250&hei=1667",
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/723340131-back-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1050&hei=1400",
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/723340131-alt1-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1050&hei=1400"
        ],
        "_id": "607283d971fbe12de4e42ecb",
        "variantAvailability": true,
        "size": [
          {
            "_id": "607283d971fbe12de4e42ecc",
            "symbol": "S",
            "stock": 4
          },
          {
            "_id": "607283d971fbe12de4e42ecd",
            "symbol": "L",
            "stock": 13
          }
        ]
      },
      "__v": 0
    }
  },
  {
    "quantity": 8,
    "size": "XL",
    "product": {
      "_id": "607285bf70ce0f0660f199ad",
      "title": "LEVI Denim",
      "name": "SHERPA TRUCKER JACKET",
      "category": "men",
      "price": 10199,
      "rating": 2,
      "sales": 18,
      "variant": {
        "img": [
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/163650044-front-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1250&hei=1667",
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/163650044-back-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1050&hei=1400",
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/163650044-alt6-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1050&hei=1400",
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/163650044-alt1-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=2000&hei=1125"
        ],
        "_id": "607285bf70ce0f0660f199ae",
        "variantAvailability": true,
        "size": [
          {
            "_id": "607285bf70ce0f0660f199af",
            "symbol": "S",
            "stock": 10
          },
          {
            "_id": "607285bf70ce0f0660f199b0",
            "symbol": "L",
            "stock": 33
          },
          {
            "_id": "607285bf70ce0f0660f199b1",
            "symbol": "XL",
            "stock": 1
          }
        ]
      },
      "__v": 0
    }
  },
  {
    "quantity": 8,
    "size": "S",
    "product": {
      "_id": "607285bf70ce0f0660f199ad",
      "title": "LEVI Denim",
      "name": "SHERPA TRUCKER JACKET",
      "category": "men",
      "price": 10199,
      "rating": 2,
      "sales": 18,
      "variant": {
        "img": [
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/163650044-front-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1250&hei=1667",
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/163650044-back-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1050&hei=1400",
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/163650044-alt6-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1050&hei=1400",
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/163650044-alt1-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=2000&hei=1125"
        ],
        "_id": "607285bf70ce0f0660f199ae",
        "variantAvailability": true,
        "size": [
          {
            "_id": "607285bf70ce0f0660f199af",
            "symbol": "S",
            "stock": 10
          },
          {
            "_id": "607285bf70ce0f0660f199b0",
            "symbol": "L",
            "stock": 33
          },
          {
            "_id": "607285bf70ce0f0660f199b1",
            "symbol": "XL",
            "stock": 1
          }
        ]
      },
      "__v": 0
    }
  },
  {
    "quantity": 8,
    "size": "M",
    "product": {
      "_id": "6072b314af87143c5cd39b32",
      "title": "Levi's Premium",
      "name": "EX-BOYFRIEND SHERPA TRUCKER JACKET",
      "category": "women",
      "price": 12099,
      "rating": 5,
      "sales": 50,
      "variant": {
        "img": [
          "https://lsco.scene7.com/is/image/lsco/361370034-front-pdp?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1250&hei=1667",
          "https://lsco.scene7.com/is/image/lsco/361370034-back-pdp?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=2000&hei=1125"
        ],
        "_id": "6072b314af87143c5cd39b37",
        "variantAvailability": true,
        "size": [
          {
            "_id": "6072b314af87143c5cd39b38",
            "symbol": "XS",
            "stock": 10
          },
          {
            "_id": "6072b314af87143c5cd39b39",
            "symbol": "M",
            "stock": 33
          },
          {
            "_id": "6072b314af87143c5cd39b3a",
            "symbol": "XL",
            "stock": 1
          }
        ]
      },
      "__v": 0
    }
  },
  {
    "quantity": 8,
    "size": "M",
    "product": {
      "_id": "607283d971fbe12de4e42ebe",
      "title": "LEVI Denim",
      "name": "TRUCKER JACKET",
      "category": "men",
      "price": 8999,
      "rating": 5,
      "sales": 69,
      "variant": {
        "img": [
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/723340144-front-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1250&hei=1667",
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/723340144-back-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1050&hei=1400",
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/723340144-alt1-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1050&hei=1400"
        ],
        "_id": "607283d971fbe12de4e42ebf",
        "variantAvailability": true,
        "size": [
          {
            "_id": "607283d971fbe12de4e42ec0",
            "symbol": "XS",
            "stock": 10
          },
          {
            "_id": "607283d971fbe12de4e42ec1",
            "symbol": "S",
            "stock": 10
          },
          {
            "_id": "607283d971fbe12de4e42ec2",
            "symbol": "M",
            "stock": 10
          },
          {
            "_id": "607283d971fbe12de4e42ec3",
            "symbol": "L",
            "stock": 33
          },
          {
            "_id": "607283d971fbe12de4e42ec4",
            "symbol": "XL",
            "stock": 1
          }
        ]
      },
      "__v": 0
    }
  },
  {
    "quantity": 8,
    "size": "M",
    "product": {
      "_id": "607283d971fbe12de4e42ebe",
      "title": "LEVI Denim",
      "name": "TRUCKER JACKET",
      "category": "men",
      "price": 8999,
      "rating": 5,
      "sales": 69,
      "variant": {
        "img": [
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/723340134-front-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1250&hei=1667",
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/723340134-back-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1050&hei=1400",
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/723340134-alt1-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1050&hei=1400"
        ],
        "_id": "607283d971fbe12de4e42ec5",
        "variantAvailability": true,
        "size": [
          {
            "_id": "607283d971fbe12de4e42ec6",
            "symbol": "M",
            "stock": 10
          },
          {
            "_id": "607283d971fbe12de4e42ec7",
            "symbol": "L",
            "stock": 44
          },
          {
            "_id": "607283d971fbe12de4e42ec8",
            "symbol": "XL",
            "stock": 1
          },
          {
            "_id": "607283d971fbe12de4e42ec9",
            "symbol": "2XL",
            "stock": 44
          },
          {
            "_id": "607283d971fbe12de4e42eca",
            "symbol": "3XL",
            "stock": 44
          }
        ]
      },
      "__v": 0
    }
  },
  {
    "quantity": 8,
    "size": "L",
    "product": {
      "_id": "607283d971fbe12de4e42ebe",
      "title": "LEVI Denim",
      "name": "TRUCKER JACKET",
      "category": "men",
      "price": 8999,
      "rating": 5,
      "sales": 69,
      "variant": {
        "img": [
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/723340144-front-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1250&hei=1667",
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/723340144-back-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1050&hei=1400",
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/723340144-alt1-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1050&hei=1400"
        ],
        "_id": "607283d971fbe12de4e42ebf",
        "variantAvailability": true,
        "size": [
          {
            "_id": "607283d971fbe12de4e42ec0",
            "symbol": "XS",
            "stock": 10
          },
          {
            "_id": "607283d971fbe12de4e42ec1",
            "symbol": "S",
            "stock": 10
          },
          {
            "_id": "607283d971fbe12de4e42ec2",
            "symbol": "M",
            "stock": 10
          },
          {
            "_id": "607283d971fbe12de4e42ec3",
            "symbol": "L",
            "stock": 33
          },
          {
            "_id": "607283d971fbe12de4e42ec4",
            "symbol": "XL",
            "stock": 1
          }
        ]
      },
      "__v": 0
    }
  },
  {
    "quantity": 16,
    "size": "S",
    "product": {
      "_id": "607283d971fbe12de4e42ebe",
      "title": "LEVI Denim",
      "name": "TRUCKER JACKET",
      "category": "men",
      "price": 8999,
      "rating": 5,
      "sales": 69,
      "variant": {
        "img": [
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/723340144-front-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1250&hei=1667",
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/723340144-back-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1050&hei=1400",
          "https://lsco.scene7.com/is/image/lsco/levis/clothing/723340144-alt1-pdp.jpg?fmt=jpeg&qlt=70,1&op_sharpen=0&resMode=sharp2&op_usm=0.8,1,10,0&fit=crop,0&wid=1050&hei=1400"
        ],
        "_id": "607283d971fbe12de4e42ebf",
        "variantAvailability": true,
        "size": [
          {
            "_id": "607283d971fbe12de4e42ec0",
            "symbol": "XS",
            "stock": 10
          },
          {
            "_id": "607283d971fbe12de4e42ec1",
            "symbol": "S",
            "stock": 10
          },
          {
            "_id": "607283d971fbe12de4e42ec2",
            "symbol": "M",
            "stock": 10
          },
          {
            "_id": "607283d971fbe12de4e42ec3",
            "symbol": "L",
            "stock": 33
          },
          {
            "_id": "607283d971fbe12de4e42ec4",
            "symbol": "XL",
            "stock": 1
          }
        ]
      },
      "__v": 0
    }
  }
]

每个产品有数量、尺寸、产品。每个 Product 都有 _id 和 variant 并且每个 variant 都有_id。我想要一个新的常量

数量
尺寸
product._id
product.variant_id

像这样

{
  "productId": "607283d971fbe12de4e42ebe",
  "variantId": "607283d971fbe12de4e42ebf",
  "size": "S",
  "quantity": 16
}

or this

我想要 setOrder 这是一个 对象数组 并且每个对象包含 productId , variantId, size, quantity of all products

我正在使用 React。这是我的代码，到目前为止我已经能够做到。我想做这种不可变的方式

function getOrderInfo(product){

        //console.log(JSON.stringify(product,null,2))

        product.forEach( (item, index) => {        
            const selectedBasketItem = product.find((item, ind)=> ind === index ) 
            const currentProductId = {productId:selectedBasketItem.product._id}
            const currentVariantId = {variantId:selectedBasketItem.product.variant._id}
            const quan = {quantity:selectedBasketItem.quantity}
            const size = {size:selectedBasketItem.size}
            const payload = {...currentProductId, ...currentVariantId, ...size, ...quan}
            
            
            setOrder({...order,...payload})

        })
        
    }
    getOrderInfo(basket)

Answer 1

您正在创建相当多的对象，然后再次传播它们，我认为这没有任何用处。对于初学者来说，可以合并它们。

const currentProductId = {productId:selectedBasketItem.product._id}
const currentVariantId = {variantId:selectedBasketItem.product.variant._id}
const quan = {quantity:selectedBasketItem.quantity}
const size = {size:selectedBasketItem.size}
const payload = {...currentProductId, ...currentVariantId, ...size, ...quan}

与

相同

const payload = {
  productId:selectedBasketItem.product._id
  variantId:selectedBasketItem.product.variant._id,
  quantity:selectedBasketItem.quantity,
  size:selectedBasketItem.size
}

行 const selectedBasketItem = product.find((item, ind)=> ind === index )。阴影 item 在它的内部函数中。这也是不必要的，因为 selectedBasketItem 和 item （上范围之一）是同一个对象！。它基本上遍历产品并针对它找到的每个产品搜索该产品。

现在让我们进入实际任务：

Immutable.js 方法是对您的两个对象使用 Records or Maps。首先在全局某处定义一个记录：

const OrderProduct = Immutable.Record({
  productId: null,
  variantId: null,
  size: null,
  quantity,
});

然后您可以创建记录：

products.forEach((item) => {
  const mutableData = {
      productId:selectedBasketItem.product._id
      variantId:selectedBasketItem.product.variant._id,
      quantity:selectedBasketItem.quantity,
      size:selectedBasketItem.size
  };
  const payloadRecord = OrderProduct(mutableData);
  // ... do something
});

如果 setOrder 需要一个数组（或者更好的 Immutable.List），您可以使用 Array.map 将产品对象转换为 OrderProduct:

const arrayOfProducts = products.map((item) => {
  // build payloadRecord as above
  return payloadRecord;
}
// To turn it into an Immutable.List: 
// const myList = Immutable.List(arrayOfProducts);
setOrder(arrayOfProducts);

Answer 2

products.map((item) => {
let { size, quantity, product } = item;
let { _id, variant } = product;
return {
size,
quantity,
productId: _id,
variantId: variant["_id"]
};

从数组中提取 JS 对象字段

JS Object Field Extraction from an Array

arrays

json

multidimensional-array

immutable.js

nested-object