Angular.js simple get object from ASP.NET controller

Question

Been some time since I last looked at Angularjs. I have a simple get that calls an ASP.NET Controller and returns a Json object - the get is triggered but nothing is getting populated on the view. The Json object shows in the browser, so it's purely a JS Angular thing. I know I am missing something simple, but I can't quite put my finger on it. If someone would be kind enough to show what I'm missing preferably with an example that would great. I haven't been able to find a simple example, that's similar.

Angularjs.

var ngCurrent = angular.module("ngCurrent", ['ngResource']);
var ctrCd;
// Declaring a Service
ngCurrent.factory("CurrentService", function ($resource) {
    return {
        data: $resource("/Current/Data/:id")
    }
});

ngCurrent.controller("CurrentController", function ($scope, CurrentService) {
    $scope.current = CurrentService.data.get({ "id": id}, isArray = false);
});

In the CSHTML View (Condensed but all relevant rows included)

<div ng-app="ngCurrent" class="row">
    <div ng-controller="CurrentController" class="col-md-1"></div>
        <div class="row">
            <span class="col-sm-2">{{current.RecordName}}</span>

It runs triggers the "Get" from the controller but displays no data and $scope.current contains no object.

I have had a go at JSFiddling without success here it is http://jsfiddle.net/Mark_Dete/Lfy66re1/1/

(note the Json mocking is based on http://jsfiddle.net/ExpertSystem/6PYsq/)

If you look in DevTools/Network, is data returned to the client ? — sirrocco
– sirrocco, Commented May 29, 2015 at 3:16
Correction: Data is returned from the function. It's an object - {}. The examples I can find seem to be for Json Arrays. Am missing soemthing? — Mac
– Mac, Commented May 29, 2015 at 4:18

errata · Accepted Answer · 2015-05-29 04:25:56Z

2

You can return a promise from your service like:

    return $http({
      url: '/api/v1/service/',
      method: "GET",
      headers: {'X-API-TOKEN': api_key },
      params: _params
    })

Then use the promise callbacks on the http object in your controller (the one returned from your service)

$scope.getApiData = function(){
  Service.getData($scope.api_key)
  .then(function(_data) {
    console.log(_data.data); 
    $scope.data_obj = _data.data;
  });

here's an all in one version without the service abstraction but it should work for testing.

 $scope.getApiData = function(){
  $http({
      url: '/api/v1/service/',
      method: "GET",
      headers: {'X-API-TOKEN': api_key },
      params: _params
   })
  .then(function(_data) {
    console.log(_data.data); 
    $scope.data_obj = _data.data;
  });

Make sure you remember to inject the $http dependency!

edited May 29, 2015 at 4:25

answered May 29, 2015 at 2:16

errata

27.4k2 gold badges25 silver badges33 bronze badges

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

5 Comments

Mac Over a year ago

Tried some variants on this and can't seem to get any further. I think I'm missing some simple thing somehow. BTW. That is the complete Javascript there, but somehow, I feel something simple is missing.

errata Over a year ago

can you do a simple curl or http request and be sure that your api/webservice is working?

Mac Over a year ago

If I put the Get Url in the browser I get the Json. Ie {"RecordName": "Test" }

errata Over a year ago

ok cool.. do you know how to make that function fire? you can do an ng-click="getApiData()" in button element to test.

Mac Over a year ago

Tried this again. Don't even seem to trigger the "Get" into this server. Not sure if I'm missing something here too. But no errors come up on the console. Have attempted to JSFiddle it (edit above) to try and explain it better,

Collectives™ on Stack Overflow

Angular.js simple get object from ASP.NET controller

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related