Tips on assigning Angular controller element with values from an HTTP GET response

Question

Tips on assigning Angular controller element with values from an HTTP GET response

When using the http get function to retrieve a JSON array from a service, how can I assign the response to the controller's locations element?

function MainCtrl($http, myService) {
    this.locations = null;
    myService.async().then(function(data) {
        this.locations = data;
    });
}

The response data is in a well-formed JSON format.

javascript json angularjs http-get

Answer 1

Answer №1

To implement this, simply create a reference to the current context and utilize that variable reference in the callback function.

function MainCtrl($http, myService) {
    var vm = this;

    vm.locations = []; // make sure to initialize properly
    myService.async().then(function(data) {
        vm.locations = data;
    });
}

Answer 2

To implement this, simply create a reference to the current context and utilize that variable reference in the callback function.

function MainCtrl($http, myService) {
    var vm = this;

    vm.locations = []; // make sure to initialize properly
    myService.async().then(function(data) {
        vm.locations = data;
    });
}

Answer 3

Answer №2

Another method to tackle this issue is by incorporating my solution for the sake of providing a comprehensive response. It is also feasible to associate the this reference with your function. This can be accomplished in two ways, either by utilizing the angular.bind() or the native JavaScript bind to transmit this reference.

For instance:

function MainCtrl($http,myService) {
    this.locations = []; // properly initializing

    myService.async().then(function(d) {
        this.locations = d;
    }.bind(this));
}

P.S.: I attempted to enhance your answer by including these solutions to address the issue of varying scopes, but it was rejected. The reason stated was:

This edit was intended to establish communication with the author of the post and does not make sense as an edit. It should have been shared as a comment or an answer

Not to criticize the reviewers, but they seem to overlook the fact that I am unable to post any comments due to my current reputation, and it would not be appropriate to answer a question that has already been addressed.

Answer 4

Another method to tackle this issue is by incorporating my solution for the sake of providing a comprehensive response. It is also feasible to associate the this reference with your function. This can be accomplished in two ways, either by utilizing the angular.bind() or the native JavaScript bind to transmit this reference.

For instance:

function MainCtrl($http,myService) {
    this.locations = []; // properly initializing

    myService.async().then(function(d) {
        this.locations = d;
    }.bind(this));
}

P.S.: I attempted to enhance your answer by including these solutions to address the issue of varying scopes, but it was rejected. The reason stated was:

This edit was intended to establish communication with the author of the post and does not make sense as an edit. It should have been shared as a comment or an answer

Not to criticize the reviewers, but they seem to overlook the fact that I am unable to post any comments due to my current reputation, and it would not be appropriate to answer a question that has already been addressed.

Tips on assigning Angular controller element with values from an HTTP GET response

Answer №1

Answer №2

Similar questions

Accessing location information using jQuery from Google's Geocoding API

Ways to trigger Bootstrap modal through a PHP GET call

Using React and Redux to update a property in the state with a modified array

Animation fails to operate on the second ajax request

What purpose does the by.js locator serve in Protractor/WebDriverJS?

How to merge multiple hover effects using JS or JQuery

The loss of Webgl context that remains unrecovered

Load JSON data into a dropdown menu using Ajax response

Prevent users from navigating back after logging in on a Reactjs application

Having trouble with res.render() when making an axios request?

Sending an HTTP Post Request in Swift using dataUsingEncoding may corrupt the string

Struggling to include the VividCortex angular-recaptcha dependency in the AngularJS module due to an

Vue.js powered search bar for exploring countries worldwide (utilizing the restcountries API)

Adding an array field to MongoDB documents using MongoClient in Node.js by referencing another field

Creating a jQuery fade in effect for my custom lightbox design

The process of displaying custom number buttons on the correct input field in react.js

Create a C# WebService that utilizes a standard post request body to send data and responds with JSON

Developing a countdown clock with php and asynchronous javascript (ajax)

What are the best practices for establishing a secure SignalR client connection?

The value of the "start_url" property is being disregarded as it must have the same origin as the document