无法读取 JSON 文件

Question

我是 Anjular.Js 的新手，无法读取保存在服务器中的 .JSON 文件 (todo.json)。我有基本的快速服务器，我所有的静态文件都保存在 'public' 文件夹中。我可以直接从浏览器访问 todo.json 文件。

我是 Java 脚本的新手，我们将不胜感激。

这是 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>Java Script 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>

这是我的 server.js 的代码 //server.js

//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;

Answer 1

这是 Node.js Express 应用程序的目录结构：

expressTest
├── public
│   ├── css
│   │   └── bootstrap.min.css
│   ├── js
│   │   ├── angular.js
│   │   ├── bootstrap.min.js
│   │   └── todoApp.js (this script is currently empty)
│   ├── todo.json
│   └── views
│       └── index.html
└── server.js

Twitter Bootstrap 和 Angular.js 的版本与您在帖子中指定的版本相同 jsdemo.html 。我使用 wget 和你的 URLs.

将它们下载到项目中

index.html 文件包含您在此处作为 jsdemo.html 的 HTML。 server.js 代码与我阅读时发布的完全一样。

我的 todo.json 文件如下所示：

[
    {
        "action": "Action #1",
        "done": false
    },
    {
        "action": "Action #2",
        "done": true
    },
    {
        "action": "Action #3",
        "done": false
    },
    {
        "action": "Action #4",
        "done": true
    }
]

我安装了所有 node.js 要求。我正在使用 node.js 版本 0.10.35.

npm install express
npm install body-parser
npm install method-override

然后，从 command-line 控制台，我运行服务器：

node server.js

鉴于所有这些条件，该示例有效。我在浏览器的地址栏中输入了URL：

http://localhost:3000

table 显示所需数据：

Maybe you have a problem with your todo.json's syntax. That happened to me (I added an extra comma at the end and data didn't show on the page). Please edit your post to include that file's contents, if you need more help.

更新：

您的 JSON 语法是：

[
    {
        action: "Buy Flowers", 
        done: false
    }, 
    {
        action: "Get Shoes", 
        done: false
    }, 
    {
        action: "Collect Tickets", 
        "done": true
    }, 
    {
        action: "Call Joe", 
        done: false
    }
]

您需要在双引号内指定属性个名称，如下所示：

[
    {
        "action": "Buy Flowers", 
        "done": false
    }, 
    {
        "action": "Get Shoes", 
        "done": false
    }, 
    {
        "action": "Collect Tickets", 
        "done": true
    }, 
    {
        "action": "Call Joe", 
        "done": false
    }
]

此外，我安装的 express 在命令行上给出了这个错误消息：

express deprecated res.sendfile: Use res.sendFile instead server.js:27:13

您可能希望在以后的代码中使用该已弃用函数的新语法。

Answer 2

我假设您的服务器视图引擎使用大括号 {{ }} 以及 angular.

您可以尝试覆盖 angular 绑定表达式符号

var myApp = angular.module("demo", []).config(function($interpolateProvider){
    $interpolateProvider.startSymbol("[[").endSymbol("]]");
});

然后在HTML中使用

<td>[[item.action]]</td>

或者您可能更喜欢使用 ng-bind

<td ng-bind="item.action"></td>

无法读取 JSON 文件

Having Trouble reading JSON file

javascript

json

angularjs