Trying to filter 4 different houses from an api

I’m trying to separate characters based on what house they belong to in the API (http://hp-api.herokuapp.com/api/characters)

I have tried using .filter and .map, but have been unable to achieve that goal, I don’t know if this is the right place to ask for help understanding how to achieve my goal.

Here is the code:

const studentArray = [];

async function getStudents(url) {
  const student = await fetch(url);
  const jsondata = await student.json();
  jsondata.forEach((student) => {
    studentArray.push(student);
  });
}







getStudents("http://hp-api.herokuapp.com/api/characters/students").then(() => {
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="/testing/script.js"></script>
    <link rel="stylesheet" href="/testing/styles.css" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <main>
      <div id="name" class="container"><button onclick="Gryffindor">Test</button></div>
      <div id="name" class="container"><button onclick="Slytherin">Test</button></div>
      <div id="name" class="container"><button onclick="Ravenclaw">Test</button></div>
      <div id="name" class="container"><button onclick="Hufflepuff">Test</button></div>
    </main>
  </body>
</html>