Javascript从数组获取购物清单

如何解决Javascript从数组获取购物清单

我是javascript的新手，所以我甚至很难知道从哪里开始。请有人帮我。

我有以下成分清单：

const Ingris = [
  {
    val: "onion,",amount: "1",},{
    val: "paprika",amount: "½ tsp",{
    val: "yogurt",amount: "1/2 Cup",{
    val: "fine sea salt",amount: "½ tsp  ",];

我想根据以下这些变量对它们进行分类：

var spices = ["paprika","parsley","peppermint","poppy seed","rosemary"];
var meats = ["steak","ground beef","stewing beef","roast beef","ribs"];
var dairy = ["milk","eggs","cheese","yogurt"];
var produce = ["peppers","radishes","onions","tomatoes"];

这就是我想要获得的：

// desired output:

const ShoppingList = [
  {
    produceOutput: [
      {
        val: "garlic,minced",amount: "8 cloves ",],spicesOutput: [
      {
        val: "paprika",{
        val: "onion",NoCategoryOutput: [
      {
        val: "fine sea salt",];

解决方法

您可以使用基本的reducer进行此类操作。

const categorizedOutput = Ingris.reduce((acc,cur) => {
  if (spices.includes(cur.val)) {
    acc.spices.push(cur);
  } else if (meats.includes(cur.val)) {
    acc.meats.push(cur);
  } else if (dairy.includes(cur.val)) {
    acc.dairy.push(cur);
  } else if (produce.includes(cur.val)) {
    acc.produce.push(cur);
  } else {
    acc.other.push(cur);
  }
  return acc;
},{
  spices: [],meats: [],dairy: [],produce: [],other: []
})

,

正如这里的其他所有人所建议的那样，使用现代的reduce，includes或forEach数组方法...以防万一您需要支持较旧的浏览器或更多的“经典”实现，您可以对for数组方法使用简单的indexOf循环。

const Ingris = [{ val: "onion,",amount: "1",},{ val: "paprika",amount: "½ tsp",{ val: "yogurt",amount: "1/2 Cup",{ val: "fine sea salt",amount: "½ tsp  ",];
var spices = ["paprika","parsley","peppermint","poppy seed","rosemary"];
var meats = ["steak","ground beef","stewing beef","roast beef","ribs"];
var dairy = ["milk","eggs","cheese","yogurt"];
var produce = ["peppers","radishes","onions","tomatoes"];

ShoppingList = {
  produceOutput: [],spicesOutput: [],meatsOutput: [],dairyOutput: [],NoCategoryOutput: [],};

for (var i = 0; i < Ingris.length; i++) {
  var ingredient = Ingris[i];
  if (spices.indexOf(ingredient.val) >= 0) {
    ShoppingList.spicesOutput.push(ingredient);
  } else if (meats.indexOf(ingredient.val) >= 0) {
    ShoppingList.meatsOutput.push(ingredient);
  } else if (dairy.indexOf(ingredient.val) >= 0) {
    ShoppingList.dairyOutput.push(ingredient);
  } else if (produce.indexOf(ingredient.val) >= 0) {
    ShoppingList.produceOutput.push(ingredient);
  } else {
    ShoppingList.NoCategoryOutput.push(ingredient);
  }
}

console.log(ShoppingList)

还请记住，如果在Ingris中有一些重复成分，它们将不会总计。为此，您需要以某种数字格式（例如十进制数字）提供或转换每个金额。另外，除了简单的push之外，还有一些其他逻辑检查列表中是否已经存在当前成分，如果是，则添加它们的数量。

,

var spices  = ["paprika","rosemary"];
var meats   = ["steak","ribs"];
var dairy   = ["milk","tomatoes"];

var ingredients=[
  {"val":"onion,"amount":"1"},{"val":"paprika","amount":"½ tsp"},{"val":"yogurt","amount":"1/2 Cup"},{"val":"fine sea salt","amount":"½ tsp"}
];

var shoppingList={spices:[],meats:[],dairy:[],produce:[],other:[]};

ingredients.forEach(ingredient=>{
  if(spices.includes(ingredient.val)) shoppingList.spices.push(ingredient);
  else if(meats.includes(ingredient.val)) shoppingList.meats.push(ingredient);
  else if(dairy.includes(ingredient.val)) shoppingList.dairy.push(ingredient);
  else if(produce.includes(ingredient.val)) shoppingList.produce.push(ingredient);
  else shoppingList.other.push(ingredient);
});

console.log(shoppingList);

,

这是参数化的方式。我将不同的食物类别组合到一个对象cat中，并允许成分的部分匹配（单复数）：

const cat={ 
  spices: ["paprika","rosemary","fine sea salt"],meats: ["steak","ribs"],dairy: ["milk","yogurt"],produce: ["peppers","tomatoes"]};

var ingredients=[
  {"val":"onion","amount":"½ tsp"}
];

const shop=ingredients.reduce((acc,ing)=>{
  Object.entries(cat).some(([ca,pr])=>
    pr.find(p=>p.indexOf(ing.val)>-1) && 
    (acc[ca]=acc[ca]||[]).push(ing) )
  || (acc.other=acc.other||[]).push(ing);
  return acc;
},{});
console.log(shop);