我正在尝试对HTML PRE块中显示的JSON进行实时过滤,id希望能够查询任何内容并显示特定的Json字典。我不确定是否已经有用于此的模块,或者该模块将被称为什么?
到目前为止,我有以下内容,当我在搜索框中键入内容时,只会删除所有数据,而当我删除搜索框中的文本时,所有数据也将丢失,直到页面刷新为止。
理想的ID喜欢输入以下任意一项进行过滤:
STR-LAB-RTR-01
config_applied=SUCCCESS (or equal syntax to show all successes)
config_applied=FAILUER (or equal syntax to show all failures)
error: not none (or equal syntax to show all errors)
我希望对此已经存在,而我只是不知道它的名字?
谢谢
var json_data = [{'hostname': 'STR-LAB-RTR-01', 'config_applied': 'SUCCESS', 'error': 'None'}, {'hostname': 'STR-LAB-RTR-02', 'config_applied': 'FAILED', 'error': 'None'}]
function find_in_object(my_object, my_criteria){
return my_object.filter(function(obj) {
return Object.keys(my_criteria).every(function(c) {
return obj[c] == my_criteria[c];
});
});
}
function display_json(data){
try {
data = JSON.stringify(data, undefined, 2)
}
catch {
console.log('unable to format JSON data')
}
return data
}
$("#script_results").html(display_json(json_data));
$("#txt-search").on("keyup", function() {
var value = $(this).val().toLowerCase();
var filtered_json = find_in_object(JSON.parse(json_data), value);
$("#script_results").html(display_json(filtered_json));
});
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
white-space: pre-wrap;
}
</style>
<div class="col-lg-12 h-100 d-flex flex-column mt-3">
<div class="form-group">
<input type="input" class="form-control input-lg" id="txt-search" placeholder="Filter results">
</div>
<div class="flex-grow-1">
<pre id="script_results">
</pre>
</div>
</div>
答案 0 :(得分:2)
基于我的理解,我创建了以下答案,并准备了忽略大小写的正则表达式,如果要区分大小写,可以从正则表达式i
中删除new RegExp(my_criteria,'ig')
。
var json_data = [{'hostname': 'STR-LAB-RTR-01', 'config_applied': 'SUCCESS', 'error': 'None'}, {'hostname': 'STR-LAB-RTR-02', 'config_applied': 'FAILED', 'error': 'None'}];
var stringData = JSON.stringify(json_data);
function find_in_object(my_object, my_criteria){
var _value = new RegExp(my_criteria,'ig');
return my_object.filter(function(obj) {
var _data = JSON.stringify(obj);
return _value.test(_data);
});
}
function display_json(data){
try {
data = JSON.stringify(data, undefined, 2)
}
catch {
console.log('unable to format JSON data')
}
return data
}
$("#script_results").html(display_json(json_data));
$("#txt-search").on("keyup", function() {
var value = $(this).val();
var filtered_json = find_in_object(JSON.parse(stringData), value);
$("#script_results").html(display_json(filtered_json));
});
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
white-space: pre-wrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12 h-100 d-flex flex-column mt-3">
<div class="form-group">
<input type="input" class="form-control input-lg" id="txt-search" placeholder="Filter results">
</div>
<div class="flex-grow-1">
<pre id="script_results">
</pre>
</div>
</div>