gpt4 book ai didi

javascript - Angularjs:从本地json文件加载内容

转载 作者:行者123 更新时间:2023-11-28 13:12:37 24 4
gpt4 key购买 nike

这是我的代码,我试图显示 JSON 内容,当我 checkin 控制台时,返回的 data 是整个 html 代码,而不是 json 数据。我哪里出错了?

<html ng-app="BooksApp">

<head>
<meta charset="utf-8">
<title>Angular.js </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var BooksApp = angular.module('BooksApp', []);
BooksApp.controller("BookCtrl", ['$scope', '$http', function ($scope, $http) {
$http.get('books.json').success(function (data) {
$scope.books = data;
console.log(data);
});
}]);
</script>
</head>

<body ng-controller="BookCtrl">
<h2>Angular.js </h2>
<table>
<tr>
<th>Book Name</th>
<th>Book Price</th>
</tr>
<option ng-repeat="entry in books.books" value="{{entry.name}}">{{entry.name}}</option>
</table>
</body>

</html>

书籍.json

{
"books": [{
"id": 2081,
"name": "python",
"price": "1000"
}, {
"id": 8029,
"name": "c++",
"price": "2000"
}],
"count": 2
}

Screenshot

app.js

var http = require('http'),
fs = require('fs');


fs.readFile('./index.html', function (err, html) {
if (err) {
throw err;
}
http.createServer(function(request, response) {
response.writeHeader(200, {"Content-Type": "text/html"});
response.write(html);
response.end();
}).listen(8000);
});

最佳答案

AngularJS 用于创建 SPA 应用程序,您需要将其与后端分开运行。但似乎您使用节点来提供静态文件也想从中获取 book.json 。

新方法:

服务器端,只需创建一个通过 api /books 返回 book.json 的 api

var express = require('express');
var app = express();
fs = require('fs');

app.get('/books', function (req, res) {
fs.readFile('books.json', 'utf8', function (err,data) {
if (err) {
return console.log(err);
}
console.log(data);
res.send(data)
});

})

app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})

客户端,调用该服务器

$http.get('http://localhost/books').success(function(data) {
$scope.books = data;
console.log(data);
});

关于javascript - Angularjs:从本地json文件加载内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41176627/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com