将数组过滤到另一个数组中

【问题标题】：filter array into another array将数组过滤到另一个数组中
【发布时间】：2021-03-16 02:42:27
【问题描述】：

解释我的情况，我想过滤我的 API 的响应，它返回一个数组来提出这个问题，我采用这些测试数据

此 prodPrueba 模拟用户选择的产品和变体

let prodPrueba = [
  {
    id: "B801278",
    variation: "B801278-18",
  },

  {
    id: "PC002",
    variation: "PC002",
  },
];

id 是所选产品的代码，变体是用户为产品选择的变体，例如...鞋子是产品，尺寸 18 是变体 B801278-18

这是我后端的响应

        let dataResponse = [
  {
  codProduct: "PC002",
  created_at: "2021-01-19T11:28:06.000000Z",
  desc: null,
  html_description: null,
  html_short_description: null,
  id_kit: null,
  kit: [],
  manufacturer: null,
  material: null,
  name: "Kit de Limpeza",
  id: "PC002",
  status: "active",
  tags: null,
  theme: null,
  title: null,
  type: null,
  variations: 
  [
    {
      product: "PC002", 
      cod: "U", 
      sku: "U", 
      product_sku: "PC002", 
      price: 96000,
    }
  ]

  },
  {
    codProduct: "ENG792015_9",
    created_at: "2021-01-19T11:27:59.000000Z",
    desc: null,
    html_description: null,
    html_short_description: null,
    id_kit: null,
    kit: [],
    manufacturer: null,
    material: null,
    name: "Charm en Plata.",
    id: "ENG792015_9",
    status: "active",
    tags: null,
    theme: null,
    title: null,
    type: null,
    variations: [
      {
        cod: "U",
        product: "ENG792015_9",
        product_sku: "ENG792015_9",
        price: 415000,
        sku: "U"
      }
    ]
  },
  {
    codProduct: "B801278",
    created_at: "2021-01-19T11:27:30.000000Z",
    desc: null,
    html_description: null,
    html_short_description: "Set de Regalo Brazalete en Plata Clip",
    id_kit: null,
    kit: [],
    manufacturer: null,
    material: null,
    name: "Set de Regalo Brazalete en Plata, Clip",
    id: "B801278",
    status: "active",
    tags: null,
    theme: null,
    title: null,
    type: null,
    variations: [
      {
        cod: "U",
        price: 950000,
        product: "B801278",
        product_sku: "B801278",
        sku: "U"
      },
      {
        cod: "20",
        price: 950000,
        product: "B801278",
        product_sku: "B801278-20",
        sku: "U",
      },
      {
        cod: "19",
        price: 950000,
        product: "B801278",
        product_sku: "B801278-19",
        sku: "U",
      },
      {
        cod: "18",
        price: 950000,
        product: "B801278",
        product_sku: "B801278-18",
        sku: "U",
      },
      
    ]
  }
]

正如您在对象“prodPrueba”中看到的，我有 2 个 id 与返回 API 的产品一致，在 prodPrueba 中，我有一个属性调用“variation”，它与每个变量的“product_sku”一致产品就是返回 api。我想过滤响应以获取除我的 prodPrueba 中的所有变化之外的所有变化，我尝试使用 filter、map、forEach，但我不知道该怎么做，有什么建议吗？

【问题讨论】：

  • 你能告诉我你想要什么输出吗？
  • 我想在 codProduct 为“B801278”的产品中获取 dataResponse 所有变体，除了一个具有 product_sku“B801278-18”的产品，因为在 prodPrueba 中选择了该变体，如果我的英语太糟糕了

标签： javascript arrays angular


【解决方案1】：

https://jsfiddle.net/par7hu5s/

// Test data setup
const prodPrueba = [
  {
    id: "B801278",
    variation: "B801278-18",
  },

  {
    id: "PC002",
    variation: "PC002",
  },
];

let dataResponse = [
  {
  codProduct: "PC002",
  created_at: "2021-01-19T11:28:06.000000Z",
  desc: null,
  html_description: null,
  html_short_description: null,
  id_kit: null,
  kit: [],
  manufacturer: null,
  material: null,
  name: "Kit de Limpeza",
  id: "PC002",
  status: "active",
  tags: null,
  theme: null,
  title: null,
  type: null,
  variations: 
  [
    {
      product: "PC002", 
      cod: "U", 
      sku: "U", 
      product_sku: "PC002", 
      price: 96000,
    }
  ]

  },
  {
    codProduct: "ENG792015_9",
    created_at: "2021-01-19T11:27:59.000000Z",
    desc: null,
    html_description: null,
    html_short_description: null,
    id_kit: null,
    kit: [],
    manufacturer: null,
    material: null,
    name: "Charm en Plata.",
    id: "ENG792015_9",
    status: "active",
    tags: null,
    theme: null,
    title: null,
    type: null,
    variations: [
      {
        cod: "U",
        product: "ENG792015_9",
        product_sku: "ENG792015_9",
        price: 415000,
        sku: "U"
      }
    ]
  },
  {
    codProduct: "B801278",
    created_at: "2021-01-19T11:27:30.000000Z",
    desc: null,
    html_description: null,
    html_short_description: "Set de Regalo Brazalete en Plata Clip",
    id_kit: null,
    kit: [],
    manufacturer: null,
    material: null,
    name: "Set de Regalo Brazalete en Plata, Clip",
    id: "B801278",
    status: "active",
    tags: null,
    theme: null,
    title: null,
    type: null,
    variations: [
      {
        cod: "U",
        price: 950000,
        product: "B801278",
        product_sku: "B801278",
        sku: "U"
      },
      {
        cod: "20",
        price: 950000,
        product: "B801278",
        product_sku: "B801278-20",
        sku: "U",
      },
      {
        cod: "19",
        price: 950000,
        product: "B801278",
        product_sku: "B801278-19",
        sku: "U",
      },
      {
        cod: "18",
        price: 950000,
        product: "B801278",
        product_sku: "B801278-18",
        sku: "U",
      },
      
    ]
  }
]

