CODEWITHSUNDEEP
javascript
Louis
Louis

Reputation: 307

Classify items for an HTML table using javascript

I have a json file that i turned into an html table using javascript. I want to be able to sort through the arrays of my json file to only show specific items when i click a button.

I have read online about the onclick() function in javascript but i don't know how to integrate it in a function to only show certain items of my json file in the html table.

var petsData = [{
    name: "Purrsloud",
    species: "Cat",
    favFoods: ["wet food", "dry food", "<strong>any</strong> food"],
    birthYear: 2016,
    photo: "https://learnwebcode.github.io/json-example/images/cat-2.jpg"
  },
  {
    name: "Barksalot",
    species: "Dog",
    birthYear: 2008,
    photo: "https://learnwebcode.github.io/json-example/images/dog-1.jpg"
  },
  {
    name: "Meowsalot",
    species: "Cat",
    favFoods: ["tuna", "catnip", "celery"],
    birthYear: 2012,
    photo: "https://learnwebcode.github.io/json-example/images/cat-1.jpg"
  }
];

var tableStart = `
  <table>
    <tr>
      <th>Name</th>
      <th>Species</th>
      <th>Birth Year</th>
      <th>Favorite Foods</th>
    </tr>`;
var tableEnd = `
  </table>`;

function foods(foods) {
  return `
<h4>Favorite Foods</h4>
<ul class="foods-list">
${foods.map(food => `<li>${food}</li>`).join("")}
</ul>
`;
}

function petTemplate(pet) {
  return `
      <tr>
        <td>${pet.name}</td>
        <td>${pet.species }</td>
        <td>${pet.birthYear}</td>
        <td>${pet.favFoods ? foods(pet.favFoods) : ""}</td>
      </tr>
  `;
}

document.getElementById("table").innerHTML = `
  ${tableStart}
  ${petsData.map(petTemplate).join("")}
  ${tableEnd}
`;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnCats">cats</button>
<button id="btnDogs">dogs</button>
<div id="table"></div>

This is the code that I use to make my json file into a table. How could I have a button that shows the dogs and one that shows the cats in my table?

Upvotes: 0

Views: 232

Answers (2)

Sathiraumesh
Sathiraumesh

Reputation: 6117

Addd this code

var catButton = document.getElementById("btnCats");
    var dogButton=document.getElementById("btnDogs");

catButton.addEventListener("click",(event)=>{

  let catsData=petsData=petsData.filter(value=>
        value.species=="Cat");
  document.getElementById("table").innerHTML = `
  ${tableStart}
  ${catsData.map(petTemplate).join("")}
  ${tableEnd}
`;

});

dogButton.addEventListener("click",(event)=>{
   let dogsData=petsData.filter(value=>
        value.species=="Dog");
  document.getElementById("table").innerHTML = `
  ${tableStart}
  ${dogsData.map(petTemplate).join("")}
  ${tableEnd}
`;

});

It would be better if you can create a function and use it for the above code

some thing like this

function drawTable(){
document.getElementById("table").innerHTML = `
  ${tableStart}
  ${petsData.map(petTemplate).join("")}
  ${tableEnd}
`;
}

So You could use it as

dogButton.addEventListener("click",(event)=>{
        petsData=petsData.filter(value=>
            value.species=="Dog");
    drawTable();

    });

Upvotes: 1

KAUSHIK M
KAUSHIK M

Reputation: 1

you can write oncick in this way

Click me!

if you want to call any function let's say sortedFun which sorts the value than you can call the function as

Click me! make sure that sortedFun() is written in js and js code is loaded.

Upvotes: 0

Related Questions