Add limit to the Api search

During my recent project, My Bowl, I came across a few issues when rendering the API to the screen. I used a third-party API from Edamam which allows me to look up food nutrition info. The API renders images, protein, carbs, fat, and more. I used this API to further assist users when it comes to looking up food information, tracking macros, and building a better healthy lifestyle.

The Problem

As I tested out the functionality of my search bar I came across a few issues that were showing up in the API.

  1. Some images were not showing up
  2. Rendering the API results was too much and started filling up the screen.

Solving the issue.

I solved the first issue by providing a conditional rendering technique that puts a dummy image in place if there were no images to be found in the API.

I solved the second issue by creating a react hook state, which has a set state of 5 here's a brief example below.

const [limit, setLimit] = useState(8)

Once that was established now it’s time to get into the nitty-gritty, The API. I started by slicing through the array and added a shorthand conditional from 0 to my current state limit in the react hooks. If it evaluates to true I will map through the array and display the limits of the content that I am iterating through. Here is a brief example below.

foodAPI.slice(0, limit ? limit : foodAPI.length).map((result) => (// render information here))

I was able to solve the issue through this method. Thanks for reading.




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Welcome Your Teammates to Cisco Webex Teams

Automatic Translation of One JavaScript Frontend Framework Code to Another

The Only Parts of Fetch API in JavaScript That Will Get You Far In Your Career

“mapDispatchToProps” VS “useSelector” in react-redux

JavaScript methods Splice() Split() Slice()

Why Vuejs is so Awesome?

4. Registering Custom Components

Tech: Top 5 Angular Features That Make Your Development Experiences A Lot Better

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Woodelin florveus

Woodelin florveus

More from Medium

How i reduced static files size

.env variables “undefined”.

Data Handling in Modern ReactJS Environment

The Trials and Tribulations of Asynchronous Code