如何解决解析具有多个数组的JSON并以HTML显示结果
我是前端开发的新手，我才刚刚起步。我想找出一个任务，也许有人可以帮助您解析由多个数组和对象组成的JSON。数组列表应显示在HTML单选按钮中，并且在“提交”上标记单选按钮时，应显示正确的答案。
JSON文件：
{
"quiz": {
"q1": {
"question": "Which one is correct team name in NBA?","options": [
"New York Bulls","Los Angeles Kings","Golden State Warriros","Huston Rocket"
],"answer": "Huston Rocket"
},"q2": {
"question": "'Namaste' is a traditional greeting in which Asian language?","options": [
"Hindi","Mandarin","Nepalese","Thai"
],"answer": "Hindi"
},"q3": {
"question": "The Spree river flows through which major European capital city?","options": [
"Berlin","Paris","Rome","London"
],"answer": "Berlin"
},"q4": {
"question": "Which famous artist had both a 'Rose Period' and a 'Blue Period'?","options": [
"Pablo Picasso","Vincent van Gogh","Salvador Dalí","Edgar Degas"
],"answer": "Pablo Picasso"
}
}
}
下面是HTML的图像及其外观...
我编写的代码无法正常工作，我只是试图显示第一个数组：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<title>AJAX</title>
</head>
<body>
<script>
fetch('http://localhost/itacademy/quiz.json').then(function (response) {
if (!response.ok) {
throw Error("Error while reading file.");
}
return response.json();
}).then(function (quiz) {
document.body.innerHTML += '<h2>' + quiz.q1.question + '</h2>';
document.body.innerHTML += '<p>Please select your answer:</p>';
for (let i = 0; i < quiz.q1.options.lenght; i++) {
document.body.innerHTML += '<input type="radio" id="bulls" name="team" value="bulls"><label for="bulls">' + quiz[i].q1.options + '</label><br>';
document.body.innerHTML += '<input type="radio" id="kings" name="team" value="kings"><label for="kings">' + quiz[i].q1.options + '</label><br>';
document.body.innerHTML += '<input type="radio" id="warriros" name="team" value="warriros"><label for="warriros">' + quiz[i].q1.options + '</label><br>';
document.body.innerHTML += '<input type="radio" id="rocket" name="team" value="rocket"><label for="rocket">' + quiz[i].q1.options + '</label><br>';
}
document.body.innerHTML += '<p>Answer: ' + quiz.q1.answer + '</p>';
}).catch(function (err) {
console.log('Fetch problem: ' + err.message);
});
</script>
</body>
</html>解决方法
即使JSON中有多个数组，您只需要使用JSON.parse(jsonObject)方法将JSON转换为javascript对象，就可以根据需要访问元素。
从一开始就好： 正如Taplar所说，访问对象属性的主要问题不是使用“测验”。您代码中的“测验”是指脚本中包含“测验”对象的变量
所以您拥有的访问模式将是quiz.quiz.q1
然后进入for循环：
您使用循环逐个输出数据，但是您自己对所有4个选项进行了硬编码，因此您在文档中将获得16个选项。每个选项4个。没有用。还会出现拼写错误，因此，如果您坚持使用循环，然后将quiz.q1.options.lenght改成quiz.quiz.q1.options.length
最后，您将不会访问quiz[i].q1.options，而是访问quiz.quiz.q1.options[i]，因为这是您要遍历的“选项”数组，而不是测验本身。
总体而言，您应该首先考虑整个事物的结构，因为它没有任何机会正常运行atm。如果您想使用该循环，那么保持该循环的唯一合理方法就是像这样使用它：
quiz.q1.options.forEach((entry) => {
const withoutSpaces = entry.replaceAll(' ','');
document.body.innerHTML += `<input type="radio" id="${withoutSpaces}" name="team" value="${withoutSpaces}"><label for="${withoutSpaces}">${entry}</label><br>`
});
所以整个事情看起来应该更像这样（尽管我想说，如果您想像这样编写代码，则应该认真考虑一下）：
fetch('jsonTest.json').then(function (response) {
if (!response.ok) {
throw Error("Error while reading file.");
}
return response.json();
}).then(function (quiz) {
quiz = quiz.quiz;
document.body.innerHTML += '<h2>' + quiz.q1.question + '</h2>';
document.body.innerHTML += '<p>Please select your answer:</p>';
quiz.q1.options.forEach((entry) => {
const withoutSpaces = entry.replaceAll(' ','');
document.body.innerHTML += `<input type="radio" id="${withoutSpaces}" name="team" value="${withoutSpaces}"><label for="${withoutSpaces}">${entry}</label><br>`
});
document.body.innerHTML += '<p>Answer: ' + quiz.q1.answer + '</p>';
}).catch(function (err) {
console.log('Fetch problem: ' + err.message);
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。