Javascript通过对象搜索手机数据并在表格中显示

Question

On input keyup Js gets the data from JSON object and displays data in table in html
I need help with:

1: Sort data by phone and display only that table row which have numbers from input, and hide other

2: On click table row -> opens modal and there i want to show other data {"card_number": "1234 1234 4444 5555","anydata": " something ","anydata2": "hello"} from res which belongs exactly to this object with phone number

Here's my code:

 function SearchPhone() { var phone = $('#phonesearch').val(); var res = { "2": { "name": "Sardor", "surname": "Aliev", "patronym": "Begmatovich", "date_pub": "12.02.2019", "date_get": "12.03.2019", "status": "2", "phone": "85673454534", "card_number": "1234 1234 4444 5555", "anydata": " something ", "anydata2": "hello" }, "3": { "name": "Akbar", "surname": "Valiev", "patronym": "Sharipovich", "date_pub": "12.02.2019", "date_get": "12.03.2019", "status": "2", "phone": "85672312335", "card_number": "1234 6543 4444 5555", "anydata": " something ", "anydata2": "hello" }, "4": { "name": "Mansur", "surname": "Bakirov", "patronym": "Maksutovich", "date_pub": "12.02.2019", "date_get": "12.03.2019", "status": "1", "phone": "85657652311", "card_number": "1234 6543 1111 5535", "anydata": " something ", "anydata2": "hello" }, "5": { "name": "Xamid", "surname": "Saliev", "patronym": "Aripovich", "date_pub": "12.02.2019", "date_get": "12.03.2019", "status": "4", "phone": "85672115535", "card_number": "1234 2353 5444 2345", "anydata": " something ", "anydata2": "hello" }, "6": { "name": "Bobur", "surname": "Qobilov", "patronym": "Axmetovich", "date_pub": "12.02.2019", "date_get": "12.03.2019", "status": "3", "phone": "85672612664", "card_number": "1287 3853 4734 5475", "anydata": " something ", "anydata2": "hello" } }; var sttr = '<tr class="" style="cursor: pointer;" data-toggle="modal" data-target="#myModal1"><th scope="row" id="listnum_fp">'; endtr = '</tr>'; stth = '<th style="white-space: nowrap">'; endth = '</th>'; sttd = '<td style="white-space: nowrap">'; endtd = '</td>'; for (const key in res) { var f_i_sh = stth + res[key].surname + ' ' + res[key].name + ' ' + res[key].patronym + '' + endth; publicated = sttd + res[key].date_pub + endtd; willget = sttd + res[key].date_get + endtd; status = sttd + res[key].status + endtd; phone = sttd + res[key].phone + endtd; datarowout = sttr + (key - 1) + f_i_sh + publicated + willget + status + phone + endtr; document.getElementById('cardmod_fp').innerHTML += datarowout; } }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="table-responsive"> <table class="table table-lg table-bordered shadow bg-light "> <thead> <tr> <div class="card-header text-right"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"> Phone input: <input id="phonesearch" onkeyup="SearchPhone()" type="text" class="form-control"> </div> </div> </div> <tr> <th style="width: 40px;" scope="col">№</th> <th scope="col">Name</th> <th scope="col">Post Date</th> <th scope="col">Get Date</th> <th scope="col">Status</th> <th scope="col">Phone number</th> </tr> </thead> <tbody id="cardmod_fp"> </tbody> </table> </div> <div class="modal resizable draggable fade" data-backdrop="false" id="myModal1" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content rounded-0 shadow-lg"> <div class="modal-header bg-light"> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"> <p class="moredata"></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-refuse " data-dismiss="modal">Close</button> <button type="button" class="btn btn-default " data-dismiss="modal">Send</button> </div> </div> </div> </div>

Answer 1

First move the res outside the search and then clear on input

Here is a working version

 var res = { "2": { "name": "Sardor", "surname": "Aliev", "patronym": "Begmatovich", "date_pub": "12.02.2019", "date_get": "12.03.2019", "status": "2", "phone": "85673454534", "card_number": "1234 1234 4444 5555", "anydata": " something ", "anydata2": "hello" }, "3": { "name": "Akbar", "surname": "Valiev", "patronym": "Sharipovich", "date_pub": "12.02.2019", "date_get": "12.03.2019", "status": "2", "phone": "85672312335", "card_number": "1234 6543 4444 5555", "anydata": " something ", "anydata2": "hello" }, "4": { "name": "Mansur", "surname": "Bakirov", "patronym": "Maksutovich", "date_pub": "12.02.2019", "date_get": "12.03.2019", "status": "1", "phone": "85657652311", "card_number": "1234 6543 1111 5535", "anydata": " something ", "anydata2": "hello" }, "5": { "name": "Xamid", "surname": "Saliev", "patronym": "Aripovich", "date_pub": "12.02.2019", "date_get": "12.03.2019", "status": "4", "phone": "85672115535", "card_number": "1234 2353 5444 2345", "anydata": " something ", "anydata2": "hello" }, "6": { "name": "Bobur", "surname": "Qobilov", "patronym": "Axmetovich", "date_pub": "12.02.2019", "date_get": "12.03.2019", "status": "3", "phone": "85672612664", "card_number": "1287 3853 4734 5475", "anydata": " something ", "anydata2": "hello" } }; function SearchPhone() { var phone = $('#phonesearch').val(); document.getElementById('cardmod_fp').innerHTML = "" var sttr = '<tr class="" style="cursor: pointer;" data-toggle="modal" data-target="#myModal1"><th scope="row" id="listnum_fp">'; endtr = '</tr>'; stth = '<th style="white-space: nowrap">'; endth = '</th>'; sttd = '<td style="white-space: nowrap">'; endtd = '</td>'; for (const key in res) { if (phone === "" || res[key].phone.indexOf(phone) === 0) { var f_i_sh = stth + res[key].surname + ' ' + res[key].name + ' ' + res[key].patronym + '' + endth; publicated = sttd + res[key].date_pub + endtd; willget = sttd + res[key].date_get + endtd; status = sttd + res[key].status + endtd; phoneCell = sttd + res[key].phone + endtd; datarowout = sttr + (key - 1) + f_i_sh + publicated + willget + status + phoneCell + endtr; document.getElementById('cardmod_fp').innerHTML += datarowout; } } } SearchPhone()

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="table-responsive"> <table class="table table-lg table-bordered shadow bg-light "> <thead> <tr> <div class="card-header text-right"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"> Phone input: <input id="phonesearch" oninput="SearchPhone()" type="text" class="form-chttps://stackoverflow.com/questions/59200666/javascript-search-by-phone-data-through-the-object-and-display-in-the-table#ontrol" value=""> </div> </div> </div> <tr> <th style="width: 40px;" scope="col">№</th> <th scope="col">Name</th> <th scope="col">Post Date</th> <th scope="col">Get Date</th> <th scope="col">Status</th> <th scope="col">Phone number</th> </tr> </thead> <tbody id="cardmod_fp"> </tbody> </table> </div> <div class="modal resizable draggable fade" data-backdrop="false" id="myModal1" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content rounded-0 shadow-lg"> <div class="modal-header bg-light"> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"> <p class="moredata"></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-refuse " data-dismiss="modal">Close</button> <button type="button" class="btn btn-default " data-dismiss="modal">Send</button> </div> </div> </div> </div>

