Map Function is not Working in my Json File with Javascript

Question

I have a json file as below. I try to map the items and show the names and images when I select values from radio buttons. But map function is not working. How can I fix this problem ?

below is the html code

 <form id="frameworksForm">
  <label for="all">
  <input type="radio" name="frameworksSelection" id="all" value="all">All</label>
  <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>

{
    "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.querySelector('#frameworksForm').addEventListener('click', () => {
    fetch('data.json')
        .then(response => response.json())
        .then(data => console.log(Object.entries(data)));


    let results = document.querySelector('input[name = frameworksSelection]:checked').value;

    if (results === "frontend") {
        return frameworks.frontend.map(item => console.log((item.name)))
    } 
    
    else if (results === "all") {
        return frameworks.all.map(item => (item.name))
    } 
    
    else if (results === "backend") {
        return frameworks.backend.map(item => (item.name))
    } 
    
    else if (results === "mobile") {
        return frameworks.mobile.map(item => (item.name))
    }
})

I get below response from data in the console. But I cannot get the names and the images in my <div id="frameworksDisplay"></div>. I converted the json data from object to an array but still I get an error like Cannot read property 'map' of undefined at HTMLFormElement.

You're just returning an array of names. You're not doing anything with them. You need to use document.createElement() to create your items and then element.appendChild() to add them to the frameworksDisplay. Incidentally, you can get rid of your if statement if you look at `frameworks[results]` instead. — Charlie Bamford, Mar 05 '21 at 19:08
How can I make this ? I tried document.createElement() after return but it gives me a syntax error @CharlesBamford — Ayse8888, Mar 05 '21 at 19:27

score 0 · Answer 1 · answered Mar 13 '21 at 00:55

  // This code should be put inside the change event listener. If you use "change"
  // instead of "click", you can get event.value instead of having to look up the
  // element and get its value.

  // Get the value of the frameworks selection element.
  let results = document.querySelector('input[name = frameworksSelection]:checked').value;

  // Get the container that the results should be placed in.
  const frameworkDisplay = document.getElementById("frameworkDisplay");
 
  // Get rid of all existing things.
  // @see https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript
  while (frameworkDisplay.firstChild) {
    frameworkDisplay.removeChild(frameworkDisplay.lastChild);
  } 

  // Add new things. Since the string value of the framework matches the key 
  // of the frameworks list, we can get rid of the if block and just look up
  // the correct list.
  frameworks[results].map(framework => {
    // Create a new dom element of type "span".
    const item = document.createElement("span");

    // Add the framework's name.
    item.innerText = framework.name;

    // Add the framework to the display.
    frameworkDisplay.appendChild(item);
  });

  // You probably don't need to return anything. This example code updates the
  // framework display directly inside the loop.

Map Function is not Working in my Json File with Javascript

1 Answers1