How to filter database results to only show those that were created by the currently logged in user?-CodePudding

So, I'm working on a project where I have an HTML list being pulled from JSON data by way of JavaScript. The list is located in the currently logged-in user's profile and displays jobs from JSON data. I already have a working search filter; however, I want this list to only display jobs that the currently logged-in user posted. I understand the concept of how this will work, I'm just unsure of how to apply this in Javascript.

The concept:

Get job data from JSON.
Get currently logged-in user's ID.
Match user's ID to each job's createdByID from JSON data.
Display those with matching IDs, hide the jobs that don't.

LINK TO CODEPEN WITH WORKING EXAMPLE

Here is the working JavaScript:

//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)
    });
  });
});


/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function dropdownFilter() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i  ) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}



$(document).on('click', '.accordionList', function(){
  $(this).toggleClass('activeLink')
  $(this).next().toggle(200)
})

var acc = document.getElementsByClassName("accordionList");
var i;

for (i = 0; i < acc.length; i  ) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("activeLink");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight   "px";
    } 
  });
}

$(function() {
  var records = [];
  $.getJSON('https://v1.nocodeapi.com/devmarq/airtable/zUIqzVWzLWAiqEpd?tableName=JobListings&fields=company,role,jobID,createdByID,jobType,experience,jobLocation,roleDescription,qualifications,logo,dateCreated&view=AllListings', function(data) {
    $.each(data.records, function parseJSON(i, { fields: f }) {
      var tblRow = "<tr>"  
          "<td style='padding-top: 1%; padding-bottom: 1%;'>"  
          "<div>"  
          "<a href='jobtest.html?jobID="   f.jobID   "'>"  
          "<div class='jobListBG' style='border: 1px solid #e2e2e2; border-radius: 15px; padding-top: 1%; padding-bottom: 1%; padding-left: 1%; padding-right: 1%;'>"  
          "<div class='jobListCard1' style='padding-left: 1%'>"  
          "<img src='"   f.logo   "' style='float: left; width: 80px; height: 80px; object-fit:cover; border-radius: 100px;'/>"  
          "<div class='jobListCard2'>"  
          "<span style='font-size: x-large'>"   f.role   "</span>"  
          "<br>"  
          "<span style='color: #2b2b2b;'>"   f.company   "&nbsp;<span class='iconify-inline' data-icon='material-symbols:verified-outline-rounded' style='color: red; font-size: 20px;'></span></span>"  
          "&nbsp;&nbsp;&nbsp;"  
          "<span style='color: #2b2b2b;'><span class='iconify-inline' data-icon='ph:users-three' style='color: #474747; font-size: 20px;'></span>&nbsp;901-1000</span>"  
          "&nbsp;&nbsp;&nbsp;"  
          "<span style='color: #2b2b2b;'><span class='iconify-inline' data-icon='bx:dollar' style='color: #474747; font-size: 20px;'></span>50k-80k </span>"  
          "</div>"  
          "<p class='jobListCard2' style='float: right; padding-right: 2%; font-size: medium;'>"   f.dateCreated   "</p>"  
          "</div>"  
          "<div style='padding-left: 11%;''>"  

          "<span style='color: black; font-weight: 700;'><span class='iconify-inline' data-icon='eva:pin-outline' style='color: #000000'></span>&nbsp;"   f.jobLocation   "</span>"  
          "&nbsp;&nbsp;&nbsp;"  
          "<span style='color: white; background-color: red; padding-top: 0.6%; padding-bottom: 0.4%; padding-left: 1.5%; padding-right: 1.5%; border-radius: 15px'>"   f.jobType   "</span>"  
          "&nbsp;&nbsp;&nbsp;"  
          "<span style='color: rgb(255, 255, 255); background-color: #6188ff; padding-top: 0.6%; padding-bottom: 0.4%; padding-left: 1.5%; padding-right: 1.5%; border-radius: 15px'>"   f.experience   "</span>"  

          "</div>"
      "</div>"  
        "</a>"  
        "</div>"  
        "</td>"  
        "</tr>"
      $(tblRow).appendTo("#userdata tbody");
    });
  });
});

//make each row of table from database link to jobtest.html and display data dynamically based on which row was clicked
$(document).ready(function() {
  $('#userdata tbody tr').click(function() {
    var jobID = $(this).find('td:first').text();
    window.location.href = "jobtest.html?jobID="   jobID;
  });
});

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">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@400;500;700&display=swap" rel="stylesheet">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <script src="https://code.iconify.design/2/2.2.1/iconify.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
    </head>
    <body style="padding-left: 5%; padding-right: 5%;">

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <input id="jobsSearch"  type="text" placeholder="Search by company, role, location" style="color: black; box-shadow: 0 0 8px 2px rgba(170, 170, 170, 0.8); width: 90%; border-radius: 50px; padding: 1.5%; padding-left: 50px; background: url(/img/search.png) no-repeat left; background-position: 15px; background-size: 20px;">
        <table id="userdata" style="width: 100%;">
            <tbody id="jobsData">
                
            </tbody>
        </table>

        <br>
    </body>
</html>

And the CSS:

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Epilogue', sans-serif;
  font-weight: 500;
  background-color: #ffffff;
  color: black;
  overflow-x: hidden;
  text-decoration: none;
}

p {
  font-family: 'Epilogue', sans-serif;
  font-weight: 400;
  color:rgb(37, 37, 37);
}

a {
  text-decoration: none;
  color: black;
}

a: hover {
  color: rgb(255, 0, 0);
  text-decoration: none;
}

.tdpadding {
  padding: 10%;
}

.active-red-2 input.form-control[type=text]:focus:not([readonly]) {
  border-bottom: 1px solid #ff0000;
  box-shadow: 0 1px 0 0 #ff0000;
}

.jobListCard1 {
  overflow: hidden;
}

.jobListCard2 {
  float: left;
  padding-top: 0.6%;
  padding-left: 25px;
  font-size: large;
}

I really would like to understand how to get this to work, and would appreciate any help. Thanks.

CodePudding user response：

I think use if condition when creating variable tblRow.

Retrieved createdByID field's type is number not string


if(f.createdByID === 123456789){
        
      var tblRow = "<tr>"  
          "<td style='padding-top: 1%; padding-bottom: 1%;'>"  
             ...
             ...
             ...
          "</tr>"

}

In my opinion you should edit or add API request in backend. When you call an json data, you should attach logged in user's ID as a parameter in URL. Then retrieve only logged in user's list. Now it is retrieving whole list.

CodePudding user response：

Your json data contains an array called 'records' so you can filter them to match the id as follows (where id is the logged in user's id:

unfilteredRecords=data.records;
id='rec6LJ0WUy30M4Cys';
filteredRecords=unfilteredRecords.filter(record => record.id==id);

Just pop this code after function(data) {... like so

function(data) {
    unfilteredRecords=data.records;
id='rec6LJ0WUy30M4Cys';
filteredRecords=unfilteredRecords.filter(record => record.id==id);
    $.each(filteredRecords...