Javascript比较两个复杂对象

Question

我正在对考试应用程序做出反应。我有两个数组，一个是用户给出的答案，一个是正确答案。比较它们并没有显示正确的结果。我正在使用钩子，代码在 useEffect 钩子内。结果也没有显示正确的问题数量。questions = [{Qid: 1, Question: "This is question 1",     Answers:[{Ans1:"Answer1",IsCorrect:true}          {Ans2:"Answer2",IsCorrect:false}          {Ans3:"Answer3",IsCorrect:false}          {Ans4:"Answer4",IsCorrect:false}]},{Qid: 2, Question: "This is question 2",     Answers:[{Ans1:"Answer1",IsCorrect:false}          {Ans2:"Answer2",IsCorrect:true}          {Ans3:"Answer3",IsCorrect:false}          {Ans4:"Answer4",IsCorrect:false}]},{Qid: 3, Question: "This is question 3",     Answers:[{Ans1:"Answer1",IsCorrect:true}          {Ans2:"Answer2",IsCorrect:false}          {Ans3:"Answer3",IsCorrect:false}          {Ans4:"Answer4",IsCorrect:false}]},{Qid: 4, Question: "This is question 4",     Answers:[{Ans1:"Answer1",IsCorrect:false}          {Ans2:"Answer2",IsCorrect:false}          {Ans3:"Answer3",IsCorrect:true}          {Ans4:"Answer4",IsCorrect:false}]}]keyquestions = [{Qid: 1, Question: "This is question 1",     Answers:[{Ans1:"Answer1",IsCorrect:false}          {Ans2:"Answer2",IsCorrect:true}          {Ans3:"Answer3",IsCorrect:false}          {Ans4:"Answer4",IsCorrect:false}]},{Qid: 2, Question: "This is question 2",     Answers:[{Ans1:"Answer1",IsCorrect:false}          {Ans2:"Answer2",IsCorrect:true}          {Ans3:"Answer3",IsCorrect:false}          {Ans4:"Answer4",IsCorrect:false}]},{Qid: 3, Question: "This is question 3",     Answers:[{Ans1:"Answer1",IsCorrect:true}          {Ans2:"Answer2",IsCorrect:false}          {Ans3:"Answer3",IsCorrect:false}          {Ans4:"Answer4",IsCorrect:false}]},{Qid: 4, Question: "This is question 4",     Answers:[{Ans1:"Answer1",IsCorrect:false}          {Ans2:"Answer2",IsCorrect:true}          {Ans3:"Answer3",IsCorrect:false}          {Ans4:"Answer4",IsCorrect:false}]}]

Answer 1

我已经根据您提供的输入进行了比较，并且效果很好。

但我建议对您的答案数组和问题数组进行一些结构更改，这将提高性能。这种结构可以帮助您非常轻松地扩展系统。

1. 答案数组需要如下结构

   [{ "Qid": 1, "answer" : "user selected answer"}, { "Qid": 2, "answer" : "user selected answer"}]

2. 问题数组应更改如下

 [{Qid: 1, Question: "This is question 1",

Answers:[{"option":"Answer1",IsCorrect:false}, 

   {"option":"Answer2",IsCorrect:true},{"option":"Answer3",IsCorrect:false}

   {"option":"Answer4",IsCorrect:false}]}]

let userAnswers = [{Qid: 1, Question: "This is question 1", Answers:[{Ans1:"Answer1",IsCorrect:false}, {Ans2:"Answer2",IsCorrect:false}, {Ans3:"Answer3",IsCorrect:false}, {Ans4:"Answer4",IsCorrect:false}]},{Qid: 2, Question: "This is question 2", Answers:[{Ans1:"Answer1",IsCorrect:false}, {Ans2:"Answer2",IsCorrect:true}, {Ans3:"Answer3",IsCorrect:false}, {Ans4:"Answer4",IsCorrect:false}]},{Qid: 3, Question: "This is question 3", Answers:[{Ans1:"Answer1",IsCorrect:true}, {Ans2:"Answer2",IsCorrect:false}, {Ans3:"Answer3",IsCorrect:false}, {Ans4:"Answer4",IsCorrect:false}]},{Qid: 4, Question: "This is question 4", Answers:[{Ans1:"Answer1",IsCorrect:false}, {Ans2:"Answer2",IsCorrect:false}, {Ans3:"Answer3",IsCorrect:true}, {Ans4:"Answer4",IsCorrect:false}]}];

let keyquestions = [{Qid: 1, Question: "This is question 1", Answers:[{Ans1:"Answer1",IsCorrect:false}, {Ans2:"Answer2",IsCorrect:true}, {Ans3:"Answer3",IsCorrect:false}, {Ans4:"Answer4",IsCorrect:false}]},{Qid: 2, Question: "This is question 2", Answers:[{Ans1:"Answer1",IsCorrect:false}, {Ans2:"Answer2",IsCorrect:true}, {Ans3:"Answer3",IsCorrect:false}, {Ans4:"Answer4",IsCorrect:false}]},{Qid: 3, Question: "This is question 3", Answers:[{Ans1:"Answer1",IsCorrect:true}, {Ans2:"Answer2",IsCorrect:false}, {Ans3:"Answer3",IsCorrect:false}, {Ans4:"Answer4",IsCorrect:false}]},{Qid: 4, Question: "This is question 4", Answers:[{Ans1:"Answer1",IsCorrect:false}, {Ans2:"Answer2",IsCorrect:true}, {Ans3:"Answer3",IsCorrect:false}, {Ans4:"Answer4",IsCorrect:false}]}];

