user ID:
| id | user id | title | body |
reference:
https://jsonplaceholder.typicode.com/posts/
https://www.c-sharpcorner.com/article/call-web-api-using-jquery-ajax-in-asp-net-core/
<style>
#my_table thead{
background-color:cadetblue;
text-align:center;
}
#my_table tbody>tr:nth-child(2n+1){
background-color:grey;
}
#my_table tbody > tr:nth-child(2n) {
background-color: darksalmon;
}
#my_combobox{
width:100px;
}
</style>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<br />
user ID:
<select id="my_combobox" onchange="my_combobox_onchange()"></select>
<br />
<table id="my_table">
<thead>
<tr>
<td>id</td>
<td>user id</td>
<td>title</td>
<td>body</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="text/javascript">
$(document).ready(load_api());
var item_list = [];
var loading_finish = false;
function load_api() {
$.ajax({
type: "GET",
url: "https://jsonplaceholder.typicode.com/posts",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
//alert(JSON.stringify(data));
$.each(data, function (i, item) {
item_list.push(new my_class(item.userId, item.id, item.title, item.body));
}); //End of foreach Loop
//console.log(data);
populate_combobox();
}, //End of AJAX Success function
failure: function (data) {
alert(data.responseText);
}, //End of AJAX failure function
error: function (data) {
alert(data.responseText);
} //End of AJAX error function
});
}
class my_class {
constructor(userId, id, title, body) {
this.userId = userId;
this.id = id;
this.title = title;
this.body = body;
}
}
function populate_combobox() {
var unique_userId = [];
$("#my_combobox").append(new Option("all", 0));
$.each(item_list, function (i, item) {
if (unique_userId.indexOf(item.userId) < 0) {
unique_userId.push(item.userId);
}
});
$.each(unique_userId, function (i, item) {
$("#my_combobox").append(new Option(item, i+1));
});
}
function my_combobox_onchange() {
$("#my_table tbody > tr").remove();
var my_selected = $("#my_combobox option:selected").text();
//alert($("#my_combobox option:selected").text());
$.each(item_list, function (i, item) {
if (item.userId == my_selected || my_selected=="all") {
var rows = "<tr>" +
"<td id='id'>" + item.id + "</td>" +
"<td id='userId'>" + item.userId + "</td>" +
"<td id='title'>" + item.title + "</td>" +
"<td id='body'>" + item.body + "</td>" +
//"<td id='AdmissionDate'>" + Date(item.admissionDate,
// "dd-MM-yyyy") + "</td>" +
"</tr>";
$('#my_table').append(rows);
}
});
}
</script>
No comments:
Post a Comment