Currently, I'm in the midst of a project that involves extracting an HTML list from JSON data using JavaScript. The list is being displayed on the logged-in user's profile, showcasing job listings from the JSON data. While I've successfully implemented a search filter, I now aim to modify the list to show only the jobs posted by the user currently logged in. Although I grasp the underlying concept, I'm unsure about how to incorporate this functionality in JavaScript.
The proposed approach:
- Retrieve job data from JSON.
- Obtain the ID of the currently logged-in user.
- Match the user's ID with the createdByID field in the JSON data for each job.
- Show the jobs with matching IDs and hide those that don't.
VIEW WORKING EXAMPLE ON CODEPEN
Here is the functioning JavaScript code:
//USER'S ID NUMBER
var userID = "123456789"
//MATCH THIS WITH THE createdByID NUMBER FROM JSON DATA
//...code here...
//SEARCH FILTER:
$(document).ready(function() {
$("#jobsSearch").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#jobsData tr").filter(function() {
$(this).toggle($(this).text()
.toLowerCase().indexOf(value) > -1)
});
});
});
// Remaining JavaScript code omitted for brevity
The HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Additional HTML code omitted for brevity -->
</head>
<body style="padding-left: 5%; padding-right: 5%;">
<!-- Additional HTML code omitted for brevity -->
</body>
</html>
And the CSS:
html {
scroll-behavior: smooth;
}
// Remaining CSS code omitted for brevity
I am eager to gain a deeper understanding of how to implement this feature. Any guidance or assistance would be greatly appreciated. Thank you.