javascript - 如何使用纯 JS 通过我从中检索内容的 json 中的特定值过滤 HTML 菜单？

Question

我正在尝试创建一个从数据库中检索的问题菜单列表，但能够根据问题的类型和难度(简单/中等/困难)过滤问题。因此，例如，如果我按难度“困难”和问题类型“for 循环”进行过滤，它只会列出 JSON 值满足这些要求的问题。

我创建一个 html 菜单并显示来 self 的 JSON 的所有问题没有问题，但是我在实现这个过滤系统时遇到了问题。 这是我从数据库请求中返回的 JSON 对象的示例

{
"questions": [
    {
        "questionId": "1",
        "questionText": "Create a function named \"add\" that adds 2 parameters",
        "testCase": "3,5",
        "expectedReturn": "8"
        "difficulty":"hard"
        "type":"general"
    },
    {
        "questionId": "12",
        "questionText": "Write a function named \"subtract\" that takes two integers, and subtracts the second from the first.",
        "testCase": "10,3",
        "expectedReturn": "7"
        "difficulty":"medium"
        "type":"math"
    },
    {
        "questionId": "88",
        "questionText": "Write a function named \"reverse\" that takes one parameter, a string t, and returns the string backwards.",
        "testCase": "hello",
        "expectedReturn": "olleh"
        "difficulty":"easy"
        "type":"string"
    },
    {
        "questionId": "89",
        "questionText": "Write a function called \"greeting\" that takes in one string parameter, name, and returns the string \"Hello \" followed by the name.",
        "testCase": "Bob",
        "expectedReturn": "Hello Bob"
        "difficulty":"hard"
        "type":"for loop"   //doesn't make sense, but just as an example
    },
    {
        "questionId": "90",
        "questionText": "Write a function named isEvenOrOdd that takes in an integer n, and returns \"even\" if it is even, and \"odd\" if it is odd.",
        "testCase": "12",
        "expectedReturn": "even"
    },
    {
        "questionId": "93",
        "questionText": "Write a function named \"addFiveDivideFive\" that takes in 5 integer parameters, adds them all together, and divides the sum by 5. Return this quotient.",
        "testCase": "10,5,15,25,35,50",
        "expectedReturn": "28"
    },
    {
        "questionId": "94",
        "questionText": "Write a function called findLength that takes in a string parameter t, and returns the length of that string.",
        "testCase": "helloworld",
        "expectedReturn": "10"
         "difficulty":"easy"
         "type":"general"
    },
    {
        "questionId": "95",
        "questionText": "Write a function named multiply that takes in two integers, and returns the product",
        "testCase": "3,5",
        "expectedReturn": "15"
        "difficulty":"hard"
        "type":"math"
    }
]
}

Answer 1

您使用 filter 这个词回答了您的问题

试试这个:

var filterValue = 'easy'
var filteredMenu = yourObject.questions.filter(function(q) {
  return q.difficulty === filterValue
})

console.log(filteredMenu)

或者 ES6 版本

const filterValue = 'easy'
const filteredMenu = yourObject.questions.filter(q => q.difficulty === filterValue)

console.log(filteredMenu)