CODEWITHSUNDEEP
javascripthtmlangularjsjson
Alex Gordon
Alex Gordon

Reputation: 60691

unable to get contents of web api json response, returning blank

I'm a complete beginner with front end programming; however, I'm seasoned in backend c# (non web-stuff).

I've got 2 visual studios open. One is serving up web api, and the other one is consuming the web api.

How do I read and display json from a remote source?

When trying to read one of the APIs, the page is showing nothing.

My HTML:

<!doctype html>
<html ng-app="myApp">
<head>
    <title>Hello AngularJS</title>

    <script src="Scripts/angular.js"></script>
    <script src="app.js"></script>
    <script src="controllers/GbyG.js"></script>
</head>

<body ng-controller="GbyG">

<table border="1">
    <tr ng-repeat="data in greeting">
        <td>{{data.FirstName}}</td>
    </tr>
</table>


</body>
</html>

GbyG.js

'use strict';

app.controller('GbyG',
        function($scope, $http) {
            $http.get('http://localhost:36059/api/Samples/GetAllSamplesByStatusUser')
                .success(function(data) {
                    $scope.greeting = data;

                });
        }

);

app.js

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

sample of json that i'm reading

[{"Sample":{"sampleid":1,"barcode":"129076","createdat":"2015-01-02T00:00:00","createdby":6,"statusid":3},"Status":"Report Generation","FirstName":"Clint","LastName":"Reid"},{"Sample":{"sampleid":2,"barcode":"850314","createdat":"2015-06-15T00:00:00","createdby":7,"statusid":3},"Status":"Report Generation","FirstName":"Kim","LastName":"Mullins"}]

How do I read and display json from a remote source?

Upvotes: 0

Views: 603

Answers (2)

Rayon
Rayon

Reputation: 36609

Refer $http docs

  • Use .then handler instead of .success as later is depricated
  • Access data property of response object as it holds the data

'use strict';
var app = angular.module('myApp', []);
app.controller('GbyG',
  function($scope, $http) {
    $http.get('http://thetraveltemple.com/webservices/fetchCountry.php')
      .then(function(data) {
        $scope.greeting = data.data;
      });
  }
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="GbyG">
  <table border="1">
    <tr ng-repeat="data in greeting.countries">
      <td>{{data.country_name}}</td>
    </tr>
  </table>
</body>

Upvotes: 2

Deepanjan
Deepanjan

Reputation: 649

Here is the plnkr http://plnkr.co/edit/1MkV3qJ7WupKkNlybZNT?p=preview

you can replace the rest service instead of tag.json in the get call, that i used inorder to test.

Your JSON should come in this format.

[{
  "Status": "Report Generation",
  "FirstName": "Clint",
  "LastName": "Reid",
  "Sample": {
    "sampleid": 1,
    "barcode": "129076",
    "createdat": "2015-01-02T00:00:00",
    "createdby": 6,
    "statusid": 3
  }
}, {
  "Status": "Report Generation",
  "FirstName": "Kim",
  "LastName": "Mullins",
  "Sample": {
    "sampleid": 2,
    "barcode": "850314",
    "createdat": "2015-06-15T00:00:00",
    "createdby": 7,
    "statusid": 3
  }

}]

Upvotes: 1

Related Questions