Twitter Bootstrap Question posted in

unable to Retrieve data from JSON file using Angular js-Twitter bootstrap

enter image description hereI am not able Retrieve data from Json file using Angular Js.
Am trying to get the Json data from URL using click function in angular Js and also when click the button add empty tr td in table.

 <!doctype html>
    <html lang="en" ng-app="sampleapp">
      <head>
       {% load staticfiles %}   
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="{% static 'bootstrap/js/angular.min.js'%}"></script>
        <script  type="text/javascript" src="{% static 'bootstrap/js/jquery.min.js'%}"></script>
        <script src="{% static 'bootstrap/js/bootstrap.min.js'%}" type="text/javascript"></script>
        <script type="text/javascript" src="{% static '/bootstrap/js/app_ang.js'%}"></script>
      </head>
      <body >

            <div class="col-sm-12" ng-controller="tablejsonCtrl">
                 <button class="clickbutton" ng-click="jsonclick();">Show-json</button>
                 <table rule="all" class="table table-bordered table-hover ">
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Description</th>
                        <th>Calories</th>
                        <th>isbest</th>
                    </tr>
                    <tr ng-repeat="value in students.breakfast_menu.food">
                        <td>{{value.name}}</td>
                        <td>{{value.price}}</td>
                        <td>{{value.description}}</td>
                        <td>{{value.calories}}</td>
                        <td>{{value.isbest}}</td>
                    </tr>
                 </table>

            </div>
      </body>
    </html>

var app =angular.module('sampleapp', [])    
app.controller("tablejsonCtrl", function ($scope, $http) {        
    $scope.jsonclick = function () {
        var url = "http://127.0.0.1:8000/static/waste/test.json";
        $http.get(url).then(function(response) {
            $scope.students = response.data;
        });

      }
});
Tags:

2

Answers


  1. 0

    Instead of use “.then” try with .success method, so replace this :

       $http.get(url).then(function(response) {
        $scope.students = response.data;
    });

    with this :

    $http.get('url').success(function (response){
    $scope.students= response;
});
    Login or Signup to reply.
  2. 0

    You can use HTTP request in local.
    Only works for Angular Versions above 1.6

    $http.get('./path-to-JSON-file/../someFile.json').
  then(function onSuccess(response) {
     angular.extend(_this, data);
     defer.resolve();
  }).
  catch(function onError(response) {
   console.log(response);
  });

    for further research: CLICK HERE

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search