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}]}
]

我正在使用反应钩子，组件的代码是

const Results = (props) => {
const [questions, setQuestions] = useState(props.quest);
const [keyq, setKey] = useState(props.keyq);
const [correctAnswers, setCorAns] = useState(0);
const [wrongAnswers, setWrong] = useState(0);
const [once, setOnce] = useState(true);
useEffect(() => {
if(once){
for (let index = 0; index < questions.length; index++) {
var qa = questions[index].Answers;
var ka = keyq[index].Answers;
var k = JSON.stringify(ka);
var q = JSON.stringify(qa);
if (k === q) {
var cor = correctAnswers;
cor = cor + 1;
setCorAns(cor)
} else {
var wr = wrongAnswers;
wr = wr + 1;
setWrong(wr + 1)
}
}
}
setOnce(false);
},[correctAnswers,keyq,questions,wrongAnswers,once])
return (
<div>
<h4>Right: {correctAnswers}</h4>
<h4>Wrong: {wrongAnswers}</h4>
</div>
)
}

export default Results

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

试试这个。但是，如果您可以更改数据结构，那就更好了。你真的需要用户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>
)
}

Answer 3

您可以在此处应用filter，一种解决方案可能是找到索引并匹配，如果两者相同，则意味着答案true，另一种解决方案可能是对答案应用every并检查isCorrect值是否与问题相同，如果相同则表示真，否则为假。这是一个工作示例。

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}`);

我希望这有所帮助。