带有 lodash 的数组过滤器用于本机反应答案

【问题标题】：array filter with lodash for react native带有 lodash 的数组过滤器用于本机反应
【发布时间】：2022-01-30 10:24:06
【问题描述】：

我有一个如下所示的数组对象：

[{
        sellerId: "seller1",
        name: "Nike",
        item: [{
                id: "xxx1"
                isChecked: false
                price: "719700.00"
                productName: "product a"
                quantity: 2
            },
            {
                id: "xxx2"
                isChecked: true
                price: "219700.00"
                productName: "product b"
                quantity: 1

            }
        ],
    },
    {
        sellerId: "seller2",
        name: "Adidas",
        item: [{
                id: "xxx1"
                isChecked: false
                price: "49700.00"
                productName: "product x"
                quantity: 1
            },
            {
                id: "xxx2"
                isChecked: true
                price: "4700.00"
                productName: "product y"
                quantity: 5

            }
        ],
    },
]

现在我想通过 isChecked = true 在名为 Item 的对象上转换或过滤我的数据，所以它看起来像这样：

[{
        sellerId: "seller1",
        name: "Nike",
        item: [
            {
                id: "xxx2"
                isChecked: true
                price: "219700.00"
                productName: "product b"
                quantity: 1

            }
        ],
    },
    {
        sellerId: "seller2",
        name: "Adidas",
        item: [
            {
                id: "xxx2"
                isChecked: true
                price: "4700.00"
                productName: "product y"
                quantity: 5

            }
        ],
    },
]

已编辑：

然后如果没有 isChecked: true 在一个卖家中，它不会显示卖家数据，例如如果阿迪达斯卖家没有 isChecked，我预计对象将如下所示：

[{
        sellerId: "seller1",
        name: "Nike",
        item: [
            {
                id: "xxx2"
                isChecked: true
                price: "219700.00"
                productName: "product b"
                quantity: 1

            }
        ],
    },
]

我已经尝试过像这样使用 lodash，但它仍然没有删除具有 isChecked: false 的项目

_.filter(data, { item: [{ isChecked: false }] })

对我如何使用 lodash 或简单的 javascript filter() 有任何帮助吗？

谢谢！

【问题讨论】：

标签： javascript reactjs react-native filter lodash

【解决方案1】：

您可以使用 filter 和 map 功能：

sellers = data.map((d) => {return {...d, item: d.item.filter(i=>i.isChecked)}})

对于空项目，您可以像这样再次过滤它：

filterd_seller = sellers.filter(seller => seller.item.length)

或者您可以使用reduce更好的答案：

data.reduce((filtered, seller) => {
  const item = seller.item.filter(i => i.isChecked);
  if (item.length) {
     filtered.push({...seller, item });
  }
  return filtered;
}, []);

【讨论】：

嗨 Elham，它有效，但你输入错误，...d 应该在返回后的第一行.. 无论如何，还有一件事，如果没有 isChecked: true on Adidas 卖家例如，它只返回耐克的数据，我该怎么做？
我为你的第二个问题编辑我的答案

【解决方案2】：

映射对象数组（使用 lodash 或 vanilla），然后重新创建对象，同时使用 isChecked: false 过滤掉任何项目：

const arr = [{"sellerId":"seller1","name":"Nike","item":[{"id":"xxx1","isChecked":false,"price":"719700.00","productName":"product a","quantity":2},{"id":"xxx2","isChecked":true,"price":"219700.00","productName":"product b","quantity":1}]},{"sellerId":"seller2","name":"Adidas","item":[{"id":"xxx1","isChecked":false,"price":"49700.00","productName":"product x","quantity":1},{"id":"xxx2","isChecked":true,"price":"4700.00","productName":"product y","quantity":5}]}]

const result = arr.map(({ item, ...o }) => ({
  ...o,
  item: item.filter(o => o.isChecked)
}))

console.log(result)

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

【讨论】：