Cannot display api data in ejs template - node.js

Question

I can retrieve the api data and console.log it and the for loop is displaying each card div element correctly but I cannot get the details to display for each item.
plant.js controller:
exports.postFindPlant = async (req, res) => {
const plantName = req.body.searchPlant;
const key = process.env.API_KEY;
const urlAPI = `https://trefle.io/api/v1/plants/search?token=${key}&q=${plantName}`;
try {
const response = await fetch(urlAPI);
const data = await response.json();
if (data.meta.total === 0) {
console.log('nada');
} else {
console.log(data.meta.total);
let plants = JSON.stringify(data);
res.render('plants', {
plants: plants,
pageTitle: 'Plants',
path: '/plants',
hasPlants: plants.length > 0
});
}
} catch (err) {
console.log(err);
}
};
plants.ejs:
<% for(var i=0; i < plants.length; i++) { %>
<div class="col s12 m4">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="<%= plants[i].image_url %>">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4"><%= plants[i].common_name %><i class="material-icons right">MORE</i></span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4"><%= plants[i].common_name %><i class="material-icons right">CLOSE</i></span>
<p><%= plants[i].scientific_name %></p>
<p>Plant Details</p>
</div>
</div>
</div>
<% } %>

Answer 1

In your Node.js code, you get the data from API with:
const data = await response.json();
Usually, some data returned from an API contains much information with keys, so it could be an Object. (I guessed, but confirmed in comments)
And then, if you want to access any info from an Object, you have to refer the value by it's key. For example:
> const person = { name: "Alan", age: 20 }
undefined
> person.name
'Alan'
> person.age
20
But if it's a object which contains an Array, and you want to access the Array's data, you can use Array index after refer the Array with it's key in the Object.
> const person = { name: "Alan", age: 20 }
undefined
> const person2 = { name: "Alice", age: 18 }
undefined
> const people = { type: "Human", data: [person, person2] }
undefined
> people
{
type: 'Human',
data: [ { name: 'Alan', age: 20 }, { name: 'Alice', age: 18 } ]
}
>
For example, how to get Alice in my code above?
> people.data
[ { name: 'Alan', age: 20 }, { name: 'Alice', age: 18 } ]
> people.data[1]
{ name: 'Alice', age: 18 }
> people.data[1].name
'Alice'
>
In your case, you parse the Object to JSON, and passed it into your Ejs code. It's still an Object, so I assume you know how to refer the values you want with correct keys in plants.ejs, and the things you need is only plants.data. Then, just change this line of your plant.js controller below:
let plants = JSON.stringify(data);
To something like:
let plants = JSON.stringify(data).data;
What makes the different? Take a look again to my examples above, this refer to people.data, which is an Array of Objects, instead of an Object which contains an Array of Objects.
So hope you have fully understand what is the problem, and how to solve it.