current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 0 down vote favorite

I'm new in angularjs,i'm trying to load data from my json file on view. json file have some list of patients. But does not get showed on my view

here is my 'patient.json' file

[
{
    "id": 0, 
    "first_name": "John", 
    "last_name": "Abruzzi", 
    "middle_name": "Kewan",
    "DOB": "12/03/1935", 
    "ssn": "254-2342-42",
    "sex" : "Male",
    "country" : "USA",
    "city" : "Greater New York",
    "phone" : "1234124822",
    "military_branch" : "Army",
    "zip" : "08675",
    "guid" : ""
}, 
 {
    "id": 1, 
    "first_name": "Peter", 
    "last_name": "Burk", 
    "middle_name": "S",
    "DOB": "31/06/1945", 
    "ssn": "342-9876-54",
    "sex" : "Male",
    "country" : "USA",
    "city" : "New York",
    "phone" : "3346573924",
    "military_branch" : "FBI",
    "zip" : "25643",
    "guid" : ""
  }, 

 {
    "id": 2, 
    "first_name": "Neal", 
    "last_name": "caffery", 
    "middle_name": "Sam",
    "DOB": "28/02/1988", 
    "ssn": "420-4204-20",
    "sex" : "Male",
    "country" : "USA",
    "city" : "New York",
    "phone" : "676554323",
    "military_branch" : "Air Force",
    "zip" : "26531",
    "guid" : ""
  },
  ]

here is my controller.js

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

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

Here is my 'index.html' file

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="patientApp">
<head>
<title>Patient Management</title>
<script src="js/angular.js"></script>
<script src="js/angular-resource.min.js"></script>
<script src="js/controller.js"></script>
</head>
<body data-ng-controller="PatientListCtrl">
<table>
    <thead>
        <tr>ID</tr>
        <tr>First Name</tr>
        <tr>Last Name</tr>
        <tr>SSN</tr>
        <tr>DOB</tr>
    </thead>
</table>
<div data-ng-repeat="patient in patients">
    <table>
        <tr>{{patient.id}}</tr>
        <tr>{{patient.last_name}}</tr>
        <tr>{{patient.first_name}}</tr>
        <tr>{{patient.SSN}}</tr>
        <tr>{{patient.DOB}}</tr>
    </table>
</div>  
</body>
</html>

I think i'm missing something. plz help me ,thanks in advance.

share|improve this question
    
What you get if you do console.log($scope.patients) –  BKM Apr 4 '14 at 6:25

2 Answers 2

up vote 1 down vote accepted

Why are you using jsonp. It will not work jsonp is a work around to get data from diferent domain sources what it does is creates a javascript tag in your page this javascript will load an execute a function that you already have define in your page. so returning the json will not execute the function. Will not work.

http://en.wikipedia.org/wiki/JSONP

It looks like you don't have a problem of different domain requests because the url that you are trying to access is /json/patiens.json so I can assume you are trying to load it from the same domain. If that is the case $http.get is the way to go.

One more thing your code needs to run from a web server. If you created this test page and you are trying to load it from the filesystem, my friend you are out of luck will never work. You can not make ajax calls to file:///

In the case you are running it from a web server check the mime type. It could be that the mime type in the response header is incorrect and the browser can not parse the document.

If you are using a decent browser (anything other that IE) you have very reliable good debugging tools check if your code is making a request to the server. And check what are you getting back including the headers specially the mime type. If you are using windows a great tool is fiddle.

share|improve this answer
up vote 0 down vote

Instead of $http.jsonp, use $http.get

$http.get('/json/patients.json').success(function (data) {
   $scope.patients = data;
});

Check out this Plunkr

share|improve this answer
    
I have tried with $http.get ,nothing happened. –  user2067120 Apr 4 '14 at 5:47
1  
Can you please create jsfiddle of your code. –  Fizer Khan Apr 4 '14 at 5:47
    
I found that plunker,showing the the file's data,but when I try on my machine it's not showing single record. –  user2067120 Apr 4 '14 at 6:54
    
Here is my app on Plunker plnkr.co/edit/bvsXDuvcZEHRYTJIELwq?p=preview –  user2067120 Apr 4 '14 at 7:04
    
It is working for me. plnkr.co/edit/ZxafeslnhmdjMxFrzuzA?p=preview –  Fizer Khan Apr 4 '14 at 9:14

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.