根据两个单独的数组构造一个数组

问题描述

我正在尝试基于两个单独的数组构造一个数组，例如以下示例：

const breakfast = [
   { dishId: 23,name: 'Pasta'}
]

const ingredients = [
   // ...
   { ingrId: 13,name: 'Tomato' },{ ingrId: 29,name: 'Beef' }
]

// connecting table
const breakfastdishIngredients = [
   { id: 1,dishId: 23,ingrId: 13 },{ id: 1,ingrId: 29 }
]

新数组应该是早餐数组，其中每个元素都有一个附加的配料键。像这样：

const newBreakfast = [
   { dishId: 23,name: 'Pasta',ingredients: [
                { ingrId: 13,name: 'Beef' }
              ]}
] 

我正在尝试以下操作，但不起作用：

let newBreakfast = []

for(let i in breakfastdishIngredients) {
    _breakfast = breakfast.map(item => {
        return { ...item,ingredients: ingredients.filter(el => item.id === breakfastdishIngredients[i][0].dish_id && el.id === breakfastdishIngredients[i][0].ingredient_id) }
    })
}

感谢您的帮助。

解决方法

尝试一下：

const breakfast = [
   { dishId: 23,name: 'Pasta'}
]

const ingredients = [
   // ...
   { ingrId: 13,name: 'Tomato' },{ ingrId: 29,name: 'Beef' }
]

// connecting table
const breakfastDishIngredients = [
   { id: 1,dishId: 23,ingrId: 13 },{ id: 1,ingrId: 29 }
]

const result = breakfast.map(br => {
  const ingredientsFiltered = breakfastDishIngredients
                                .filter(brDiIngr => brDiIngr.dishId === br.dishId)
                                .map(el => ingredients.find(ingr => ingr.ingrId === el.ingrId));
  return { ...br,ingredients: ingredientsFiltered };
});

console.log(result);

,

const breakfast = [
   { dishId: 23,name: 'Pasta'}
];
const ingredients = [
   // ...
   { ingrId: 13,name: 'Beef' }
];
const breakfastDishIngredients = [
   { id: 1,ingrId: 29 }
];

let newBreakfast=breakfast.map(
  dish=>(
    {
      dishId:dish.dishId,name:dish.name,ingredients:
      breakfastDishIngredients.filter(
        ingredient=>ingredient.dishId==dish.dishId
      ).map(
        filtered=>(
          ingredients.filter(
            ingredient=>ingredient.ingrId==filtered.ingrId
          )
        )
      ).flat()
    }
  )
)

console.log(newBreakfast);

,

您可以做这样的事情

const breakfast = [ { dishId: 23,name: 'Pasta' } ];

const ingredients = [
    // ...
    { ingrId: 13,name: 'Beef' }
];

// connecting table
const breakfastDishIngredients = [ { id: 1,ingrId: 29 } ];

const newBreakfast = [
    {
        dishId: 23,name: 'Pasta',ingredients: [ { ingrId: 13,name: 'Beef' } ]
    }
];

let result = breakfast.map((item) => ({ ...item,ingredients: ingredients }));
console.log(result);

,

Reducer和一些实用程序的解决方案可提高可重用性。

const breakfast = [
   { dishId: 23,ingrId: 29 },dishId: 24,ingrId: 29 }
]

//utils
const lookUp = idString => arr => targetId => arr.filter(el => el[idString] == targetId)

// FP specialization
const lookUpIngrId = lookUp("ingrId")(ingredients);
const lookUpDishId = lookUp("dishId")(breakfast);

const getFirstOneOrNull = arr => Array.isArray(arr) && arr.length === 1 ? arr[0] : null;

//reducer
const reducerBreakFast = (acc,currentValue) => {
  const id = getFirstOneOrNull(lookUpDishId(currentValue.dishId))
  if(!id){
    return acc;
  }
  const ingrValue = getFirstOneOrNull(lookUpIngrId(currentValue.ingrId))
  acc.has(id) ? acc.set(id,[...acc.get(id),ingrValue]) : acc.set(id,[ingrValue])
  return acc;
}

const mapNewBreakfast = breakfastDishIngredients.reduce(reducerBreakFast,new Map())

const mapToArray = dataMap => Array.from(dataMap.keys()).map(key => ({
  ...key,ingredients: dataMap.get(key)
}))

const newBreakfast = mapToArray(mapNewBreakfast);

输出：

{
  dishId: 23,name: 'Beef' } ]
}