问题描述
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>