我无法从节点 js 中的 api 访问数据

Question

我正在尝试使用 Axios 从 API 获取数据，然后将其传递给 EJS 模板，但我不确定问题出在哪里！

这是代码：

router.get("/", async (req, res, next) =>  
   
    try {
       const apiData = await axios.get("http://localhost:8080/api/v1/users/?key=API_KEY");         
       res.render('pages/home',{
           apiData: JSON.stringify(apiData),
       });
    }
    catch (err){
       console.log(err)
    }
});

EJS 模板：

<% apiData.forEach(user => { %>
 <?= user.data.firstname ?> <br>
<% }) %>

注意。 来自 URL 的 API 数据的结构如下：

{
    "success": true,
    "total": 3,
    "data": [
        {
        "reference": "",     
        "firstname": "firstname",
        "lastname": "lastname",
        "email": "email@gmail.com",
        "mobile": "(011) 111-111",
        "avatar": "avatar.jpg",
        "is_active": 0,
        "is_verified": 0,
        "created_at": "2022-09-16T11:41:19.000Z",
        "validated_at": null
        },
        {
            .... 
        }
    ]
}

重要提示：我是 node js 的新手，如果我把事情搞混了，请原谅我

Answer 1

进行三个更改。

首先，将await与您的 axios 调用一起使用。

然后，在将数据传递给模板时，第二个不要使用JSON.stringify() 。 通过实际的 Javascript object。

router.get("/", async (req, res, next) =>  
   
    try {
       const response = await axios.get("http://localhost:8080/api/v1/users/?key=API_KEY");         
       res.render('pages/home', {apiData: response.data});
    }
    catch (err){
       console.log(err)
       // send error response
       res.sendStatus(500);
    }
});

然后，第三，在模板中使用apiData.data.forEach() ，因为它是数组的data属性，而不是顶级 object。

Answer 2

axios.get 是一个异步方法，你应该使用await

const apiData = await axios.get("http://localhost:8080/api/v1/users/?key=API_KEY");