无法在 ejs 模板中显示 api 数据

Question

我可以检索 api 数据并 console.log 它，for 循环正确显示每个卡片 div 元素，但我无法获取每个项目的详细信息。

plant.js 控制器：

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><a href="/plant-details/<%= plants[i].id %>">Plant Details</a></p>
                        </div>
                    </div>
            </div>
            <% } %>

Answer 1

在您的 Node.js 代码中，您从 API 获取数据：

const data = await response.json();

通常，从 API 返回的一些数据包含很多带有键的信息，因此它可能是一个对象。 （我猜到了，但在 cmets 中得到了证实）

然后，如果你想从一个对象访问任何信息，你必须通过它的键来引用值。例如：

> const person = { name: "Alan", age: 20 }
undefined
> person.name
'Alan'
> person.age
20

但是如果它是一个包含数组的对象，并且你想访问数组的数据，你可以使用数组索引在引用数组后使用它的键在对象中。

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

例如，如何在我上面的代码中得到Alice？

> people.data
[ { name: 'Alan', age: 20 }, { name: 'Alice', age: 18 } ]
> people.data[1]
{ name: 'Alice', age: 18 }
> people.data[1].name
'Alice'
>

在您的情况下，您将对象解析为 JSON，并将其传递到您的 Ejs 代码中。它仍然是一个对象，所以我假设你知道如何在plants.ejs 中使用正确的键来引用你想要的值，而你需要的只是plants.data。然后，只需在下面更改 plant.js 控制器的这一行：

let plants = JSON.stringify(data);

类似于：

let plants = JSON.stringify(data).data;

有什么不同？再看一下我上面的例子，这里指的是people.data，它是一个对象数组，而不是包含一个对象数组的一个对象。 p>

所以希望你已经完全了解问题是什么，以及如何解决它。