1

So I have been able to confirm that data is getting into my angular function, but have been banging my head against the wall trying to get it to the DOM. I am doing everything as simple as I can before I start creating my full crud.

I'm sure I am missing something simple, as I am a newb with Angular and most certainly utilizing $http through asp.net api. 

(function () {
angular
    .module('appmodule')
    .controller('campaignservice', ['$scope', '$http', campaignservice])

function campaignservice($scope, $http) {
    $http.get("http://localhost:58291/api/campaigns").then(function (data) {
        $scope.campaigns = data;
    });
  };
})();

and then the html

<div>
<div ng-controller="campaignservice">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Pages </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="campaign in campaigns">
                <td>{{campaign.Id}}</td>
                <td>{{campaign.Name}}</td>
                <td>{{campaign.Pages}}</td>
            </tr>
        </tbody>
    </table>
</div>

Whats my deal?? My brain is bleeding.

Jeff Longo
  • 191
  • 1
  • 1
  • 13
  • 1
    There might be an error that you are not catching, extend your code with this: `.then(function (data){ ... }, function(error){ ... });` – Aleksey Solovey Feb 15 '18 at 14:40
  • Why do you inject campainservice in your controller? – Zooly Feb 15 '18 at 14:43
  • 1
    @Zooly _that's a controller_ with a proper `[ ]` notation – Aleksey Solovey Feb 15 '18 at 14:47
  • Hi Aleksey, no errors coming through the console with the added catch. Zooly, if I dont inject the service, it will not recognize the function. – Jeff Longo Feb 15 '18 at 14:49
  • Make it more simple and go with a hardcoded array and see if that shows up to see where the issue might be. – user441521 Feb 15 '18 at 14:54
  • Yes, I have been using the same module for my login apis. – Jeff Longo Feb 15 '18 at 14:54
  • 2
    Does then() return the data? I thought it returned a response and the data is on response.data? – user441521 Feb 15 '18 at 14:54
  • user, I actually have a super simple one thats working above on the page that I cut out of the code. That one works just fine. – Jeff Longo Feb 15 '18 at 14:55
  • the then() definitely contains the data. I can see it in dev tools when I set a breakpoint. – Jeff Longo Feb 15 '18 at 14:55
  • 1
    When I look at examples online success() returns just data, but then() returns response.data from what I'm seeing. yes, there is data but the data you want I think is response.data (or data.data in your case) – user441521 Feb 15 '18 at 14:57
  • I originally was using success(), but that wasnt working at all, then I came across a few more examples that said .success was only up to angular 1.4 and that I need to use .then with angular 1.67 – Jeff Longo Feb 15 '18 at 14:58
  • 1
    @JeffLongo consider `$scope.campaigns = data.data;` or look at it with `console.log(data);` – Aleksey Solovey Feb 15 '18 at 14:59
  • http://www.syntaxsuccess.com/viewarticle/angular-promises%E2%80%93then-vs-success – user441521 Feb 15 '18 at 14:59
  • https://stackoverflow.com/questions/42895684/angularjs-version-1-6-change-from-success-method-to-then-method – Jeff Longo Feb 15 '18 at 15:01
  • will try that Aleksey – Jeff Longo Feb 15 '18 at 15:01
  • @JeffLongo yes that link shows they are using response.data to get the data which is what we are saying. – user441521 Feb 15 '18 at 15:03
  • 1
    Aleksey, data.data worked!!!! – Jeff Longo Feb 15 '18 at 15:03
  • No...the link says exactly what I said...I dont need angular 1.4 succeed that is antiquated and does not work with angular 1.6 and above. .then is what it was replaced with. – Jeff Longo Feb 15 '18 at 15:04
  • That's what I was saying lol. Change the variable name to response as that's what you're really getting. A response object that has a bunch of properties .data being one of them. – user441521 Feb 15 '18 at 15:04
  • @JeffLongo And the replies say exactly what I was saying. Use response.data to get your data. That's the part I was trying to point out. – user441521 Feb 15 '18 at 15:05
  • gotcha...and its now working...now for the hard part and actually build it the way I was supposed to. Thanks for the help guys. If either of you want to answer it, I will select your answer. – Jeff Longo Feb 15 '18 at 15:07

1 Answers1

1

From help in the comments I merely needed to make the following amendment. 

$scope.campaigns = data.data;
Jeff Longo
  • 191
  • 1
  • 1
  • 13
  • 1
    My only suggestion would be to rename the parameter passed from data to response so you have response.data. You are getting a response object back from the then() function. Read your backstory, keep sticking with it! A shame the math scared you back then. Universities for some reason think heavy math is required for programming when 90% of the time it's just not. Good luck man! – user441521 Feb 15 '18 at 15:21
  • thanks...will do! response.data is a tad more readable than data.data hahah – Jeff Longo Feb 15 '18 at 15:31