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

Question

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>

Do you have any demo or so which could make the question a bit more clear? — Nikhil Singh
– Nikhil Singh, Commented Sep 8, 2020 at 3:06
Maybe if you try to run code snippet, it helps. Sorry if I describe it confusing — Ellie
– Ellie, Commented Sep 8, 2020 at 3:26
Is it something like when the user checks some of the checkboxes, it should display the relevant data after the click of the get answer here button ? — Nikhil Singh
– Nikhil Singh, Commented Sep 8, 2020 at 3:39
And the text should contain the data related to the provider object for that respective selected option ? — Nikhil Singh
– Nikhil Singh, Commented Sep 8, 2020 at 3:41

Nikhil Singh · Accepted Answer · 2020-09-08 16:09:39Z

0

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>

edited Sep 8, 2020 at 16:09

answered Sep 8, 2020 at 6:36

Nikhil Singh

1,6301 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ellie Over a year ago

Wow, such a professional and beautiful code. Thanks a bunch @Nikhil , you are awesome

Nikhil Singh Over a year ago

@Ellie Thanks a lot for the compliment, let me know if you need any other help :)

Ellie Over a year ago

a quick question please, I added one item to my json nsmed:answer. I need to display that as well if user check that service. Can you please help. When I add it as content it return it undefined

Nikhil Singh Over a year ago

Can you show me the JSON and the end result you want to achieve?

Nikhil Singh Over a year ago

Can you join the discussion here - chat.stackoverflow.com/rooms/221286/… ?

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related