I am struggling with reading a .JSON file (todo.json) in my Angular.Js project. The file is stored on the server, and all static files are saved within the 'public' folder of my basic Express server. Even though I can access the todo.json file directly from the browser, I am facing difficulties in retrieving its data using JavaScript.
As someone who is new to JavaScript, any assistance or guidance on this matter would be greatly appreciated.
Below is the code snippet for jsdemo.html:
<!DOCTYPE html>
<html ng-app="demo">
<head >
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript Demo</title;
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/angular.js"></script>
<script type="text/javascript">
var myApp = angular.module("demo", []);
myApp.controller("demoCtrl", function ($scope, $http) {
var promise = $http.get("/todo.json");
promise.success(function (data) {
$scope.todos = data;
});
});
</script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-controller="demoCtrl">
<H1>This is the JavaScript demo file</H1>
<div class="panel">
<h1>To Do</h1>
<table class="table">
<tr><td>Action</td><td>Done</td></tr>
<tr ng-repeat="item in todos">
<td>{{item.action}}</td>
<td>{{item.done}}</td>
</tr>
</table>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!--
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
-->
<script src="js/bootstrap.min.js"></script>
<script src="js/todoApp.js"></script>
</body>
</html>
Here is the code from my server.js file:
//Modules===================================================
var express=require ('express');
var app=express();
var bodyParser=require('body-parser');
var methodOverride=require ('method-override');
// set our port
var port = process.env.PORT || 3000;
// parse application/json
app.use(bodyParser.json());
// parse application/vnd.api+json as json
app.use(bodyParser.json({ type: 'application/vnd.api+json' }));
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));
// override with the X-HTTP-Method-Override header in the request. simulate DELETE/PUT
app.use(methodOverride('X-HTTP-Method-Override'));
// set the static files location /public/img will be /img for users
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res) {
res.sendfile('./public/views/index.html'); // load our public/index.html file
});
// start app ===============================================
// startup our app at http://localhost:3000
app.listen(port);
// shoutout to the user
console.log('Magic happens on port ' + port);
// expose app
exports = module.exports = app;