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.

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.

Code from the video.

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 function as an argument. 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

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

Filter method with strings

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

Filter method with objects

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.

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.

Code from the video.

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.

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.

Tags: