When a key is pressed in an input field, JavaScript retrieves data from a JSON object and displays it in an HTML table.
I require assistance with:
1: Sort the data by phone number and only display the table row that contains numbers from the input, hiding all others.
2: Clicking on a table row should open a modal where additional data {"card_number": "1234 1234 4444 5555","anydata": " something ","anydata2": "hello"} from res corresponding to this phone number object will be shown.
Below is 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">×</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>