So i am trying to extract the data from an API using axios to render on my EJS view:
const axios = require('axios');
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));
app.get("/test", (req, res, next) => {
let productApi = axios.get("https://swapi.dev/api/people/1")
.then(response => res.json(response.data))
res.render('produtos2', {product: productApi})
})
but i'm getting the erro: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
if i use it like this:
app.get("/test", (req, res, next) => {
let productApi = axios.get("https://swapi.dev/api/people/1")
.then(response => res.json(response.data))
})
it returns the data, but i can't render the 'produtos2' view using EJS.
My EJS code:
<%- include('partials/header') %>
teste view
<%= product[0] %>
<%- include('partials/footer') %>
the problem is that you mix res.render and res.json, and that node.js runs asynchronously
so res.render runs before axios request is done, you send a promise object, not data, and when the request is finished, res.json causes ERR_HTTP_HEADERS_SENT error. Also, you don't need res.json at all, only pass the request data to the view.
so, you need to render data after the request is done
in your second code snippet you've started well, there is where you get the data, and then you need to render the view, and instead of res.json, you just pass request data:
app.get("/test", (req, res, next) => {
axios.get("https://swapi.dev/api/people/1")
.then(response => {
res.render('produtos2', {product: response.data });
});
});
or with commonly used async/await:
app.get("/test", async (req, res, next) => {
let productApi;
try {
productApi = await axios.get("https://swapi.dev/api/people/1")
} catch(err) {
console.error(err);
return res.end('err');
}
res.render('produtos2', {product: productApi.data });
});