Это функция поиска, в которой, если вы введете любое из значений (1001, 1002, 1003)
Запись Json будет опубликована в виде списка
В настоящее время данные Json хранятся в данных переменной »".
Я хочу иметь возможность ссылаться на внешний файл JSON в той же папке, что и переменная
, поэтому я предполагаю что-то вроде:
var data = loadJson('jsonfilename.json');
Однако я попробовал множество вариантов, и ни один из них не работает.
В идеале, я хотел бы найти решение без Jquery
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Search HTML Table Data by using JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<input id="searchBox" type="text" />
<button id="button">
Search
</button>
<div>
<ul>
</ul>
</div>
<script>
var data = [
{ "type": "Feature", "properties": {
"RANK_BY_CD": "26",
"CDUID": "1001"} },
{ "type": "Feature", "properties": {
"RANK_BY_CD": "212",
"CDUID": "1002"} },
{ "type": "Feature", "properties": {
"RANK_BY_CD": "248",
"CDUID": "1003"} }
];
$(document).ready(function(){
$("#button").click(function (any_function_variable_name) {
var searchId = String($('#searchBox').val());
data.forEach(function (any_function_variable_name) {
if(any_function_variable_name.properties.CDUID == searchId){
$("ul")
.append('<li> <strong>CDUID: </strong>' + any_function_variable_name.properties.CDUID)
.append('<li> <strong>RANK_BY_CD: </strong>' + any_function_variable_name.properties.RANK_BY_CD);
}
});
});
});
</script>
</body>
</html>
Внешний JSON - data.json
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": {
"RANK_BY_CD": "26",
"CDUID": "1001"} },
{ "type": "Feature", "properties": {
"RANK_BY_CD": "212",
"CDUID": "1002"} },
{ "type": "Feature", "properties": {
"RANK_BY_CD": "248",
"CDUID": "1003"} }
]}