How to get Json data from backend node js to frontend html

Question

From the below code, I am trying to access the JSON data to display on frontend screen. I exported it in node js and trying to import it in script tag in frontend html but I am not getting the data. Is there any way to access this data?

  
        app.post('/login', async (req, res) => {

        let payload = {
           "params":{"db":"ExampleDB","login":req.body.email, "password":req.body.password}
            };
        let result = await axios.post('http://example.net:8088/authenticate', payload);
                             
                        
            try{
            if (result.data.result.message = 'success') {
                res.sendFile(path.join(__dirname,'./public/timesheets.html'))
                if (result.data.result.data.is_officer == true){
                    flag = 1;
                }
               
            }
           
        }
        catch(ex){
            res.send(`<div align ='center'></div><br><br><br><div align ='center'><a 
          href='./login.html'>Invalid Email or Password Please try again</a></div><br><br> 
       <div align='center'></div>`);
        }
        
        
    
});

I am trying to fetch this json data is_officer into my frontend html code. How can I get this data in the frontend? The json api response is as follow

   {

    "jsonrpc": "2.0",

    "id": null,

    "result": {

        "message": "Success",

        "code": 200,

        "data": {     

           "is_officer": true,

            "department_id": [

                false,

                false

            ]

        }

    }

}

What line of code need to write in node js and html to get this on the frontend html?

This is covered in the getting started guide: https://expressjs.com/en/guide/using-template-engines.html — Quentin, Sep 27 '22 at 11:33
Why is this tagged [tag:react-fullstack] when you're asking about Node.js and HTML? — Quentin, Sep 27 '22 at 11:33
There are many template engines available. Pug is just the one they use for their examples. Several are listed in the second paragraph of the link I provided in my first comment. — Quentin, Sep 27 '22 at 11:39

Waleed ur Rehman · Answer 1 · 2022-09-27T11:36:46.983

-2

use Axios to bring JSON from backend to front end

official website: https://axios-http.com/

Cdn: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

import axios from "axios";
axios.get('/users')
  .then(res => {
    console.log(res.data);
  });```

edited Sep 27 '22 at 11:36

answered Sep 27 '22 at 11:35

Waleed ur Rehman

109
2
11

Please [avoid link only answers](http://meta.stackoverflow.com/tags/link-only-answers/info). Answers that are "barely more than a link to an external site” [may be deleted](http://stackoverflow.com/help/deleted-answers). – Quentin Sep 27 '22 at 11:36
Your code example doesn't make any sense. They don't have a `/user` end point in their code. They don't have *any* endpoint in their code that would provide the desired data as a web api. – Quentin Sep 27 '22 at 11:37
You're on completely the wrong track anyway. Look at the code in the question to get context. The OP has `res.sendFile(path.join(__dirname,'./public/timesheets.html'))` in the *same route* that the data is available in. The question is about generating HTML with the data in it, not making a second request from an HTML document already loaded in the user's browser. – Quentin Sep 27 '22 at 11:38

How to get Json data from backend node js to frontend html

1 Answers1