Skip to content
Advertisement

Filter an array of objects by one key and show another

I’m trying to filter out questions based on the difficulty that is set to the question in the array. So when I check the box at the beginning of the quiz it will display the question based on the difficulty it has been assigned. I think I have the filter right but I don’t know how to display the question. This is the code I have written.

let questionE1 = document.getElementById("question")
let a_answer = document.getElementById("a-answer");
let b_answer = document.getElementById("b-answer");
let c_answer = document.getElementById("c-answer");
let d_answer = document.getElementById("d-answer");
let submitBtn = document.getElementById("submit");

let currentQuiz = 0;

let easyDifficulty = document.getElementById("easy-diff");
let mediumDifficulty = document.getElementById("medium-diff");
let hardDifficulty = document.getElementById("hard-diff");
let difficulty = document.querySelectorAll('[name="difficulty"]');
let difficultyLevel = "";

let questionE1 = document.getElementById("question")
let a_answer = document.getElementById("a-answer");
let b_answer = document.getElementById("b-answer");
let c_answer = document.getElementById("c-answer");
let d_answer = document.getElementById("d-answer");
let submitBtn = document.getElementById("submit");

let questions = [
    {
        question: `What is the biggest city in the USA`,
        a: `Chicago`,
        b: `Los Angeles`,
        c: `Boston`,
        d: `New York`,
        answer: `d`,
        difficulty:`hard`
    },

    {
        question: `What is the longest river on the earth`,
        a: `Amazon`,
        b: `Nile`,
        c: `Amur`,
        d: `Mississippi`,
        answer: `b`,
        difficulty:`medium`
    },

    {
        question: `What is the highest mountain on earth`,
        a: `Everest`,
        b: `K2`,
        c: `Broad Peak`,
        d: `Manaslu`,
        answer: `a`,
        difficulty:`easy`
    },
]

let filteredQuestions  = questions.filter(question => question.difficulty === difficultyLevel)

let pickDifficulty = () => {
    if (easyDifficulty.checked){
        difficultyLevel = "easy";
    } else if (mediumDifficulty.checked){
        difficultyLevel = "medium";
    }else if (hardDifficulty.checked){
        difficultyLevel = "hard";
    }
}


function getQuestion() {

    if (pickDifficulty === "easy") {
        return filteredQuestions.value;
    } else if (pickDifficulty === "medium"){
        return filteredQuestions.value;
    } else if (pickDifficulty === "hard"){
        return filteredQuestions.value;
    }
}

displayQuestion ()

function displayQuestion () {

    let currentQuestion = questions[currentQuiz]

    questionE1.innerText = currentQuestion.question
    a_answer.innerText = currentQuestion.a
    b_answer.innerText = currentQuestion.b
    c_answer.innerText = currentQuestion.c
    d_answer.innerText = currentQuestion.d
}

Advertisement

Answer

A few problems.

difficultyLevel is not assigned a usable value before used in the declaration of filteredQuestions. One solution is to make it function, to be called later.

Also, pickDifficulty is declared as a function, but later referred to without execution:

if (pickDifficulty === "easy") {

(This may be a typo, and the intention was to compare it to the global variable difficultyLevel.)

And, when referring to filteredQuestions, a non-existent property, value, is called:

return filteredQuestions.value;

Along with that, as the return value of the filter() function it would be an array, not an object. So:

let filteredQuestions = questions.filter(...)

…assigns an array to filteredQuestions.

//let currentQuiz = 0;

let easyDifficulty = document.getElementById("easy-diff");
let mediumDifficulty = document.getElementById("medium-diff");
let hardDifficulty = document.getElementById("hard-diff");
let difficulty = document.querySelectorAll('[name="difficulty"]');
let difficultyLevel = "";

let questionE1 = document.getElementById("question")
let a_answer = document.getElementById("a-answer");
let b_answer = document.getElementById("b-answer");
let c_answer = document.getElementById("c-answer");
let d_answer = document.getElementById("d-answer");
//let submitBtn = document.getElementById("submit");

let questions = [
    {
        question: `What is the biggest city in the USA`,
        a: `Chicago`,
        b: `Los Angeles`,
        c: `Boston`,
        d: `New York`,
        answer: `d`,
        difficulty:`hard`
    },

    {
        question: `What is the longest river on the earth`,
        a: `Amazon`,
        b: `Nile`,
        c: `Amur`,
        d: `Mississippi`,
        answer: `b`,
        difficulty:`medium`
    },

    {
        question: `What is the highest mountain on earth`,
        a: `Everest`,
        b: `K2`,
        c: `Broad Peak`,
        d: `Manaslu`,
        answer: `a`,
        difficulty:`easy`
    },
]

let filteredQuestions = (difficultyLevel) => { 
    return questions.filter(question => question.difficulty === difficultyLevel);
}

/*
let pickDifficulty = () => {

    if (easyDifficulty.checked){
        return "easy";
    } else if (mediumDifficulty.checked){
        return "medium";
    } else if (hardDifficulty.checked){
        return "hard";
    }
} */


function getQuestion (diff) {

    if (diff === "easy") {
        return filteredQuestions(diff); //.value;
    } else if (diff === "medium"){
        return filteredQuestions(diff); //.value;
    } else if (diff === "hard"){
        return filteredQuestions(diff); //.value;
    }
    return [{}];
}

function displayQuestion ({target: diff}) {

    //let currentQuestion = questions[currentQuiz]
        let question = getQuestion(diff.value);
    questionE1.innerText = question[0].question
    a_answer.innerText = question[0].a
    b_answer.innerText = question[0].b
    c_answer.innerText = question[0].c
    d_answer.innerText = question[0].d
}

difficulty.forEach(diff => diff.addEventListener("change", displayQuestion));
<input type="radio" name="difficulty" id="easy-diff" value="easy"> easy<br>
<input type="radio" name="difficulty" id="medium-diff" value="medium"> medium<br>
<input type="radio" name="difficulty" id="hard-diff" value="hard"> hard<br>

<div id="question"></div>
<div id="a-answer"></div>
<div id="b-answer"></div>
<div id="c-answer"></div>
<div id="d-answer"></div>
User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement