Let me break this down simply for you. I have set up a Node and Express server with MySQL running a RESTful API. The common get, post, put, delete methods are all working fine as I can test them using Postman and directly in Chrome. This setup is currently running locally on my machines. Specifically, I have an Ubuntu box hosting the REST api. When I query it in Chrome, I get the expected output of the fields I am working with.
For example, when I make a request to "", this is the response I receive:
{
"Plates": [
{
"lot_number": "P234",
"plate_number": "NGE-781",
"date_and_time": "2016-07-08T21:14:31.000Z"
},
...
]
}
The above data represents some sample entries from my MySQL database that are successfully displayed on screen. However, my issue arises when I attempt to create a basic HTML page with an Angular script to display this data. Instead of seeing the information, all I get is a blank page. Interestingly, when I run the same code with other online APIs, everything works perfectly fine. I will share the identical code snippet below for reference.
<!DOCTYPE html>
<html>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="platesCtrl">
{{plates}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('platesCtrl', function($scope, $http) {
$http.get("http://192.168.239.130:1337/api/plates")
.then(function (response) {$scope.plates = response.data;});
});
</script>
</body>
</html>
Despite this code working flawlessly with external APIs, it fails to render the data from my local API. Could this be due to its local nature? Even though I can easily access the JSON output by visiting the corresponding address in a browser.
If you have any insights or suggestions, please feel free to share.
Thank you.