// First, we create an array of the current variation codes held in prodPrueba
const currentVariations = prodPrueba.map(p => p.variation);

// A reduce function is good if you need to drop products which have no variations after filtering
dataResponse = dataResponse.reduce((acc, curr) => {
    curr.variations = curr.variations.filter(v => {
    // Filter out any skus that are already in currentVariations
    return currentVariations.includes(v.product_sku) === false;
  })
  // Optional step to remove products with no variations, otherwise just push without the 'if' part
  if (curr.variations.length > 0) acc.push(curr);
  return acc;
}, [])

console.log(dataResponse);

如果过滤后没有可用的变体，我不知道你是否想完全放弃产品（看起来你可能会），但我已经记录了如何以任何方式调整它。

注意：如果你以前没有使用过 reduce 函数，它一开始可能会让人不知所措，但它绝对值得学习。

【讨论】：

  • 是的！这对男人有用，非常感谢！然后我必须研究减速器方法，因为我了解你做了什么，但是在减速器方法中我有点困惑
  • 一旦点击，并不是很难。基本上，reduce 是 Arrays 上的一种方法，它遍历每个项目并将累加器从一个迭代传递到下一个迭代。您通常会提供两个参数： 1. 对数组的每个项目执行的回调函数 2. 累加器的初始值 一个非常简单的示例可能是： const arr = [1, 2, 3, 4, 5] ; const total = arr.reduce((acc, curr) => { return acc + curr; }, 0);
【解决方案2】：

你能检查一下吗？ 

        let prodPrueba = [
            {
                id: "B801278",
                variation: "B801278-18",
            },

            {
                id: "PC002",
                variation: "PC002",
            },
        ];

        let dataResponse = [
            {
                codProduct: "PC002",
                created_at: "2021-01-19T11:28:06.000000Z",
                desc: null,
                html_description: null,
                html_short_description: null,
                id_kit: null,
                kit: [],
                manufacturer: null,
                material: null,
                name: "Kit de Limpeza",
                id: "PC002",
                status: "active",
                tags: null,
                theme: null,
                title: null,
                type: null,
                variations:
                    [
                        {
                            product: "PC002",
                            cod: "U",
                            sku: "U",
                            product_sku: "PC002",
                            price: 96000,
                        }
                    ]

            },
            {
                codProduct: "ENG792015_9",
                created_at: "2021-01-19T11:27:59.000000Z",
                desc: null,
                html_description: null,
                html_short_description: null,
                id_kit: null,
                kit: [],
                manufacturer: null,
                material: null,
                name: "Charm en Plata.",
                id: "ENG792015_9",
                status: "active",
                tags: null,
                theme: null,
                title: null,
                type: null,
                variations: [
                    {
                        cod: "U",
                        product: "ENG792015_9",
                        product_sku: "ENG792015_9",
                        price: 415000,
                        sku: "U"
                    }
                ]
            },
            {
                codProduct: "B801278",
                created_at: "2021-01-19T11:27:30.000000Z",
                desc: null,
                html_description: null,
                html_short_description: "Set de Regalo Brazalete en Plata Clip",
                id_kit: null,
                kit: [],
                manufacturer: null,
                material: null,
                name: "Set de Regalo Brazalete en Plata, Clip",
                id: "B801278",
                status: "active",
                tags: null,
                theme: null,
                title: null,
                type: null,
                variations: [
                    {
                        cod: "U",
                        price: 950000,
                        product: "B801278",
                        product_sku: "B801278",
                        sku: "U"
                    },
                    {
                        cod: "20",
                        price: 950000,
                        product: "B801278",
                        product_sku: "B801278-20",
                        sku: "U",
                    },
                    {
                        cod: "19",
                        price: 950000,
                        product: "B801278",
                        product_sku: "B801278-19",
                        sku: "U",
                    },
                    {
                        cod: "18",
                        price: 950000,
                        product: "B801278",
                        product_sku: "B801278-18",
                        sku: "U",
                    },

                ]
            }
        ]

        let filteredData = []
        dataResponse.forEach(x => {
            let found = prodPrueba.find(y => y.id == x.codProduct)
            if (found) {
                x.variations = x.variations.filter(z => z.product_sku != found.variation)
                if (x.variations.length != 0) {
                    filteredData.push(x)
                }
            } else {
                filteredData.push(x)
            }
        });
        console.log(filteredData);

【讨论】：

  • 非常感谢！这也有效！它对我来说有点复杂，因为数组很多
猜你喜欢
  • 2018-09-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-05-08
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode