Angular, controller & service interaction to display json data

Question

I'm new in Angular 1.5+ and I'm having some small issues with the basics, such as displaying data from a JSON file on the DOM.

So, I'm able to fetch the data fine, (I think, since it console logs okay)

But, then I'm not too sure how to interact with it on the controller, so that it's used on the html

Service

export default class Gsheets {
    constructor($http){
        'ngInject';

    this._$http = $http;


    var gData = this;

    this._$http({
        method: 'GET',
        url: 'https://jsonplaceholder.typicode.com/posts',
    })
    .then(function(response) {
    console.log(response.data);
    gData.headers = response.data;
    }, function() {
        alert("Error");
    });
}

}

Controller

(What do I have to do here?)

class EditorCtrl {
  constructor( Gsheets) {
    'ngInject';


    this._Gsheets = Gsheets;
    }
}

HTML

       <ul>
         <li ng-repeat="header in $ctrl.gData.headers"></li>
         {{header}}
       </ul>

Thank you in Advance, and any help will be much appreciated.

Regards,

Chris · Accepted Answer · 2017-01-26 11:19:31Z

2

You store the response headers in a member of the Gsheets instance and the Gsheets instance as _Gsheets in the EditorCtrl.

So you need to reference it like this:

<ul>
  <li ng-repeat="header in $ctrl._Gsheets.headers">{{header}}</li>
</ul>

answered Jan 26, 2017 at 11:19

Chris

6,6911 gold badge25 silver badges27 bronze badges

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

1 Comment

Nick Ko Over a year ago

Fantastic, thank you very much sir, I thought it had something to do with the controller, instead of the html elements. Thank you for the help

Collectives™ on Stack Overflow

Angular, controller & service interaction to display json data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related