微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如果选中,则需要为用户显示JSON中的一些数据

如何解决如果选中,则需要为用户显示JSON中的一些数据

JSON是嵌套的。首先,它将为用户显示一些带有复选框的服务,然后用户可以检查它们是否感兴趣。当他单击按钮时,它应该显示用户想要的服务信息。我真的很感谢任何人都可以提供帮助,我是json的新手。 我有一个HTML和一个JS,还有一个JSON文件。将Node用于本地主机和一些CSS。 我想我需要使用for.Each来检查复选框是否被选中,很明显我没有正确使用它。

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?","providers:" :  
      [
      {
        "Organization": "provider 2-A",{
        "Organization": "Provider 2-B",{
      "question":"Service type 3?","providers:" :  
      [
      {
        "Organization": "provider 3-A",{
        "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?","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>

解决方法

这可能对您有帮助,我也重构了代码,

// 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",{
              "Organization": "Provider 2-B",{
        "question": "Service type 3?","providers:":
          [
            {
              "Organization": "provider 3-A",{
              "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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。