DjangoテンプレートはJSONレスポンスをレンダリングしない

EDIT：解決DjangoテンプレートはJSONレスポンスをレンダリングしない

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(/&quot;/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>

出力のコンソールでは次のとおりです。

[ 
    { 
    "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": "#" 
    } 
    } 
]

私は、角使用して私のテンプレートに私の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>

バグはどこですか？助けてください。

出典

2016-06-14 user3105927

が最後に問題を解決しません。

djangoとアンギュラ・ビュー・バインディングの中括弧に矛盾がありました。だから私は以下のカスタムバインディングを作成しました。

var app=angular.module('appName', []); 
    app.config(function($interpolateProvider) { 
    $interpolateProvider.startSymbol('[['); 
    $interpolateProvider.endSymbol(']]'); 
    });

出典

2016-06-17 03:03:19 user3105927

very-nice_dataをストリング化しないでください。

あなたは$scope.skills = very_nice_data;

出典

2016-06-14 04:03:17 charlietfl

nice_dataの出力は、オブジェクトの配列です：**アレイ[3] 0：オブジェクト1：Object2に：Objectlength：3__proto__：配列[0] **どうやってこの配列でNG・リピートを使用してください。 '$ scope.skills = nice_data'を保持することもできません。 – user3105927

を行うとき、それは何Charlieftlが答えたことは完璧ですjavscript配列でないJSON文字列にする必要があります。代わりにのちょうど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(/&quot;/g, '"')) 
 

 
    var very_nice_data = nice_data; 
 
</script>

出典

2016-06-14 05:11:25

私は試しました。出力は空白でした。私はそれが問題を完全に解決するとは思わない。 djangoが中括弧{{}}を処理したようです。 IMOでは、anglejs中括弧とdjango中括弧の間に矛盾があります。それに関する提案はありますか？ – user3105927

DjangoテンプレートはJSONレスポンスをレンダリングしない

答えて

関連する問題