How can I filter the results by first and last name?

Question

I need the search bars to filter out the results by first and last name as shown in this link, https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/f-1/735fae21-9b8d-4431-8978-5098a2217fd2/part3.webm

as well as the plus button to expand the percentages back to a list instead of an average.

https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/f-1/735fae21-9b8d-4431-8978-5098a2217fd2/part4.webm

as shown here.

As well as an input field to add tags to each student for the second search bar to find.

https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/f-1/735fae21-9b8d-4431-8978-5098a2217fd2/part5.webm

as shown here.

I am very stumped on this problem. any assistance would be welcome.

thank you!

const apiInfo = $('.info');
const avg = (arr) => arr.reduce((acc, x) => acc + x, 0) / arr.length;

const renderStudentInfo = (student, $target) => {
  const fullName = student.firstName + ' ' + student.lastName,
    average = avg(student.grades.map(grade => parseInt(grade, 10)));
  $target.append($(`
    <div class="infoB">
      <img class="pPic float-left m-3"
        src="${student.pic}" alt="profile pic" />
      <h4 class="title">${fullName}<h4>
      <p class="mb-1 stats">Email: ${student.email}</p>
      <p class="mb-1 stats">Comapny: ${student.company}</p>
      <p class="mb-1 stats">Skill: ${student.skill}</p>
      <p class="mb-1 stats">Average: ${average.toFixed(2)}%</p>
      <a href=# id="plus"><i class="mb-5 fa fa-plus float-right"></i></a>
    </div>
  `));
};

const init = () => {
  $.ajax({
    url: 'https://api.hatchways.io/assessment/students',
    method: 'GET',
  }).then(({ students }) => {
    students.forEach((student) => {
      if (student.id.includes('')) {
        renderStudentInfo(student, apiInfo);
      }
    });
  });
}

init();

body{
    background-color: rgb(243, 240, 240);
}

img{
    border-radius: 50%;
    border: solid rgb(156, 148, 148) 1px;
    min-width: 130px;
}

.infoB{
    border-bottom: solid grey 1px;
}

.stats{
    color: grey;
    margin-left: 175px;
}

.title{
    font-size: 50px;
}

.card {
    margin-top: 100px;
}

.scroll {
    max-height: 575px;
    overflow-y: auto;
}

.fa-plus{
    color: grey;
    font-size: 50px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="input mt-5 mx-5">
      <input
        id="nameSearch"
        type="text"
        class="form-control"
        placeholder="Search by name"
        aria-label="Search by name"
        aria-describedby="basic-addon1"
      />
    </div>

    <div class="input mb-0 mt-2 mx-5">
      <input
        id="tagSearch"
        type="text"
        class="form-control"
        placeholder="Search tags"
        aria-label="Search tags"
        aria-describedby="basic-addon1"
      />
    </div>

    <div class="container mt-0">
      <div class="info card scroll shadow p-3 mb-5 bg-white rounded"></div>
      <span class="glyphicon glyphicon-plus"></span>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>

You need to load `jquery` at the bottom of your `html`, preferably right before you close the `` tag. Also, you need to close the `` tag. You also need to create a `
` for your JS to put the API data into. See [this pen](https://codepen.io/jamestollefson/pen/abZRRNJ?editors=1111) for an example. That just gets you started - actually getting the filtering to work is the next step — James Tollefson, Nov 09 '20 at 19:09
I recommend you split this question into a number of separate questions. Figure out what the first thing is you need to do, ask, and then apply the answer to your project. Once that bit is working, do the same for your next question. This question is actually at least three (probably four) separate questions and very nearly requires an answer that is a rewrite of your whole project. — James Tollefson, Nov 09 '20 at 19:16
Does this answer your question? [How to filter object array based on attributes?](https://stackoverflow.com/questions/2722159/how-to-filter-object-array-based-on-attributes) — Liam, Jan 11 '21 at 13:59

How can I filter the results by first and last name?

0 Answers0