Ways to retrieve the value of the variable within the confines of this particular

In my code, I have private variables in the constructor and public variables in the class.

To reference these variables and functions, I use the "this" keyword.

However, when trying to access these variables inside a function, I am getting an "undefined" error.

As a newcomer to Typescript, how can I access these variables within the function?

Technology: Typescript, Angular 2, Angular 1.6.5, JavaScript

admin-company-settings.ts

import { Component } from '../../../../common/extentions/to-angular2';
import { Http } from '@angular/http';

export class AdminCompanySettings {
    public company: any;
    constructor(private $http: ng.IHttpService) {
        //
    }

    this.company = "New company";
    console.log("Prints all public variables", this); //prints all variables

    var data = { url: www.google.com, data: { user: value } }

    this.$http(data).then(function (response) {

        console.log(response);
        console.log(this.company); // undefined cannot access company
        console.log("Prints window object", this); //this will print window 
                                                   //and not company var or 
                                                   //other scope vars
    }).catch(function (error) {

        console.log(error);

    });
}

I heard about using .bind(this) but I'm unsure where exactly to add it.

https://angular.io/guide/http for ref.

Answer №1

Utilize Arrow functions to maintain the context of this

this.$http(data).then((response) => {
        console.log(response);
        console.log(this.company);
        console.log("Displays window object", this);
    }).catch(function (error) {
        console.log(error);
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Javascript chart

Hello everyone, I am diving into the world of fetch API. Currently, I am faced with a challenge where I need to generate the following list items: <li>Zimmerman, Paul</li> <li>Yimmerman, Raul</li> <li>Limmerman, Caul</li> ...

Utilizing Angular2 Guard to Ensure False IdentityServer4 OIDC Security

After successfully authenticating a user and redirecting them back to the main site, the following code runs: <script src="https://cdnjs.cloudflare.com/ajax/libs/oidc-client/1.2.2/oidc-client.min.js"></script> <h1 id="waiting">Waiting... ...

Heroku: deployment unsuccessful

Currently, I am encountering a problem with Heroku: my build is failing without any explanation provided. Previously, I had no issues deploying. Even on my local machine, deployment was smooth. However, on my Heroku application, the build process halts a ...

Loading images efficiently using JavaScript

While working on my JavaScript exercises, I encountered something strange with the image slider script I was creating. When trying to change the image source using the 'setAttribute' method in the HTML code, I noticed that the source of the imag ...

The function addEventListener is not found

When a button is pressed, I want to add a value into a container by adding an event listener. <div className="grid-container"> <div> <button id="redBet" className="redButton" onclick={thi ...

I am unable to utilize the outcome of a custom hook within a function or within an effect hook

I've developed a unique custom hook that retrieves a list of individuals File: persons.hooks.ts import {useEffect, useState} from "react"; import Person from "../../models/person/Person"; const usePersons = () => { const ...

Using jQuery to insert a new string into the .css file

I'm currently working on a jQuery function to make my font size responsive to changes in width. While I am aware of other options like Media Query, I prefer a solution that offers smoother transitions. Using vw or vh units is not the approach I want t ...

Sending requests across domains from HTTPS to HTTP with callback functionality, and reversing the process

Prior to our conversation, I had created it using Flash. I uploaded a special file (crossdomain.xml) on the server side (https), while the Flash component was placed on the http server. Although they belong to different domains on the https and http serv ...

Discover anew the means to revive JavaScript and Ajax call towards the controller without necessitating any user click within the captivating Razor View of MVC 4

Controller Action : public ActionResult googlemap() { return View(); } This specific controller action is responsible for rendering the "googlemap.cshtml" view. It makes use of Ajax calls and includes JavaScript code in the "googlemap.csh ...

What is the best method for retrieving the selected itemsPerPage in Vuetify's data-table in version 2.0

Recently, I've been struggling to retrieve the selected items-per-page on a Vuetify data-table due to some recent changes. I came across this helpful example: How to set initial 'rows per page' value in Vuetify DataTable component? Here is th ...

Tips for navigating to an element with Nightwatch

I am currently using nightwatch for end-to-end testing of my application. One of the tests is failing because it seems unable to scroll to the element that needs to be tested. I am wondering if scrolling is necessary, or if there is another workaround. Her ...

Mastering the art of utilizing sequelize and promises effectively

I'm currently learning how to create apps using expressJS and Sequelize. I could really use some help as I'm more accustomed to sequential programming. My project involves two models: Todo (id, title) and TodoItem (id, content, complete, todoId). ...

Issue: The last loader (./node_modules/awesome-typescript-loader/dist/entry.js) failed to provide a Buffer or String

This issue arises during the dockerhub build process in the dockerfile. Error: The final loader (./node_modules/awesome-typescript-loader/dist/entry.js) did not return a Buffer or String. I have explored various solutions online, but none of them have pr ...

Ways to retrieve class variables within a callback in Typescript

Here is the code I'm currently working with: import {Page} from 'ionic-angular'; import {BLE} from 'ionic-native'; @Page({ templateUrl: 'build/pages/list/list.html' }) export class ListPage { devices: Array<{nam ...

Utilizing custom form fields with JavaScript in Symfony2

Here is my form field template: {% block test_question_widget %} {% spaceless %} <div {{ block('widget_container_attributes') }}> {% set type = type|default('hidden') %} <input type="{{ typ ...

Trouble with retrieving data from localStorage

On my webpage, I have set up multiple input fields where users can enter data. When they click a button, the data from these inputs is stored inside <span>...</span> elements (the intention being that the text remains visible in these <span& ...

Incorporate XHR into a JavaScript Function

Upon running the code below, a GET message is displayed in the Firebug Console. However, the variable appears as undefined, most likely due to its limited scope within the function. The objective here is to click on a table row, fetch relevant data from t ...

The use of '-' in v-bind:style within Vue.js

I'm having trouble figuring out how to use CSS code with dashes in v-bind:style. When I attempt something like this: <DIV style="width:100px;height: 100px;background-color: red;cursor: pointer;" v-bind:style="{ margin-left: margin + 'px' ...

JavaScript code encounters a math calculator script error

Am I overlooking something in my script? Everything seems to work fine when I click the minus (-) button, but when I press the plus (+) button, the calculator malfunctions. It displays 1, 11, 21, and so on, all ending with 1... Here is my code: functi ...

What is the most effective way to determine the data type of a value associated with a key in an interface?

In my TypeScript interface, I have defined the following structure: MyInterface { 'key1': number | string; 'key2': string; 'key3': SomeOtherInterface; } I am looking to create a new type that utilizes the properties of ...