CODEWITHSUNDEEP
node.jsapiaxiosejs
Richard Branson
Richard Branson

Reputation: 141

I can't access data from api in node js

I'm trying to obtain data from an API with Axios and then pass it into an EJS template, but I'm not sure where the problem is!

Here is the code:

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 Template:

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

NB. The API data from the URL are structured this way:

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

Important: Im new to node js, so forgive me if I'm mixing things up

Upvotes: 1

Views: 33

Answers (1)

jfriend00
jfriend00

Reputation: 707876

Make three changes.

First, use await with your axios call.

Then, second don't use JSON.stringify() when passing data to your template. Pass an actual 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);
    }
});

Then, third, use apiData.data.forEach() in your template because it's the data property that is the array, not the top level object.

Upvotes: 1

Related Questions