Skip to content
Advertisement

Need to display some data from JSON for user if they are checked

The JSON is a nested one. at first it will display some services for the user with check-boxes, then user can check them if he is interested. When he clicks the button it should to display the service info of which user wanted. I really appreciate if anyone can help, I am new to json. I have one HTML and one JS also a JSON file. Using the Node for local host and some css. I think I need to use the for.Each to check if the check box is checked and it is obvious I am not using it properly.

function displayProviders()
{
    var json =  {
    "d":
    [
      {
      "question":"Service type 1?",
       "answer": "answer 1",
      "providers:" :  
      [
      {
        "Organization": "provider 1-A",
        "Link": "href= https://stackoverflow.com/questions/9463233/how-to-access-nested-json-data"
      },
      {
        "Organization": "Provider 1-B",
        "Link": "href= https://stackoverflow.com/questions/9463233/how-to-access-nested-json-data"
      }
    ]
    
    },
    {
      "question":"Service type 2?",
       "answer": "answer 1",
      "providers:" :  
      [
      {
        "Organization": "provider 2-A",
        "Link": "href= https://stackoverflow.com/questions/9463233/how-to-access-nested-json-data"
      },
      {
        "Organization": "Provider 2-B",
        "Link": "href= https://stackoverflow.com/questions/9463233/how-to-access-nested-json-data"
      }
    ]
    
    },
  
     {
      "question":"Service type 3?",
        "answer": "answer 1",
      "providers:" :  
      [
      {
        "Organization": "provider 3-A",
        "Link": "href= https://stackoverflow.com/questions/9463233/how-to-access-nested-json-data"
      },
      {
        "Organization": "Provider 3-B",
        "Link": "href= https://stackoverflow.com/questions/9463233/how-to-access-nested-json-data"
      }
    ]
  }
    ]
  };

 $(document).ready(function(){
       var check=false;
    $.each(json.d, function(){
      check= document.getElementById("testcheck").checked;
     if (check==true){
      $('<h4>'+this.value.Organization+': </h4><br>').appendTo(Answers);
     }
     var check=false;
 

    });
  });
}

function ServicesWithCheckbox(){
  
  var json = {
    "d":
    [
      {
      "question":"Service type 1?",
       "answer": "answer 1",
      "providers:" :  
      [
      {
        "Organization": "provider 1-A",
        "Link": "href= https://stackoverflow.com/questions/9463233/how-to-access-nested-json-data"
      },
      {
        "Organization": "Provider 1-B",
        "Link": "href= https://stackoverflow.com/questions/9463233/how-to-access-nested-json-data"
      }
    ]
    
    },
    {
      "question":"Service type 2?",
       "answer": "answer 1",
      "providers:" :  
      [
      {
        "Organization": "provider 2-A",
        "Link": "href= https://stackoverflow.com/questions/9463233/how-to-access-nested-json-data"
      },
      {
        "Organization": "Provider 2-B",
        "Link": "href= https://stackoverflow.com/questions/9463233/how-to-access-nested-json-data"
      }
    ]
    
    },
  
     {
      "question":"Service type 3?",
       "answer": "answer 1",
      "providers:" :  
      [
      {
        "Organization": "provider 3-A",
        "Link": "href= https://stackoverflow.com/questions/9463233/how-to-access-nested-json-data"
      },
      {
        "Organization": "Provider 3-B",
        "Link": "href= https://stackoverflow.com/questions/9463233/how-to-access-nested-json-data"
      }
    ]
  }
    ]
  }; 
 $(document).ready(function(){

  var $grouplist = $('#checkboxes');
  $.each(json.d, function() {
      $('<label>'+this.question+': </label><input type=checkbox id="testcheck" /><br>').appendTo($grouplist);
      
  });
});}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="checkboxes">
      <button onclick="ServicesWithCheckbox()">Click </button><br>
     <br> 
    </div>
    <br>
<div id="Answers">
<button onclick="displayProviders()">Get your Answer here</button>
     
  answer here : 

</div>

Advertisement

Answer

This might help you, I have refactored the code too,

// data for services and providers display 
const json = {
  "d":
    [
      {
        "question": "Service type 1?",
        "providers:":
          [
            {
              "Organization": "provider 1-A",
              "Link": "href= https://stackoverflow.com/questions/9463233/how-to-access-nested-json-data"
            },
            {
              "Organization": "Provider 1-B",
              "Link": "href= https://stackoverflow.com/questions/9463233/how-to-access-nested-json-data"
            }
          ]

      },
      {
        "question": "Service type 2?",
        "providers:":
          [
            {
              "Organization": "provider 2-A",
              "Link": "href= https://stackoverflow.com/questions/9463233/how-to-access-nested-json-data"
            },
            {
              "Organization": "Provider 2-B",
              "Link": "href= https://stackoverflow.com/questions/9463233/how-to-access-nested-json-data"
            }
          ]

      },

      {
        "question": "Service type 3?",
        "providers:":
          [
            {
              "Organization": "provider 3-A",
              "Link": "href= https://stackoverflow.com/questions/9463233/how-to-access-nested-json-data"
            },
            {
              "Organization": "Provider 3-B",
              "Link": "href= https://stackoverflow.com/questions/9463233/how-to-access-nested-json-data"
            }
          ]
      }
    ]
};


// checked boxes map
let checkedBoxMap = new Map();

// to add checked data
function addCheckedData(event) {
  if (event.target.checked) {
    checkedBoxMap.set(Number(event.target.getAttribute('data-num')), true);
  } else {
    checkedBoxMap.delete(Number(event.target.getAttribute('data-num')));
  }
}

// display providers 
function displayProviders() {
  let content = '';
  for (let key of checkedBoxMap.keys()) {
    const providers = json.d[key]['providers:'];
    providers.forEach(element => {
      content += `<div>Organisation: ${element.Organization}<br/>Link - <a ${element.Link}>click here</a></div>`
    })
  }
  document.getElementById('content').innerHTML = content;
}

// to display services with checkbox
function ServicesWithCheckbox() {
  const $grouplist = $('#checkboxes');
  $.each(json.d, function (index) {
    $(`<label>${this.question}: </label><input onchange="addCheckedData(event)" type=checkbox data-num=${index} /><br>`).appendTo($grouplist);
  });
}
<div id="checkboxes">
  <button onclick="ServicesWithCheckbox()">Click</button>
  <br>
  <br>
</div>
<div id="Answers">
  <button onclick="displayProviders()">Get your Answer here</button>
  answer here :<div id="content"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
10 People found this is helpful
Advertisement