React：使用多个可能值的数组过滤 json 对象答案

【问题标题】：React : filter json object with array of multiple possible valuesReact：使用多个可能值的数组过滤 json 对象
【发布时间】：2020-12-04 16:57:18
【问题描述】：

我有一个 json 对象
我像这样将它导入到 react 组件中

import data from "../data/data.json";

这是我的 json 对象

{
"Cocktail": [
  {
        "id": 1,
        "name": "PL",
        "illustration": "img1",
        "ingredient": [{"percent": "1/10","ingredientname": "br"},
        {"percent": "4/10","ingredientname": "or"},
        {"percent": "5/10","ingredientname": "vo"}]
  },
...
  {
    "id": 3,
    "name": "AN",
    "illustration": "img3",
    "ingredient": [{"percent": "2/10","ingredientname": "br"},
     {"percent": "2/10","ingredientname": "li"},
     {"percent": "6/10","ingredientname": "ri"}
      ] 
    }
  ] 
}

我有这个数组

ingred = ["br", "or"]

我想过滤 json 对象文件：具有ingred数组的对应值之一并返回关联的每个元素的名称的成分名称

我试过了

  return (
    <>
    {
    data.Cocktail
      .map((cocktail) => {
        return (
          <>
          {
           cocktail.ingredient.filter(ingredientcocktail => ingredientcocktail.ingredientname === ingred).map((ingredientcocktail) => {
                return (
                    <span key={cocktail.name}>
                    </span>
                );
              })
          }
          </> 
        );
      })
    }
  </>
  );

但它不起作用：我不知道如何通过第二个数组的项目进行过滤。有人可以帮助我吗？

【问题讨论】：

标签： json reactjs mapping filtering

【解决方案1】：

我想我找到了解决办法：

data.Cocktails
  .map((cocktail) => {
    return (
      <>
      {
       cocktail.ingredient
        .filter(ingredientcocktail => ingred .includes(ingredientcocktail.ingredientname))
        .map((ingredientcocktail) => {
            return (
                <div key={ingredientcocktail.ingredientname}>
                  {cocktail.name}
                </div>
            );
          })
      }
      </> 
    );
  })
}

感谢您的回答。

【讨论】：

【解决方案2】：

抱歉，ReactJs 无法帮助您，但这应该适用于“普通”JS：

let obj = {
    "Cocktail": [
      {
            "id": 1,
            "name": "PL",
            "illustration": "img1",
            "ingredient": [{"percent": "1/10","ingredientname": "br"},
            {"percent": "4/10","ingredientname": "or"},
            {"percent": "5/10","ingredientname": "vo"}]
      },
      {
        "id": 3,
        "name": "AN",
        "illustration": "img3",
        "ingredient": [{"percent": "2/10","ingredientname": "br"},
         {"percent": "2/10","ingredientname": "li"},
         {"percent": "6/10","ingredientname": "ri"}
          ] 
        },
        {
          "id": 4,
          "name": "asdasd",
          "illustration": "asdasd",
          "ingredient": [{"percent": "2/10","ingredientname": "asdasd"},
           {"percent": "2/10","ingredientname": "asdasd"},
           {"percent": "6/10","ingredientname": "asdasd"}
            ] 
          }
      ] 
    };
let wanted = ["br", "or"]
let res = obj.Cocktail.filter(
              el => el.ingredient.some( 
                   i => wanted.some(w => w == i.ingredientname)
              )
          ).map(cocktail => cocktail.name);
console.log(res)

（这并不是说“最有效的方法”，所以如果您有更有效的方法，请随时回答，不要在 cmets 上抱怨）

【讨论】：