jQuery - filter JSON array in HTML PRE

Question

Im trying to do a live filter of some JSON thats displayed in a HTML PRE block, id like to be able to query anything and have that particular Json dict be displayed. im not sure if there is a module out there already for this or what it would be called?

thus far I have as follows, which when I type in the search box just removes all data, and when I delete the text in the search box all the data remains lost too until page fresh.

ideally id like to type any of the following to filter:

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)

im hoping something already exists for this and I just dont know its name?

Thanks

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

Based on my understanding I created below answer and I prepared regular expression with ignoring case, if you want to case sensitive you can remove i from regular express 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>