CODEWITHSUNDEEP
javascriptjsonreactjsapi
Shahriar
Shahriar

Reputation: 117

How to show complex object properties from an API call in React

So I've been working on making a Recipe App on react. I've taken data for this app from https://www.themealdb.com/api.php on this site. I've been able to show Meal Names by search and also if I want to specific details about a meal I've been also able to do it but in this API there's a complex piece of data which show all the ingredients and measurement. I've tried for a long time but couldn't able show the measurements and ingredients of the meal. I am attaching the response of the ingredients and measurements.Ingredients Measure

As you can see there are null values in both Ingredients and Measure. I can show both of these if I call them by numbers for ex - strIngredient1,strIngredient2, and so on. What I want I do is I will take all the Ingredients and Measure and whenever there is a null or empty string it will not show it in the details of a specific meal. How can I do it using React Hooks?

Upvotes: 0

Views: 121

Answers (1)

rschristian
rschristian

Reputation: 2967

This doesn't really have anything to do with React.

You can test for a truthy (something that resolves to true) in JS with the following:

if (x) { }

Empty strings will not get into that, neither will undefined or null. Just check each value to see if you should add it to the UI and you'll be good.

Upvotes: 1

Related Questions