Data in JSON file not showing in html

Question

I'm using AngularJS to load data to my html file and my local server is wamp server. But records in JSON file not loading to index.html page.

Index.html :

<head>
    <meta charset = "UTF-8">
    <title>AngularJS | $http Service</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
    <script src = "controller.js"></script>
</head>
<body ng-app = "mainApp">
    <div ng-controller = "people">
        <ul>
            <h2>Names and Age of Programmers in Colombo</h2>
            <li ng-repeat = "person in persons">
                {{ person.name + ' : ' + person.age }}
            </li>
        </ul>
    </div>
</body>

Controller.js :

var app = angular.module('mainApp', []); 
app.controller('people', function($scope, $http) {
  $http.get('http://localhost/angular/Tut16_httpService/database.json').success (function(response) {
    $scope.persons = response.records;
  }); 
});

database.json :

{
"records": [
    {
        "Name":"Mehul",
        "Age":"18"
    },
    {
        "Name":"Jai",
        "Age":"24"
    },
    {
        "Name":"Alex",
        "Age":"27"
    },
    {
        "Name":"Rahul",
        "Age":"30"
    }
] 
}

Output is :

Any Help?

Anik Islam Abhi · Accepted Answer · 2016-02-20 10:35:18Z

1

Property name should be as same as json file.

Convert this

{{ person.name + ' : ' + person.age }}

to this

{{ person.Name + ' : ' + person.Age }}

answered Feb 20, 2016 at 10:35

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

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

Comments

Prasad · Accepted Answer · 2016-02-22 11:05:49Z

1

<div ng-controller = "people">
        <ul>
            <h2>Names and Age of Programmers in Colombo</h2>
            <li ng-repeat = "person in persons.records">
                {{ person.Name + ' : ' + person.Age }}
            </li>
        </ul>
    </div>

plunker :- https://plnkr.co/edit/mRyRnovs2zpk5pMNjbaW?p=preview

Good Luck !! Simple Mistake Buddy Watch it :-) !!

edited Feb 22, 2016 at 11:05

answered Feb 20, 2016 at 10:37

Prasad

1,6005 gold badges27 silver badges42 bronze badges

Collectives™ on Stack Overflow

Data in JSON file not showing in html

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related