与 AngularJS 一起使用时,Django 模板不呈现 JSON 响应
Posted
技术标签:
【中文标题】与 AngularJS 一起使用时,Django 模板不呈现 JSON 响应【英文标题】:Django template not rendering JSON response when used with AngularJS 【发布时间】:2016-10-14 14:50:02 【问题描述】:编辑:已解决
views.py
def post_list(request):
queryset = Post.objects.all()
json_data = serializers.serialize('json', queryset)
context =
"jsondata" : json_data,
return render(request,"index.html", context)
index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myapp" ng-controller="myctrl">
jsondata
<div class="ui icon input">
<input type="text" ng-model="search" placeholder="Search skills...">
<i class="search link icon"></i>
</div>
<div class="ui link cards" style="padding:40px">
<div class="card">
<div class="image">
<img class="ui avatar centered image" src="http://1.semantic-ui.com/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<div class="ui small header" ng-repeat="skill in skills | filter:search">
skill.fields.post_title
</div>
<div class="description">
skill.fields.post_content
</div>
</div>
</div>
</div>
<script type="text/javascript">
var skills_list = " jsondata ";
var nice_data = JSON.parse(skills_list.replace(/"/g, '"'))
var very_nice_data = JSON.stringify(nice_data);
console.log(very_nice_data)
</script>
<script>
angular.module('skillboard', []).controller('searchskills', function ($scope)
$scope.skills = very_nice_data;
);
</script>
</body>
**very_nice_data**
在控制台的输出是:
[
"model": "posts.post",
"pk": 1,
"fields":
"post_title": "Algorithms",
"post_content": "Calling it.",
"updated_on": "2016-06-12T09:09:45.198Z",
"timestamp": "2016-04-20T09:44:21.887Z",
"test_type": "Coding",
"number_of_questions": 0,
"test_url": "http://example.com"
,
"model": "posts.post",
"pk": 4,
"fields":
"post_title": "Data Structures",
"post_content": "new content here",
"updated_on": "2016-06-12T09:09:26.359Z",
"timestamp": "2016-04-26T06:28:32.569Z",
"test_type": "Coding",
"number_of_questions": 0,
"test_url": "http://example.com"
,
"model": "posts.post",
"pk": 11,
"fields":
"post_title": "Dynamic Programming",
"post_content": "This level of DP is well suited for 2+ yr experience programmers/researchers.",
"updated_on": "2016-06-12T09:09:16.542Z",
"timestamp": "2016-06-12T08:44:25.705Z",
"test_type": "Coding",
"number_of_questions": 0,
"test_url": "#"
]
我正在尝试使用 Angular 将我的 django 视图中的 JSON 响应呈现到我的模板中。我为每个项目使用语义卡。 JSON 响应非常好。 ng-repeat 也在循环 JSON 中的项目数,但 post_title 和 post_content 没有显示。
<div class="ui small header" ng-repeat="skill in skills | filter:search">
skill.fields.post_title
</div>
<div class="description">
skill.fields.post_content
</div>
错误在哪里?请帮忙。
【问题讨论】:
【参考方案1】:不要字符串化very-nice_data
。
$scope.skills = very_nice_data;
需要是 javscript 数组而不是 json 字符串
【讨论】:
nice_data 的输出是一个对象数组: Array[3]0: Object1: Object2: Objectlength: 3__proto__: Array[0] 如何使用 ng-repeat有了这个数组。保持$scope.skills = nice_data
也不起作用。【参考方案2】:
Charlieftl 的回答是完美的。而不是var very_nice_data = JSON.stringify(nice_data);
只是做var very_nice_data = nice_data;
var app = angular.module("skillboard", []);
app.controller("searchskills", function($scope)
$scope.skills = very_nice_data;
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="skillboard" ng-controller="searchskills">
<div class="ui small header" ng-repeat="skill in skills | filter:search">
skill.fields.post_title
</div>
</div>
<script type="text/javascript">
var skills_list = '["model":"posts.post","pk":1,"fields":"post_title":"Algorithms","post_content":"Calling it.","updated_on":"2016-06-12T09:09:45.198Z","timestamp":"2016-04-20T09:44:21.887Z","test_type":"Coding","number_of_questions":0,"test_url":"http://example.com","model":"posts.post","pk":4,"fields":"post_title":"Data Structures","post_content":"new content here","updated_on":"2016-06-12T09:09:26.359Z","timestamp":"2016-04-26T06:28:32.569Z","test_type":"Coding","number_of_questions":0,"test_url":"http://example.com","model":"posts.post","pk":11,"fields":"post_title":"Dynamic Programming","post_content":"This level of DP is well suited for 2+ yr experience programmers/researchers.","updated_on":"2016-06-12T09:09:16.542Z","timestamp":"2016-06-12T08:44:25.705Z","test_type":"Coding","number_of_questions":0,"test_url":"#"]'
var nice_data = JSON.parse(skills_list.replace(/"/g, '"'))
var very_nice_data = nice_data;
</script>
【讨论】:
我试过了。输出为空白。我不认为它会完全解决问题。似乎 django 处理了花括号 。 IMO angularjs 大括号和 django 大括号之间存在冲突。对此有何建议?【参考方案3】:最终解决问题。我遇到以下问题:
django 的花括号和角度视图绑定存在冲突。所以我在下面创建了自定义绑定。
var app=angular.module('appName', []);
app.config(function($interpolateProvider)
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
);
【讨论】:
以上是关于与 AngularJS 一起使用时,Django 模板不呈现 JSON 响应的主要内容,如果未能解决你的问题,请参考以下文章
ngInit 无法与 AngularJS 和 Django 一起正常工作
将 AngularJS 与 SharePoint WebParts 一起使用时推荐的方法是啥
请求新页面时如何将 AngularJS 路由与 Express (Node.js) 一起使用?
Angularjs + Typescript,如何将 $routeParams 与 IRouteParamsService 一起使用