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.
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.
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.
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. Below each example there is a link to that specific method’s doc page. And you can check out all the array methods in the MDN documentation.
Comments?
If you want to leave a comment or want to say I made a silly mistake, please do so under the copy of this article on Dev.to so i can get back to you.
Also lets connect on twitter @Vanaf1979 or on Dev.to @Vanaf1979 so I can notify you about new articles, and other web development related resources.
Thanks for reading
