Display data from Json in Angularjs

Question

First of all, I have to say that is my first time posting on StackOverflow.. So if I post on the wrong area, sorry.

I'm beginning with angularjs, and I'm struggling into two points. 1st I've to create a connection with my mysql, witch i wasn't able until now.. 2nd I've to display the content into the HTML page.

I'm using the following code, witch includes the app.js, page.html and data.json (I'll change that later to php if I'm allowed to.) The app.js seems to work fine, but the view (page.html) isn't display any data..

App.js

    app.controller('PatientListCtrl', ['$scope', '$http', function ($scope, $http) {
    $http.get('patients.json').success(function (data) {
        $scope.patients = data;
    });
    $scope.orderProp = 'id';
}]);

patients.json

[
    {
        "id": 0, 
        "first_name": "John", 
        "last_name": "Abruzzi"
    }, 
     {
        "id": 1, 
        "first_name": "Peter", 
        "last_name": "Burk"
    }
]

Page.html

<!DOCTYPE html>
<html class="no-js" ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
  </head>

  <body>

    <div data-ng-repeat="patient in patients">
        {{patient.id}}{{patient.last_name}}{{patient.first_name}}{{patient.SSN}}{{patient.DOB}}      
        <div>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
    <script src="app.js"></script>

  </body>

</html>

Thanks for your attention.

You call a "patients.json" file in your controller, but named it data.json in your exemple, is that normal ? — KCarnaille
– KCarnaille, Commented Dec 30, 2015 at 14:02
My bad, the file actually is named patients.json. I'll edit my post. Thank you for the reminder :) — Fred. Dutra
– Fred. Dutra, Commented Dec 30, 2015 at 14:07

Sajeetharan · Accepted Answer · 2015-12-30 14:04:38Z

1

You have not define the controller in the view

<div ng-controller="PatientListCtrl" data-ng-repeat="patient in patients">
       <li> {{patient.id}} </li>
  <div>

Here is the working Fiddle

edited Dec 30, 2015 at 14:04

answered Dec 30, 2015 at 14:01

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

Sajeetharan Over a year ago

@Fred.Dutra welcome, mark as answer if it had helped you

Fred. Dutra Over a year ago

Be sure I'll! Although idk if I can (low points I guess). Give my 3 min and I'll find out :D

Collectives™ on Stack Overflow

Display data from Json in Angularjs

App.js

patients.json

Page.html

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

App.js

patients.json

Page.html

1 Answer 1

2 Comments

Related