递归过滤对象数组

Question

I have these data structure

products:[
      {
        products_number: 14,
        products_ID: 'lvs_jeans-man',
        products_seller: 'a',
        products_SKU: [
          {
            productSKU_ID: 'nfl_lvs_jeans-man_xl_bl-stripe',
            productSKU_size: 'XL',
            productSKU_color: 'Blue_White'
          },
          {
            productSKU_ID: 'nfl_lvs_jeans-man_xl_bk',
            productSKU_size: 'XL',
            productSKU_color: 'Black'
          }
        ]
      },
      {
      products_number: 15,
      products_ID: 'lvs_jeans-man',
      products_seller: 'b',
      products_SKU: [
        {
          productSKU_ID: 'nfl_lvs_jeans-man_xl_bk',
          productSKU_size: 'XL',
          productSKU_color: 'Black'
        }
      ]
    },
    {
      products_number: 16,
      products_ID: 'lvs_jeans-man',
      products_seller: 'c',
      products_SKU: [
        {
          productSKU_ID: 'nfl_lvs_jeans-man_xl_gy',
          productSKU_size: 'XL',
          productSKU_color: 'Grey',

        }
      ]
    }
  ]

The constant

  var id = 'lvs_jeans-man'
  var size = 'XL'
  var color = 'Black'

How do i filter items that met these condition

products_ID == id
productSKU_color == color
productSKU_size == size

The needed output is

  [{
    products_number: 14,
    products_ID: 'lvs_jeans-man',
    products_seller: 'a',
    productSKU_ID: 'nfl_lvs_jeans-man_xl_bk',
  },
  {
    products_number: 15,
    products_ID: 'lvs_jeans-man',
    products_seller: 'b',
    productSKU_ID: 'nfl_lvs_jeans-man_xl_bk',
  }]

What i have tried is filter the products_ID first then filter the color and size so i can get the productSKU_ID inside and then just play around with array push, but it return Cannot read property 'filter' of undefined"

var temp1 =  this.products.filter((product => product.products_ID === this.id).products_SKU.filter(sku => (sku.productSKU_color === this.color && sku.productSKU_size === this.size)))

How to achieve the needed output?

Answer 1

The function filter is not suitable because you need to build a custom output with data from the array .products_SKU .

Use this alternative using the functions reduce and find .

 var data = { products: [{ products_number: 14, products_ID: 'lvs_jeans-man', products_seller: 'a', products_SKU: [{ productSKU_ID: 'nfl_lvs_jeans-man_xl_bl-stripe', productSKU_size: 'XL', productSKU_color: 'Blue_White' }, { productSKU_ID: 'nfl_lvs_jeans-man_xl_bk', productSKU_size: 'XL', productSKU_color: 'Black' } ] }, { products_number: 15, products_ID: 'lvs_jeans-man', products_seller: 'b', products_SKU: [{ productSKU_ID: 'nfl_lvs_jeans-man_xl_bk', productSKU_size: 'XL', productSKU_color: 'Black' }] }, { products_number: 16, products_ID: 'lvs_jeans-man', products_seller: 'c', products_SKU: [{ productSKU_ID: 'nfl_lvs_jeans-man_xl_gy', productSKU_size: 'XL', productSKU_color: 'Grey', }] } ]}; var id = 'lvs_jeans-man' var size = 'XL' var color = 'Black' var result = data.products.reduce((a, p) => { var found; if (p.products_ID == id && (found = p.products_SKU.find(s => s.productSKU_size === size && s.productSKU_color === color))) { a.push({ products_number: p.products_number, products_ID: p.products_ID, products_seller: p.products_seller, productSKU_ID: found.productSKU_ID }); } return a; }, []); console.log(result) 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 2

