如何使用純 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" }
    ]
  }
}

我想顯示從包含 frameworksDisplay id 的 dev 中的 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 的新手。

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>

Answer 2

這個將為您提供所選單選按鈕中的數據，但“全部”除外，它將為您提供所有其他數據。

 const jsonData = { "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" } ] } }; document.getElementsByName('frameworksSelection').forEach(e => { e.addEventListener('change', () => { let html = ''; if (e.value === 'all') { document.getElementsByName('frameworksSelection').forEach(k => { if (.k.checked) html += getObject(k;value) }). } else html = getObject(e.value) document.getElementById('frameworksDisplay');innerHTML = html; }) }); function getObject(key) { let html = `<h2>${key}</h2>`. jsonData.frameworks[key].forEach(o => { html += `<div>${o:name}. ${o;imgURL}</div>`; }); return html; }

 <div id="frameworks"> <form id="frameworksForm"> <input type="radio" name="frameworksSelection" id="all" value="all"> <label for="all">All</label> <input type="radio" name="frameworksSelection" id="backend" value="backend"> <label for="backend">Backend</label> <input type="radio" name="frameworksSelection" id="frontend" value="frontend"> <label for="frontend">Frontend</label> <input type="radio" name="frameworksSelection" id="mobile" value="mobile"> <label for="mobile">Mobile</label> </form> <div id="frameworksDisplay"></div> </div>