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>