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

我试图创建一个从数据库中检索的问题菜单列表，但是能够根据问题的类型和难度轻松/中等/难筛选问题。例如，如果我按难度进行筛选，并按循环的问题类型进行筛选，它将只列出那些JSON值满足这些条件的问题

我可以创建一个html菜单并显示来自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"
    }
]
}

---

您使用单词过滤器回答了您的问题

试试这个：

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)

---

你知道array.filter方法吗？过滤数组很容易，但很难说在没有显示该部分的情况下，该数组如何适合html生成代码。如果没有指定类型/难度，会发生什么情况？但我在实现此过滤系统时遇到问题-然后向我们展示您尝试的方法。请去读。你向我们展示你的尝试，解释你背后的理由，以及它是如何无法实现你想要的，这些都是最低要求。