如何从数组内部的对象中找到匹配的 key/pair 值

Question

我正在使用 Gatsby 开发无头 Shopify 商店，但在构建强大的产品选项选择器时遇到了一些问题。

我有一个 options 对象，如下所示：

{
  extras: "Pouch only",
}

每个产品的键和值都会不同，所以我不知道值。

我有一个 variants 数组，其中有一个 key/value 对与该对象匹配。这是变量数组的形状：

[
  {
    extras: "Pouch only",
    ...otherValues,
  },
  {
    extras: "Add tassel",
    ...otherValues,
  },
  {
    extras: "Add charm",
    ...otherValues,
  },
  {
    extras: "Add tassel & charm",
    ...otherValues,
  },
  {
    sizes: "S",
    ...otherValues,
  },
  {
    sizes: "M",
    ...otherValues,
  },
  {
    sizes: "L",
    ...otherValues,
  },
  {
    sizes: "XL",
    ...otherValues,
  },
];

如果我提前知道变体的名称，我可以这样做：

const newVariant = variants.find((v) => {
  return v.extras === options.extras;
});

如何在不知道密钥名称的情况下做同样的事情？

Answer 1

使用 Object.entries 可以检索 key/value 对对象，并检查 .some（或 .every 取决于您的需要）是否匹配：

const newVariant = variants.find((v) => Object.entries(options).some(([key, value]) => v[key] === value));

Answer 2

获取 option 对象的条目并将它们字符串化。然后，在搜索 variants 时，查找（或过滤）具有与先前字符串化的条目匹配的条目的条目：

const optionsEntryVariants = Object.entries(options).map(JSON.stringify);
const matchingVariants = variants.filter(
  variant => Object.entries(variant).some(
    entry => optionsEntryVariants.includes(JSON.stringify(entry))
  )
);

const options = {
  extras: "Pouch only",
};

const optionsEntryVariants = Object.entries(options).map(JSON.stringify);

const variants = [
  {
    extras: "Pouch only",
    someOtherProp: 'someOtherVal',
  },
  {
    extras: "Add tassel",
    someOtherProp: 'someOtherVal',
  },
  {
    extras: "Add charm",
    someOtherProp: 'someOtherVal',
  },
  {
    extras: "Add tassel & charm",
    someOtherProp: 'someOtherVal',
  },
  {
    sizes: "S",
    someOtherProp: 'someOtherVal',
  },
  {
    sizes: "M",
    someOtherProp: 'someOtherVal',
  },
  {
    sizes: "L",
    someOtherProp: 'someOtherVal',
  },
  {
    sizes: "XL",
    someOtherProp: 'someOtherVal',
  },
];

const matchingVariants = variants.filter(
  variant => Object.entries(variant).some(
    entry => optionsEntryVariants.includes(JSON.stringify(entry))
  )
);

console.log(matchingVariants);

如果您需要匹配 options 对象中的每个键值对，而不是至少匹配一个，则更改 .some 到 .every.

您可以通过创建一组字符串化条目而不是使用数组来提高函数的效率：

const optionsEntryVariants = new Set(
  Object.entries(options).map(JSON.stringify)
);
const matchingVariants = variants.filter(
  variant => Object.entries(variant).some(
    entry => optionsEntryVariants.has(JSON.stringify(entry))
  )
);

Answer 3

您可以循环遍历对象键进行检查。我认为这可以解决您的问题。

const options = {
    extras: "Pouch only",
};

const otherValues = {};

const variants = [
    {
        extras: "Pouch only",
        ...otherValues,
    },
    {
        extras: "Add tassel",
        ...otherValues,
    },
    {
        extras: "Add charm",
        ...otherValues,
    },
    {
        extras: "Add tassel & charm",
        ...otherValues,
    },
    {
        sizes: "S",
        ...otherValues,
    },
    {
        sizes: "M",
        ...otherValues,
    },
    {
        sizes: "L",
        ...otherValues,
    },
    {
        sizes: "XL",
        ...otherValues,
    },
];

let optionsKey = '';
for (const opKey in options) {
    optionsKey = opKey
}

const newVariant = variants.find((v) => {
    for (const vKey in v) {
        if (vKey === optionsKey) {
            return v[vKey] === options[optionsKey];
        }
    }
});

Answer 4

您可以使用 filter 然后在其中使用 some 来完成此操作。方法如下：

var data = data = [ { extras: "Pouch only" }, { extras: "Add tassel",size : 'SomeFilter' }, { extras: "Add charm" }, { extras: "Add tassel & charm", }, { sizes: "S" }, { sizes: "M", }, { sizes: "L" }, { sizes: "XL" }];

filter = { extras: "Pouch only" }

var objectToFilter = Object.entries(filter);

result1 = data.filter(val=>objectToFilter.some(([k,v])=>val.hasOwnProperty(k) && val[k].includes(v)));

filter = { extras: "Pouch only", size : 'SomeFilter'};

var objectToFilter = Object.entries(filter);

result2 = data.filter(val=>objectToFilter.some(([k,v])=>val.hasOwnProperty(k) && val[k].includes(v)));

console.log(result2);

此外，如果您想搜索过滤器中的所有值，some 可以替换为 every 方法。

如何从数组内部的对象中找到匹配的 key/pair 值

How do I find matching key/pair value from object inside of an array

javascript

shopify