My favourite JavaScript array methods for dealing with Api data.

Originally posted on my website on June 14th 2020

Using JavaScript array methods with Api data

In this 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..

Array.prototype.filter()

The Filter method allows us to easily find Api entries from the response data based on a certain criteria like shown below.

// 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"}]

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.

Array.prototype.find()

The find array method can be used to find a single entry in an Api response based on a certain criteria.

// 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?"}

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.

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.

// 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() }/>)

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 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.

Follow?

Let's connect on twitter @Vanaf1979 or here on Dev.to @Vanaf1979 so i can notify you about new articles, and other WordPress development related resources.

Thanks for reading and stay safe.