It's too complicated for filter alone, you'll have to use more array methods, including reduce and find :

 const input = { products: [{ products_number: 14, products_ID: 'lvs_jeans-man', products_seller: 'a', products_SKU: [{ productSKU_ID: 'nfl_lvs_jeans-man_xl_bl-stripe', productSKU_size: 'XL', productSKU_color: 'Blue_White' }, { productSKU_ID: 'nfl_lvs_jeans-man_xl_bk', productSKU_size: 'XL', productSKU_color: 'Black' } ] }, { products_number: 15, products_ID: 'lvs_jeans-man', products_seller: 'b', products_SKU: [{ productSKU_ID: 'nfl_lvs_jeans-man_xl_bk', productSKU_size: 'XL', productSKU_color: 'Black' }] }, { products_number: 16, products_ID: 'lvs_jeans-man', products_seller: 'c', products_SKU: [{ productSKU_ID: 'nfl_lvs_jeans-man_xl_gy', productSKU_size: 'XL', productSKU_color: 'Grey', }] } ] }; const matchingProducts = input.products.filter(({ products_ID }) => products_ID === 'lvs_jeans-man'); const output = matchingProducts.reduce((matches, product) => { const foundSizeObj = product.products_SKU.find(({ productSKU_color, productSKU_size }) => { return productSKU_size === 'XL' && productSKU_color === 'Black'; }); if (!foundSizeObj) return matches; const match = {...product}; delete match.products_SKU; match.productSKU_ID = foundSizeObj.productSKU_ID; matches.push(match); return matches; }, []); console.log(output); 

Answer 3

You can filter by id first and then map products with first found productSKU, take out the products with undefined productSKU and map that to a result type:

 const products = [ { products_number: 14, products_ID: 'lvs_jeans-man', products_seller: 'a', products_SKU: [ { productSKU_ID: 'nfl_lvs_jeans-man_xl_bl-stripe', productSKU_size: 'XL', productSKU_color: 'Blue_White' }, { productSKU_ID: 'nfl_lvs_jeans-man_xl_bk', productSKU_size: 'XL', productSKU_color: 'Black' } ] }, { products_number: 15, products_ID: 'lvs_jeans-man', products_seller: 'b', products_SKU: [ { productSKU_ID: 'nfl_lvs_jeans-man_xl_bk', productSKU_size: 'XL', productSKU_color: 'Black' } ] }, { products_number: 16, products_ID: 'lvs_jeans-man', products_seller: 'c', products_SKU: [ { productSKU_ID: 'nfl_lvs_jeans-man_xl_gy', productSKU_size: 'XL', productSKU_color: 'Grey', } ] } ]; const filterProducts = products => (id,size,color) => products.filter(//filter by id first product=>product.products_ID===id ) .map(//map to products with filtered productSKU product=>({ ...product, products_SKU: product.products_SKU.find( info=> info.productSKU_size===size && info.productSKU_color===color ) }) ) .filter(//take out empty products_SKU product=> product.products_SKU!==undefined ); const mapToResult = product => ({ products_number: product.products_number, products_ID: product.products_ID, products_seller: product.products_seller, productSKU_ID: product.products_SKU.productSKU_ID }); console.log( filterProducts(products)("lvs_jeans-man","XL","Black") .map(mapToResult) ); 

Update

const myFunction = arg => otherArg => 22

Is a function that returns a function, without the arrow syntax it would look like this:

function myFunction(arg){
  return function(otherArg){return 22; }
}

In the filterProducts you can use it to have filter linked to a set of products, for example:

const filterPants = filterProducts(products.filter(pantsOnly))

The optimized answer from Ele would look like this:

var result = data.products.reduce((a, p) => {
  if (p.products_ID == id) {
    //only check found if id matches
    const found = p.products_SKU.find(
      s => s.productSKU_size === size && s.productSKU_color === color
    );
    if(!found){
      return a;//early return
    }
    a.push({
      products_number: p.products_number,
      products_ID: p.products_ID,
      products_seller: p.products_seller,
      productSKU_ID: found.productSKU_ID
    })
  }

  return a;
}, []);

Answer 4

const finalProducts = this.products.reduce((final, product) =>  {
  if (product.id === this.id || !this.id) {
    return[...final, ...product.products_SKU.reduce((acc, p) => {
      if (p.productSKU_size === this.size && p.productSKU_color === this.color) {
        return [...acc, {
          products_number: product.products_number,
          products_ID: product.products_ID,
          products_seller: product.products_seller,
          productSKU_ID: p.productSKU_ID
        }];
      }
      return acc;
    }, [])];
  }
  return final;
}, []);

finalProducs will be your expected output.