Uselful array methods for dealing with api data.
Tags: webdev, javascript, react
Published: 2022-01-13 18:46:53

---
title: Uselful array methods for dealing with api data.
published: true
description: In this video/article we are going to have a look at some of the JavaScript Array methods and use them to deal with response date we get from an Api call.
cover_image: https://since1979.dev/wp-content/uploads/2022/01/useful-array-methods-for-api-data.png
tags: webdev, javascript, react
---

{% youtube xkCu_5GJfsA %}

Follow me on [Youtube](https://www.youtube.com/channel/UCeyqA3y26RlnfUSx3ufgFoA)

Using JavaScript array methods with Api data
--------------------------------------------

In this video/article I want to share with you how I use some of the JavaScript Array methods to deal with Api data. There are many many more things you can do with these methods, but these are just some examples from my own use cases. There are also a lot more Array methods for you to explore in the [MDN documentation](https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array)..

### Array.prototype.find()

The *[find](https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/find)* array method can be used to find a single entry in an Api response based on a certain criteria.

```js
// MDN Docs: https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/find

const friends = [
  { id: 0, name: "joey", quote: "How you doin?" },
  { id: 1, name: "ross", quote: "We were on a break" },
  { id: 2, name: "phoebe", quote: "She’s your lobster" }
];

const findFriendById = id => {
  return friends.find(friend => friend.id === id);
};

console.log(findFriendById(0)); // Object {id: 0, name: "joey", quote: "How you doin?"}
```
Live example in [CodeSandBox](https://codesandbox.io/s/api-find-7hq46?file=/src/index.js)

In this example we have a fake Api response array with characters from my all time favourite Sit-Com Friends. To find a single character by it's id we create a new function called *findFriendById* that excepts the *Id* integer of the character we are looking for.

Inside this new function we call the *find* method on our *friends* array, again passing it a callback function that excepts a single *friend* at a time. This callback function has to return a *true* value when we hit the friend we are looking for. So we simply compare the current *friend's id* with the *id* passed in to the *findFriendById* function.

In the example we call the *findFriendById* with 0 as the *id* giving us the object for Joey.

![Yoey saying How are you doing](https://since1979.dev/wp-content/uploads/2020/06/tumblr_n7cxc7XPZd1smcbm7o1_500.gif)

### Array.prototype.filter()

The *[Filter](https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)* method allows us to easily find Api entries from the response data based on a certain criteria like shown below.

```js
// MDN Docs: https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

const trekkies = [
  { id: 0, name: "Piccard", planet: "Earth" },
  { id: 1, name: "Spock", planet: "Vulcan" },
  { id: 2, name: "Kirk", planet: "Earth" },
  { id: 3, name: "Worf", planet: "Gault" }
];

const findTrekkiesByPlanet = planet => {
  return trekkies.filter(trekkie => trekkie.planet === planet);
};

console.log(findTrekkiesByPlanet("Earth"));
// [0: Object {id: 0 name: "Piccard" planet: "Earth"}
// 1: Object {id: 2 name: "Kirk" planet: "Earth"}]
```

Live example in [CodeSandBox](https://codesandbox.io/s/api-filter-u0xly)

In this example we have a basic Api response array with StarTrek characters. To find all the character from a certain planet we create a new function called *findTrekkiesByPlanet* that excepts a single parameter being the name of the planet we want the entries for.

Within the *findTrekkiesByPlanet* function we call the *filter* method on the *trekkies* array and we pass it a callback function that excepts a single *trakkie* as a parameter. This callback function has to return a *true* value if this *trekkie* meets our criteria or *false* if it doesn't. So we do a check if the current *trekkie.planet* value is equal to the planet value passed into the *findTrekkiesByPlanet* function.

As you can see in the example, if we pass "Earth" as the planet we get a new array containing just Piccard and Kirk.

![Captain Picard being happy](https://since1979.dev/wp-content/uploads/2020/06/tenor.gif)

### Array.from()

The from array method's function is to create a new array from some arbitrary data. Here we are going to use it to conform Api response data to something we can pass to a React component.

```js
// MDN Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

const apiCategories = [
  { id: 0, title: "javascript", description: "...", other: "..." },
  { id: 1, title: "React", description: "...", other: "..." }
];

const transformApiCategories = () => {
  return Array.from(apiCategories, category => {
    return {label: category.title, value: category.id};
  });
};
  
console.log(transformApiCategories());
// [0: Object {label: "javascript" value: 0}
// 1: Object {label: "React" value: 1}]

// Example use in a react select component.
return (<SelectControl options={ transformApiCategories() }/>)
```

Live example in [CodeSandBox](https://codesandbox.io/s/api-from-91qmo)

In this last example we have some random Api data containing programming languages along with some information about them. We want to use this data inside a select element/component that expects an array of objects containing a label and a value. [Here is an example](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/select-control) of such a component from the Gutenberg project.

For this we create a function called *transformApiCategories*. Inside this new function we use Array.find and we pass it our *apiCategories* array and a callback function that excepts a single category on each iteration.

Our callback function returns a new object from each category containing only the data we need in the correct format, making the *from* method return an array of objects that we can safely pass to our select component.

### Conclusion

As you can see these array methods can be very powerful and I would encourage you to check out their documentation. Inside each example there is a comment with a link to that specific method's doc page. And you can check out all the array methods in the [MDN documentation](https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array).

### Follow?

Follow me on [Youtube](https://www.youtube.com/channel/UCeyqA3y26RlnfUSx3ufgFoA) [Twitter](https://twitter.com/Vanaf1979) or here on Dev.to [@Vanaf1979](https://dev.to/vanaf1979) so i can notify you about new videos/articles.

**Thanks for reading, stay safe and stay the right kind of positive!**