当单击 HTML 文件中的单选按钮之一时,我想从 data.json 文件中获取框架数据(名称和图像)并根据所选按钮对其进行过滤
{
"frameworks": {
"backend": [
{ "name": "nodeJS", "imgURL": "./img/node.png" },
{ "name": "Django", "imgURL": "./img/django.png" },
{ "name": "Ruby on Rails", "imgURL": "./img/rails.png" },
{ "name": "laravel", "imgURL": "./img/laravel.png" }
],
"frontend": [
{ "name": "ReactJS", "imgURL": "./img/react.png" },
{ "name": "Angular", "imgURL": "./img/angular.png" },
{ "name": "vueJS", "imgURL": "./img/vue.png" },
{ "name": "JQuery", "imgURL": "./img/jquery.png" }
],
"mobile": [
{ "name": "flutter", "imgURL": "./img/flutter.png" },
{ "name": "React Native", "imgURL": "./img/react.png" }
]
}
}
我想显示从 dev 中保存框架显示 id 的 json 文件加载的数据
<div id="programmingFrameworks"><!--10 error-->
<h2>Frameworks</h2>
<p>The purpose of framework is to allow designers and developers to focus on building an unique feature for their web based projects rather than re-inventing by coding. Framework is specially created to help you boost the performance and efficiency of your web app development task.</p>
<div id="frameworks">
<form id="frameworksForm">
<label for="all"><input type="radio" name="frameworksSelection" id="all" value="all">All</label><!--7 error-->
<label for="backend"><input type="radio" name="frameworksSelection" id="backend" value="backend">Backend</label>
<label for="frontend"><input type="radio" name="frameworksSelection" id="frontend" value="frontend">Frontend</label>
<label for="mobile"><input type="radio" name="frameworksSelection" id="mobile" value="mobile">Mobile</label>
</form>
<div id="frameworksDisplay"></div>
</div>
</div>
你们能帮我解决这个问题吗?我尝试过,但到目前为止还没有结果,我对 JS 还很陌生。
最佳答案
这里是一个示例代码。您可以进行修改以满足您想要如何显示“frameworksDisplay”div 中的数据。
const apiData = {
"frameworks": {
"backend": [
{ "name": "nodeJS", "imgURL": "./img/node.png" },
{ "name": "Django", "imgURL": "./img/django.png" },
{ "name": "Ruby on Rails", "imgURL": "./img/rails.png" },
{ "name": "laravel", "imgURL": "./img/laravel.png" }
],
"frontend": [
{ "name": "ReactJS", "imgURL": "./img/react.png" },
{ "name": "Angular", "imgURL": "./img/angular.png" },
{ "name": "vueJS", "imgURL": "./img/vue.png" },
{ "name": "JQuery", "imgURL": "./img/jquery.png" }
],
"mobile": [
{ "name": "flutter", "imgURL": "./img/flutter.png" },
{ "name": "React Native", "imgURL": "./img/react.png" }
]
}
};
var radioBtns = document.querySelectorAll('input[type=radio]');
for (var radio of radioBtns) {
radio.addEventListener('click', function(event) {
let framework;
let html = '';
if (event.target.value === 'all') {
framework = apiData.frameworks;
for (category in framework) {
html += '<label>'+ category +'</label><br />';
// Loop the next level as well
}
} else {
framework = apiData.frameworks[event.target.value];
html = '<ul>';
for (index in framework) {
html += '<li>Name: '+ framework[index]['name'] +'</li>';
}
html += '</ul>';
}
document.getElementById("frameworksDisplay").innerHTML = html;
});
}
<div id="programmingFrameworks"><!--10 error-->
<h2>Frameworks</h2>
<p>The purpose of framework is to allow designers and developers to focus on building an unique feature for their web based projects rather than re-inventing by coding. Framework is specially created to help you boost the performance and efficiency of your web app development task.</p>
<div id="frameworks">
<form id="frameworksForm">
<label for="all"><input type="radio" name="frameworksSelection" id="all" value="all">All</label><!--7 error-->
<label for="backend"><input type="radio" name="frameworksSelection" id="backend" value="backend">Backend</label>
<label for="frontend"><input type="radio" name="frameworksSelection" id="frontend" value="frontend">Frontend</label>
<label for="mobile"><input type="radio" name="frameworksSelection" id="mobile" value="mobile">Mobile</label>
</form>
<div id="frameworksDisplay"></div>
</div>
</div>
关于javascript - 如何使用纯 JS 将数据从 json 文件加载到单选按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66607535/