单击按钮从后端表中获取确定的数据

Question

I'm new at full stack programming and I stucked on this situation. So point of my problem is, I got backend table with data, which I'm receiving it in JSON format as an array of objects. I need to show on my HTML page the definite data when I click definite button. For example, when I click "food" button function should show all rows from table with category_id = 2 which assigned to all posts with "foot" category. Please help!

Objects I get from backend look like this:

{"catName":[
    {"id":"1","title":"title ","description":"post","date":"2021-10-20 20:20:41","category_id":"1","author_id":"1","name":"lifestyle"},
    {"id":"2","title":"title 5","description":"post 5","date":"2021-10-20 20:22:57","category_id":"1","author_id":"1","name":"lifestyle"},
    {"id":"3","title":"title 1","description":"post 1","date":"2021-10-20 20:21:42","category_id":"2","author_id":"1","name":"food"},
    {"id":"4","title":"title 7","description":"post 7","date":"2021-10-20 20:23:20","category_id":"2","author_id":"1","name":"food"},
    {"id":"2","title":"title 10","description":"post 10","date":"2021-10-26 17:23:12","category_id":"2","author_id":"1","name":"food"}
] 

Here's my function, for now it returns only rows with category_id == 1 , know that I need to do something with e.category_id == 1 and put some conditional statements, but seems like everything I do doesn't works on it.

function getDefCategories() {
  $.ajax({
    url: `getcategory.php`
  }).done(function(res) {
    res = JSON.parse(res)
    showDefCategories(res.catName)
  })
}

function showDefCategories(categories) {
  let outputOption = ``
  let output = Object.values(categories).filter(function(e) {
    return e.category_id == 1
  })
  for (let each of output) {
    outputOption += `
                <div class="col-sm-5">            
                <div class='card mb-3'>
                <img src='https://preview.colorlib.com/theme/wordify/images/ximg_5.jpg.pagespeed.ic.efC6YUsPoM.webp' class='card-img-top' alt='...''>
                <div class='card-body'>
                <h3>${each.title}</h3>
                <p class='card-text'>${each.description}</p>
                <p class='card-text' style='font-size: 10px'>Posted: ${each.date}</p>
                <p class='card-text'>Category: ${each.name}</p>
                </div>
            </div>
            </div>
            `
    $('#defPost').html(outputOption)
  }

and my buttons:

<ul class="sub-menu">
    <li><a href="#!" id="lifestyle">Lifestyle</a></li>
    <li><a href="#!" id="food">Food</a></li>
    <li><a href="#!" id="adventure">Adventure</a></li>
    <li><a href="#!" id="travel">Travel</a></li>
    <li><a href="#!" id="business">Business</a></li>
</ul>

Answer 1

Add a data-category attribute to the links. Then in the event listener, get the value of this attribute $(this).data("category") . You can pass this to getDefCategories() , which can pass it to showDefCategories() , and use that instead of the hard-coded category number.

 $(".sub-menu a").click(function(e) { e.preventDefault(); getDefCategories($(this).data("category")); }); function getDefCategories(selectedCat) { $.ajax({ url: `getcategory.php` }).done(function(res) { res = JSON.parse(res) showDefCategories(res.catName, selectedCat) }) } function showDefCategories(categories, selectedCat) { let outputOption = `` let output = Object.values(categories).filter(function(e) { return e.category_id == selectedCat }) for (let each of output) { outputOption += ` <div class="col-sm-5"> <div class='card mb-3'> <img src='https://preview.colorlib.com/theme/wordify/images/ximg_5.jpg.pagespeed.ic.efC6YUsPoM.webp' class='card-img-top' alt='...''> <div class='card-body'> <h3>${each.title}</h3> <p class='card-text'>${each.description}</p> <p class='card-text' style='font-size: 10px'>Posted: ${each.date}</p> <p class='card-text'>Category: ${each.name}</p> </div> </div> </div> ` $('#defPost').html(outputOption) } }

 <ul class="sub-menu"> <li><a href="" id="lifestyle" data-category="1">Lifestyle</a></li> <li><a href="" id="food" data-category="2">Food</a></li> <li><a href="" id="adventure" data-category="3">Adventure</a></li> <li><a href="" id="travel" data-category="4">Travel</a></li> <li><a href="" id="business" data-category="5">Business</a></li> </ul>