Single API results and the filter method

Introduction

In this lesson, we examine fetching and displaying a single result from an API call. We also look at filtering data using the filter() method.

Github Repo

Displaying a single result

Sometimes we retrieve only a single result from an API call. In this case, we will work with a single object rather than an array of objects.

Because we are not working with an array, we access the result properties directly.

View video

Code from the video.

Exercise

Create the details page for the single result. The URL can be hard coded for now.

Filter method

If you want to filter the data displayed to a user, you can use the filter method. The filter method is used to create a new array from an existing array that the filter method is called on.

The filter method takes a callback function as an argument, and this function is used to determine which elements should be included in the new array. This function receives each item in the array as an argument. If the function returns true, the item is added to the new array.

Filter method with numbers

Here is an example of using the filter method in JavaScript:

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(function (number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // Output: [2, 4]

This Scrimba looks at using the filter method on an array of numbers.

Filter method with strings

const words = ["apple", "banana", "cherry", "date", "elderberry"];

const longWords = words.filter(function (word) {
  return word.length >= 6;
});

console.log(longWords); // Output: ['banana', 'elderberry']

This Scrimba looks at using the filter method on an array of strings.

Filter method with objects

const students = [
  { name: "John", grade: "A" },
  { name: "Jane", grade: "B" },
  { name: "Jim", grade: "C" },
  { name: "Jack", grade: "A" },
  { name: "Jill", grade: "D" },
];

const topStudents = students.filter(function (student) {
  return student.grade === "A";
});

console.log(topStudents);
/* Output:
[ 
  { name: 'John', grade: 'A' },
  { name: 'Jack', grade: 'A' }
]
*/

This Scrimba looks at using the filter method on an array of objects.

Filter example

In the video below, the filter method is used to filter a static array of objects on a keyup event.

View video

Code from the video.

Filter example with API data

The video below builds on the one above, adding data from an API call and moving the code into reusable functions.

View video

Code from the video.

Exercise

Create a search input field and filter the results based on the search term.

Find method

The find method is similar to the filter method, though it only returns a single item (or undefined) rather than an array of items.

The find method in JavaScript is a built-in array method that allows you to find the first element in an array that satisfies a certain test. The method takes a callback function as an argument, and this function is used to determine which element to return. The method returns the value of the first element in the array that satisfies the test, or undefined if no elements pass the test.

Here is an example of using the find method in JavaScript:

const numbers = [1, 2, 3, 4, 5];

const firstEvenNumber = numbers.find(function (number) {
  return number % 2 === 0;
});

console.log(firstEvenNumber); // Output: 2

Scrimba video

Lesson Task

Brief

There are practise questions in the master branch of this repo.

Attempt to answer the questions before checking them against the answers branch of the repo.