javascript - 根据所选偏好匹配数据

Question

我正在尝试使用 Vue 构建一个锻炼应用程序，您可以在其中根据所选的偏好生成锻炼。用户可以选择一些选项，然后单击按钮来生成锻炼。收集的数据是数组的对象，每个数组包含所选选项的对象(例如:允许的持续时间)锻炼、难度、首选练习)

this.generatorData = {
  types: [],
  style: [],
  muscleGroups: [],
  difficulty: [
    { title: 'Beginner', ..some properties },
    { title: 'Intermediate', .. }
  ]
}

我还有一组练习，它们具有与生成的对象相同的属性，但是是预定义的。

exercises: [
  {
    title: 'Name',
    type: 'Weights',
    style: ['Strength Building'],
    muscleGroups: ['Back', 'Chest'],
    difficulty: 'Intermediate'
  },
  {
    title: 'Name',
    type: 'Weights',
    style: ['Strength Building'],
    muscleGroups: ['Back', 'Chest'],
    difficulty: 'Intermediate'
  }
]

我想将练习与数据/首选项对象相匹配。这是一个函数，但不幸的是我只能对其进行硬编码，并且它无法按预期工作。我需要将 this.generatorData 中的数据与 exercises 进行比较 - 循环遍历所有练习并找到符合要求的数据。有没有办法让它工作，如果可能的话，我该如何自动化这个功能？

 match() {
     let categories = Object.values(this.generatorData)
     for(let category of categories) {
         if(category.length > 1) {
             this.exercises.filter(exercise => {
                 if(exercise.type === category[0].name || exercise.type === category[1].name || exercise.type === category[2].name) {
                     if(exercise.difficulty === category[categories.length - 1].name) {
                         this.matchedExercies.push(exercise)
                     }
                 }
             })
         }
         else if(category.length === 1) {
             let filtered = this.exercises.filter(exercise => exercise.type === category[0].name)
             console.log(filtered)
             this.matchedExercies = filtered
         }
     }
 }

这是一个codeSandbox .

Answer 1

所以这是一个普通 js 的问题，而不是 vue 的问题。

假设过滤是使用跨过滤器的 AND 和跨过滤器选择的 OR 完成的，这是一个工作版本(需要对架构进行一些更改)

// the values are in an array, to use the `title` some changes may be needed
const generatorData = {
  types: [],
  style: [],
  muscleGroups: [{name:'Back'}],
  difficulty: [{name:'Beginner'},{name:'Intermediate'}]
}

const exercises = [
  {
    title: 'Name',
    type: 'Weights',
    style: ['Strength Building'],
    muscleGroups: ['Toes', 'Chest'],
    difficulty: 'Intermediate'
  },
  {
    title: 'Name',
    type: 'Weights',
    style: ['Strength Building'],
    muscleGroups: ['Back', 'Chest'],
    difficulty: 'Intermediate'
  },
  {
    title: 'Name',
    type: 'Weights',
    style: ['Strength Building'],
    muscleGroups: ['Back', 'Chest'],
    difficulty: 'Effin Hard'
  }
]
// I loop over the categories first, removing any that are not needed
const categories = Object.keys(generatorData).map(k => {
  // if you want to keep using `title`, this is a good place to do that (val from all titles)
	if (generatorData[k].length > 0) return { key: k, val: generatorData[k].map(g => g.name) };;
  return false
}).filter(i => i !== false);

let filtered = exercises.filter(e => {
  // filter all categories, and compare length of matching filters with the number of filters (enforces AND rule)
  return categories.filter(f => {
    // if key is missing, assume true
    if (e[f.key] === undefined) return true;
    // loop through filter values and make sure at leas one matches (OR condition)
    return f.val.filter(v => {
      // handle string as direct match
      if (typeof e === "string") return e[f.key] === v;
      // handle array with `includes`
      return e[f.key].includes(v)
    }).length > 0
  }).length === categories.length;
})

console.log(filtered)

<小时/>

更新

查看codesandbox，您的商店实际上为generatorData提供了name而不是title

而不是:

difficulty: [
  { title: 'Beginner', ..some properties },
  { title: 'Intermediate', .. }
]

它使用:

difficulty: [
  { name: 'Beginner'},
  { name: 'Intermediate'}
]

代码已更新为使用具有名称的对象数组