Load data from json file to angular module

Question

I'm trying to load data into my angular module from json file but instead of data i'm getting this.

   var app = angular.module('myApp', []);

app.controller("myCtrl",function($scope, $http)
 {
   $http.get('bookData.json').then(function(response){

      $scope.books = response.data;
    });
 });

And in my view displaying data as:

<body ng-controller="myCtrl">
     <div>{{"Book details"}}</div>
     <div>
       <table>
         <tr ng-repeat="x in books">
           <td>x.bookid</td>
           <td>x.author</td>
         </tr>
       </table>
     </div>
 <script data-require="[email protected]" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script src="app.js"></script>
  </body>
</html>

But i'm getting output as:

   Book details

x.bookid    x.author
x.bookid    x.author
x.bookid    x.author
x.bookid    x.author

https://plnkr.co/edit/ZqcnwOKZUdUo5eDIdjlh?p=preview

JuniorDev · Accepted Answer · 2016-09-30 06:46:26Z

3

You need to wrap your logic with {{ and }} to make it recognisable by angular. Otherwise it'll print out as just plain text.

e.g

<td>{{x.bookid}}</td>
<td>{{x.author}}</td>

answered Sep 30, 2016 at 6:46

JuniorDev

1,2002 gold badges9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Prateek Aggarwal Over a year ago

Yeah It works !! it was such a silly mistake. Thanku so much.

coder77 · Accepted Answer · 2016-09-30 07:13:00Z

0

<body ng-controller="myCtrl">
    <div>
        <H1>Book details</H1>
    </div>
    <div>
        <table>
            <tr ng-repeat="x in books">
                <td>{{x.bookid}}</td>
                <td>{{x.author}}</td>
            </tr>
        </table>

edited Sep 30, 2016 at 7:13

answered Sep 30, 2016 at 7:04

coder77

162 bronze badges

Collectives™ on Stack Overflow

Load data from json file to angular module

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related