how to load data from json file to radio buttons using purely JS?

Question

When clicking on one of the radio buttons in HTML file, I want to get the frameworks data (names and images) from data.json file and filter them according to the button chosen

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

and i want to display the data that loaded from json file in dev that holds frameworksDisplay id

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

can you guys help me out in this one i tried to do it but got no result so far i am still new with JS.

Answer 1

This one will give you the data from the selected radio button, except "all" which will give you all of the others.

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>

Answer 2

Here is a sample code to start with. You can modify to meet how you want to show the data inside '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>