javascript - 如果选中,则需要为用户显示来自 JSON 的一些数据
问题描述
JSON 是一个嵌套的。首先它会通过复选框为用户显示一些服务,然后用户如果有兴趣可以检查它们。当他单击按钮时,它应该显示用户想要的服务信息。如果有人可以提供帮助,我真的很感激,我是 json 的新手。我有一个 HTML 和一个 JS 还有一个 JSON 文件。将节点用于本地主机和一些 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?",
"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>
解决方案
这可能对你有帮助,我也重构了代码,
// 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>
推荐阅读
- c# - GenericRepository 构造函数有什么作用?
- string - Jenkinsfile 中变量的插值
- laravel - Laravel 5.6 异常传播
- c# - Azure 函数“无法加载文件或程序集”
- javascript - “离线”事件不会被触发
- python - picamera with python with opencv cv2.cvtColor error scn == 3 || scn == 4
- webpack - Webpack - 服务工作者
- c++ - C++ 解析器在没有额外行的情况下崩溃
- intellij-idea - IntelliJ 上的 Hybris 源代码
- javascript - 如何显示可在 1.html 页面上使用 JS、jquery 从 2.html 按钮单击事件(其中按钮在另一个 HTML 页面上可用)