search in JSON file and return the value in to HTML tag

Question

I am working on a search box, in this search box I search all rows and show results in tag, after I select the result, the value will add to the search box. But it doesn't show in the HTML tag. in the following lines I share the codes.

    $(document).ready(function(){
    $.ajaxSetup({ cache: false });
    $('#search').keyup(function(){
     $('#result').html('');
     $('#state').val('');
     var searchField = $('#search').val();
     var expression = new RegExp(searchField, "i");
     $.getJSON('json/db.json', function(data) {
      $.each(data, function(key, value){
       if (value.InstrumentID.search(expression) != -1 || value.LVal18.search(expression) != -1 || value.LVal18AFC.search(expression) != -1 || value.LVal30.search(expression) != -1 || value.CompanyLVal18AFC.search(expression) != -1 || value.CompanyLVal30.search(expression) != -1) 
       {
        $('#result').append('<li class="list-group-item link-class"> '+value.LVal30+' | <span class="text-muted">'+value.LVal18AFC+'</span></li>');
       }
      });   
     });
    });
    
    $('#result').on('click', 'li', function() {

     var click_text = $(this).text().split('|');
     $('#search').val($.trim(click_text[0]));
     $("#result").html('');
    });

    
    $("#getValue").click(function(){
        console.log(value.LVal30);
    });
});

also, the JSON format is like :

[{ "InstrumentID": "IR0101", "LVal18": "AR", "LVal18AFC": "AR", "LVal30": "AR", "CompanyInstrumentID": "IRO101", "CompanyLVal18AFC": "AR", "CompanyLVal30": "AR" }, { "InstrumentID": "IRR1C0101", "LVal18": "Chadormalu-R", "LVal18AFC": "AB", "LVal30": "AB", "CompanyInstrumentID": "IRO0001", "CompanyLVal18AFC": "AB", "CompanyLVal30": "AB" } ]

and I have a simple input like the below:

<div class="input-group">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" id="getValue" >Chose</button>
        </div>
        <input type="text" name="search" id="search" placeholder="Search" class="form-control" data-value >


    </div>
    <ul class="list-group" id="result"></ul>

as you see in the picture the I get the result in the box, but nothing happens in the console!

edit - adding error:

Uncaught ReferenceError: value is not defined
    at HTMLButtonElement.<anonymous> (script3.js:138)
    at HTMLButtonElement.dispatch (jquery-3.5.1.js:5429)
    at HTMLButtonElement.elemData.handle (jquery-3.5.1.js:5233)

line 138 of script3.js is :

console.log(value.LVal30);

Answer 1

You can try below method to filter JSON data.

 var data = [{ "InstrumentID": "IR0101", "LVal18": "AR", "LVal18AFC": "AR", "LVal30": "AR", "CompanyInstrumentID": "IRO101", "CompanyLVal18AFC": "AR", "CompanyLVal30": "AR" }, { "InstrumentID": "IRR1C0101", "LVal18": "Chadormalu-R", "LVal18AFC": "AB", "LVal30": "AB", "CompanyInstrumentID": "IRO0001", "CompanyLVal18AFC": "AB", "CompanyLVal30": "AB" } ] var searchterm="Company"; var result = data.filter(item=> { var keys = Object.keys(item); var found= keys.filter(key=> { if (item[key].toLowerCase().indexOf(searchterm) != -1) { return item; } }); return ((found && found.length >0) ? true : false); }) console.log(result);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Once you get the data.Loop through it and show it in you HTML like below.

result.map(value=> {
     $('#result').append('<li class="list-group-item link-class"> '+value.LVal30+' | <span class="text-muted">'+value.LVal18AFC+'</span></li>');
});

Answer 2

Thanks for @Swati for help me to find the solution. By the following change in JS file the result appears:

$(document).ready(function(){
    $.ajaxSetup({ cache: false });
    $('#search').keyup(function(){
     $('#result').html('');
     $('#state').val('');
     var searchField = $('#search').val();
     var expression = new RegExp(searchField, "i");
     $.getJSON('json/db.json', function(data) {
      $.each(data, function(key, value){
       if (value.InstrumentID.search(expression) != -1 || value.LVal18.search(expression) != -1 || value.LVal18AFC.search(expression) != -1 || value.LVal30.search(expression) != -1 || value.CompanyLVal18AFC.search(expression) != -1 || value.CompanyLVal30.search(expression) != -1) 
       {
    $('#result').append('<li class="list-group-item link-class"> '+value.LVal30+' | <span class="text-muted">'+value.LVal18AFC+'</span> | <span style="display: none !important">'+value.InstrumentID+'</span></li>');
       }
      });   
     });
    });
    
    $('#result').on('click', 'li', function() {

     var click_text = $(this).text().split('|');
     $('#search').val($.trim(click_text[0]));
     $("#result").html('');
    });

    
    $("#getValue").click(function(){
    if($('#search').val() != null && $('#search').val() != "" )
    {
        $("d").text($('#search').val().split(',')[0]);
        $("d1").text($('#search').val().split(',')[1]);
        $("d2").text($('#search').val().split(',')[2]);
    }else{
    $("d").text(" ");
    }
    });
});

and also defining d, d1, d2 tags in my HTML file. I would be able to show the search result in several tags. Thanks again @Swati