jQuery - 在HTML PRE中过滤JSON数组

Question

我试图对HTML PRE块中显示的一些JSON进行实时过滤，id喜欢能够查询任何内容并显示特定的Json dict。我不确定是否已经有一个模块已经为此或它将被称为什么？

到目前为止，我有以下内容，当我在搜索框中输入时只删除所有数据，当我在搜索框中删除文本时，所有数据都会丢失，直到页面新鲜。

理想情况下，我喜欢键入以下任何内容进行过滤：

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>

Answer 1

根据我的理解，我创建了下面的答案，我准备了忽略大小写的正则表达式，如果你想区分大小写，你可以从常规快递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>