I'm having a problem with receiving the data from my server, and I think the problem is a little less common than I would really want it to be.
I am trying to retreive data of a list of professionals from my company's database, and then format the json data into my html list. I am able to successfully retreive the data from the server, but I can't seem to have my javascript file to detect any changes received (using chrome v.100.0.4896.75 and firefox v.99.0). Feel free to ask questions if I am not explaining this correctly.
I've tried to looking here: Returning data from Axios API But I can't seem to figure out the problem, or even if it's a CORS error that I'm not being told about in the console.
I think the problem is because the request in my node.js server isn't stopping, though I am unsure on how I can check that
My code currently:
The node.js server "server.js"
var express = require('express'),
request = require('request'),
axios = require('axios');
bodyParser = require('body-parser'),
app = express();
app.all('*', function (req, res, next) {
// The config is so that I can add headers, but that part isn't the scope of my problem
// like with the use of a token to access my database data.
var config = {
method: 'get',
url: 'https://jsonplaceholder.typicode.com/posts',
// I've tested this site and you can easily make GET requests from it, since
// this is a similar example, I'm not showing the company's site and token
// password for obvious reasons.
};
axios(config)
.then(function (response) {
console.log("GET professionals: ")
console.log(JSON.stringify(response.data));
// I want to stop the response and return the data here to index.js
// Working as intended in my backend server console
})
.catch(function (error) {
console.log(error);
return error;
// And return error data here in case something went wrong
});
});
app.listen(3000, function () {
console.log("server started at port 3000");
});
My javascript file "index.js" making a request to the server
const http = new XMLHttpRequest();
const url='http://127.0.0.1:3000'; // This will call my server
http.open("GET", url);
http.onreadystatechange=function () {
if(http.readyState == 4) {
// I want to retreive my data here, but I'm not getting anything
// I tested it even if readyState isn't == 4, I'm still not getting anything
var data=JSON.parse(http.responseText);
console.log(List of professionals:\n "+ data);
}
}
http.send();
The head of my markup page "index.html"
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./node_modules/axios/dist/axios.min.js"></script>
<script src="index.js"></script>
<title>Document</title>
</head>
Edit: The answer was pretty simple I realize, I thank Danneau for helping with this problem; All I needed to do was use the res 'response' that's passed and send the response.data from there using res.json(response.data).
