Add style to array element from another object array

Question

I have an array, that represents the question numbers.

There is an another object array, that contains user answer (question number and whether user's answer is correct or wrong).

questions = [] // question numbers
validity = [{answer: true, questionNo: "2"},{answer: false, questionNo: "3"}] // user answers array

What i'm trying to do is, highlight correct questions with green color and wrong questions with red color.

I tried below when validity array has two records, however, it only highlited last record:

{
  questions.map((i, index) => {
    let className = '';
    if (validity) {
      validity.map((data) => {
        if (Object.keys(data).length) {
          if ((Number(data.questionNo) === index)) {
            if (data.answer) {
              className = `question-list correct-q` // when answer `true`,set div to green color
            } else {
              className = `question-list wrong-q` // when answer `false`,set div to red
            }
          } else {
            className = `question-list` // default div color
          }
        }
      })
    
    } else {
      className = `question-list`
    }
    return (index != 0) && 
      <div 
        className={className} 
        key={index} 
        onClick={() => onclickQuestion(index)}
      >
        Q - {index}
      </div>
  })
}

I want to color Q-2 with green color and Q-3 with red color at same time.

Danziger · Accepted Answer · 2021-05-09 13:42:03Z

You can first turn your validity array into an object where the key is the question number and the value is the validity and then use that instead using Array.prototype.reduce():

const validityObject = validity.reduce((obj, question) => {
  obj[parseInt(question.questionNo)] = question.answer;

  return obj;
}, {});

validityObject:

{
  "2": true,
  "3": false
}

Now, you can simplify the logic inside the loop and use that instead of a nested loop, which is simpler and more performant (as you only need to do an object lookup to check the validity of each question):

const questions = Array.from(Array(20), (_, i) => i + 1);

const validity =[{
  answer: true,
  questionNo: "2"
 },{
  answer: false,
  questionNo: "3"
}];

const validityObject = validity.reduce((obj, question) => {
  obj[parseInt(question.questionNo)] = question.answer;
  
  return obj;
}, {});

document.getElementById('root').innerHTML = questions.map((questionNumber) => {
  const valid = validityObject[questionNumber];

  let className = 'question-list';   

  if (valid === true) {
    className = 'question-list correct-q';
  } else if (valid === false) {
    className = 'question-list wrong-q';
  }
         
  return `
    <div class="${ className }">
     Q - ${ questionNumber }
    </div>
  `;
}).join('');

.question-list {
  border: 2px solid #F0F0F0;
  padding: 8px;
  font-family: monospace;
  margin: 8px 0 0 0;
  border-radius: 4px;
}

.correct-q {
  border-color: green;
}

.wrong-q {
  border-color: red;
}

<div id="root"></div>

T J · Accepted Answer · 2021-05-09 13:32:10Z

2

You can find validity object using Array.find() like this:

{
  questions.map((i, index) => {
    let className = 'question-list'; // default
    const answerObj = validity.find(answer => answer.questionNo == index);
    const isValid = answerObj.answer;
    if (isValid) {
      className = 'question-list correct-q' // when answer "true", set div to green color
    } else {
      className = 'question-list wrong-q' // when answer "false", set div to red
    }
  })
  // ...
}

answered May 9, 2021 at 13:32

T J

43.2k13 gold badges87 silver badges142 bronze badges

Collectives™ on Stack Overflow

Add style to array element from another object array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related