javascript - 如何使用纯 JS 将数据从 json 文件加载到单选按钮？

Question

单击 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 中显示从包含 frameworksDisplay 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 的新手。

标签： javascripthtmljsonradio-button

Answer 1

这是一个示例代码。您可以修改以满足您希望在“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>