Answer 2

I have modified your code with some simple required changes with some better guidelines(but not fully) and added the comments wherever necessary for better understanding.

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> // Created a separate function to filter out the required phone numbers function filter(phoneNumber, data){ // If the search string is not there, then simply return all data to display if(phoneNumber == "" || phoneNumber == undefined || phoneNumber == null){ return data; } let resultData = {} // as you did previously, just iterating through all of individual data set using keys for(var key in data){ let personData = data[key] // if the input string present in any of the phoneNumber, then simply add this data to the result data. if(personData.phone.indexOf(phoneNumber) >= 0){ resultData[key] = personData; } } // atlast return the result data. return resultData; } // Always try to seperate the method of getting data. In real worl application it could be from anywhere. I //If you move it to separate method like this. You can replace this dummy data method with another source of data may be from real database without changing other sections of code. function getAllPhoneNumbers(){ var res = { "2": { "name": "Sardor", "surname": "Aliev", "patronym": "Begmatovich", "date_pub": "12.02.2019", "date_get": "12.03.2019", "status": "2", "phone": "85673454534", "card_number": "1234 1234 4444 5555", "anydata": " something ", "anydata2": "hello" }, "3": { "name": "Akbar", "surname": "Valiev", "patronym": "Sharipovich", "date_pub": "12.02.2019", "date_get": "12.03.2019", "status": "2", "phone": "85672312335", "card_number": "1234 6543 4444 5555", "anydata": " something ", "anydata2": "hello" }, "4": { "name": "Mansur", "surname": "Bakirov", "patronym": "Maksutovich", "date_pub": "12.02.2019", "date_get": "12.03.2019", "status": "1", "phone": "85657652311", "card_number": "1234 6543 1111 5535", "anydata": " something ", "anydata2": "hello" }, "5": { "name": "Xamid", "surname": "Saliev", "patronym": "Aripovich", "date_pub": "12.02.2019", "date_get": "12.03.2019", "status": "4", "phone": "85672115535", "card_number": "1234 2353 5444 2345", "anydata": " something ", "anydata2": "hello" }, "6": { "name": "Bobur", "surname": "Qobilov", "patronym": "Axmetovich", "date_pub": "12.02.2019", "date_get": "12.03.2019", "status": "3", "phone": "85672612664", "card_number": "1287 3853 4734 5475", "anydata": " something ", "anydata2": "hello" } }; return res; } function SearchPhone() { var phone = $('#phonesearch').val(); var allPhoneNumbers = getAllPhoneNumbers(); var sttr = '<tr class="" style="cursor: pointer;" data-toggle="modal" data-target="#myModal1"><th scope="row" id="listnum_fp">'; endtr = '</tr>'; stth = '<th style="white-space: nowrap">'; endth = '</th>'; sttd = '<td style="white-space: nowrap">'; endtd = '</td>'; // Clear out the existing records in HTML page document.getElementById('cardmod_fp').innerHTML = ""; //call filter method with the input from user along with original data set. for (const key in filter(phone, allPhoneNumbers)) { var f_i_sh = stth + res[key].surname + ' ' + res[key].name + ' ' + res[key].patronym + '' + endth; publicated = sttd + res[key].date_pub + endtd; willget = sttd + res[key].date_get + endtd; status = sttd + res[key].status + endtd; phone = sttd + res[key].phone + endtd; datarowout = sttr + (key - 1) + f_i_sh + publicated + willget + status + phone + endtr; document.getElementById('cardmod_fp').innerHTML += datarowout; } } </script>

 <div class="table-responsive"> <table class="table table-lg table-bordered shadow bg-light "> <thead> <tr> <div class="card-header text-right"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"> Phone input: <input id="phonesearch" onkeyup="SearchPhone(this.value)" type="text" class="form-control"> </div> </div> </div> <tr> <th style="width: 40px;" scope="col">№</th> <th scope="col">Name</th> <th scope="col">Post Date</th> <th scope="col">Get Date</th> <th scope="col">Status</th> <th scope="col">Phone number</th> </tr> </thead> <tbody id="cardmod_fp"> </tbody> </table> </div>