let result = {

"right" : 0, "wrong" : 0, "unattempted" :0

};

result = userAnswers.reduce((res, i) => {

  let user = i.Answers.filter(a =>  !!a.IsCorrect);

  let question = keyquestions.filter(k => k.Qid == i.Qid)[0];

  let actualAnswer = question.Answers.filter(a =>  !!a.IsCorrect)[0];

  if(!!user && user.length) {

  user[Object.keys(user)[0]] == actualAnswer[Object.keys(actualAnswer)[0]] ? res.right++ : res.wrong++;

  } else {

    res.unattempted++;

  }

  return res;

}, result);

console.log(result);

Answer 2

您可以filter在这里申请，如果两者相同，则一种解决方案可能是查找索引和匹配，即 answer is true，另一种解决方案可能是应用于every答案并检查 isCorrect 值是否与问题相同，如果相同则表示 true 否则为 false 。这是一个工作示例。

var questions = [{Qid: 1, Question: "This is question 1", Answers:[{Ans1:"Answer1",IsCorrect:true}, {Ans2:"Answer2",IsCorrect:false}, {Ans3:"Answer3",IsCorrect:false}, {Ans4:"Answer4",IsCorrect:false}]},{Qid: 2, Question: "This is question 2", Answers:[{Ans1:"Answer1",IsCorrect:false}, {Ans2:"Answer2",IsCorrect:true}, {Ans3:"Answer3",IsCorrect:false}, {Ans4:"Answer4",IsCorrect:false}]},{Qid: 3, Question: "This is question 3", Answers:[{Ans1:"Answer1",IsCorrect:true}, {Ans2:"Answer2",IsCorrect:false}, {Ans3:"Answer3",IsCorrect:false}, {Ans4:"Answer4",IsCorrect:false}]},{Qid: 4, Question: "This is question 4", Answers:[{Ans1:"Answer1",IsCorrect:false}, {Ans2:"Answer2",IsCorrect:false}, {Ans3:"Answer3",IsCorrect:true}, {Ans4:"Answer4",IsCorrect:false}]}];

var keyquestions = [{Qid: 1, Question: "This is question 1", Answers:[{Ans1:"Answer1",IsCorrect:false}, {Ans2:"Answer2",IsCorrect:true}, {Ans3:"Answer3",IsCorrect:false}, {Ans4:"Answer4",IsCorrect:false}]},{Qid: 2, Question: "This is question 2", Answers:[{Ans1:"Answer1",IsCorrect:false}, {Ans2:"Answer2",IsCorrect:true}, {Ans3:"Answer3",IsCorrect:false}, {Ans4:"Answer4",IsCorrect:false}]},{Qid: 3, Question: "This is question 3", Answers:[{Ans1:"Answer1",IsCorrect:true}, {Ans2:"Answer2",IsCorrect:false}, {Ans3:"Answer3",IsCorrect:false}, {Ans4:"Answer4",IsCorrect:false}]},{Qid: 4, Question: "This is question 4", Answers:[{Ans1:"Answer1",IsCorrect:false}, {Ans2:"Answer2",IsCorrect:true}, {Ans3:"Answer3",IsCorrect:false}, {Ans4:"Answer4",IsCorrect:false}]}];

var result = questions.filter(k=>keyquestions.find(p=>p.Qid==k.Qid && p.Answers.findIndex(l=>l.IsCorrect)==k.Answers.findIndex(m=>m.IsCorrect))).length;

var result2 = questions.filter(k=>keyquestions.find(p=>p.Qid==k.Qid && p.Answers.every((l,i)=>l.IsCorrect==k.Answers[i].IsCorrect))).length;

console.log(`Total Correct answers are : ${result}`);

console.log(`Total Correct answers are : ${result2}`);

Answer 3

尝试这个。但是如果你能改变数据结构就更好了。你真的需要用户Ans1, Ans2, Ans3作为键吗？你可以这样做{Ans:"Answer4",IsCorrect:false}。如果你不能这样做，下面的代码应该可以工作

import React, {useState, useEffect} from "react";

import "./styles.css";

const quest = [] // user_ans

const keyquest = [] // marking scheme

export default function App() {

  const [questions, setQuestions] = useState(quest);

  const [keyq, setKey] = useState(keyquest);

  const [correctAnswers, setCorAns] = useState(0);

  const [wrongAnswers, setWrong] = useState(0);

  const [once, setOnce] = useState(true);

  useEffect(() => {

    if(once) {

      keyq.map(q => {

        const user_q = questions.filter(user_q => user_q.Qid === q.Qid);

        // Get the correct answer of the question

        const marking_scheme_ans = q.Answers.filter(ans => ans.IsCorrect);

        const user_ans = user_q[0].Answers.filter(ans => ans.IsCorrect);

        

       // Because you used different keys for 4 answers as `ans1, ans2, ans3, ans4`

        const correct_answer_keys = Object.keys(marking_scheme_ans[0]).filter(key => key !== 'IsCorrect');

        const user_ans_keys = Object.keys(user_ans[0]).filter(key => key !== 'IsCorrect');;

        if(correct_answer_keys[0] === user_ans_keys[0]) {

          return setCorAns(c => c+1);

        } else {

          return setWrong(w => w +1);

        }

          

      })

    }

  }, [keyq,questions,once])

  return (

    <div>

        <h4>Right: {correctAnswers}</h4>

        <h4>Wrong: {wrongAnswers}</h4>

    </div>

  )

}