Twitter Bootstrap Question posted in

Can't able Retrieve data from JSON file using Angular js-Twitter bootstrap

Empty data is adding in Table.

enter image description here

I am not able to retrieve data from Json file using Angular Js. I am trying to get the Json data from URL using click function in angular Js and also when click the button add empty tr in table.

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(data) {
            $scope.students = data;
        });
    }
});
<!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 = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="{% static 'waste/angular.min.js'%}"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="{% static '/bootstrap/js/app_ang.js'%}"></script>

        <div class="col-sm-12" ng-controller="tablejsonCtrl">
             <button class="clickbutton" value="10" 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="stuednt in students">
                    <td>{{stuednt.name}}</td>
                    <td>{{stuednt.price}}</td>
                    <td>{{stuednt.description}}</td>
                    <td>{{stuednt.calories}}</td>
                    <td>{{stuednt.isbest}}</td>
                </tr>
             </table>
        </div>

        
  </body>
</html>
Tags:

2

Answers


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

    You need to pass a response alongside the data that you are fetching.

    Login or Signup to reply.
  2. 0

    controller

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

    html 

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

    json price and calories values should be in double quotes

    {
    "breakfast_menu":
    {
        "food": [
        {
            "name": "Belgian Waffles",
            "price": "$5 .95",
            "description": "Two of our famous Belgian Waffles with plenty of real maple syrup",
            "calories": "650",
            "isbest": "false"
        },
        {
            "name": "Strawberry Belgian Waffles",
            "price": "$7 .95",
            "description": "Light Belgian waffles covered with strawberries and whipped cream",
            "calories": "900",
            "isbest": "true"
        }]
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search