What is causing the undefined value for the http used in this function?

Question

What is causing the undefined value for the http used in this function?

My Code Component

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'app-root',
  template: '<button id="testBtn"></button>'
})


export class MarketComponent implements OnInit {

  constructor( public http: Http ) { } 

  ngOnInit() {

    let btn = document.getElementById("testBtn");
      if(btn){
        btn.addEventListener('click',

          function(){

            this.http.get('./test.json')
            .map(response=>response.json())
            .subscribe(
              data => { //success
                console.log("success");
              },
              error => console.log("HttpRequestButton Error"), //error
              () => console.log("CategoryCount HttpRequestButton Get Test Finish")
            );

          }
        );
      } // if end

    }
  }

I am curious...

I attached the Click event to the addEventListener method.

Why is the http object undefined inside the function? I am unsure of the cause.

I need to access http within the function. Is there a solution?

angular http typescript

Answer 1

Answer №1

your solution

 btn.addEventListener('click',
          function(){
            this.http.get('./test.json')

Needs to be updated to

 btn.addEventListener('click',
          () => {
            this.http.get('./test.json')

For more information, visit:

Answer 2

your solution

 btn.addEventListener('click',
          function(){
            this.http.get('./test.json')

Needs to be updated to

 btn.addEventListener('click',
          () => {
            this.http.get('./test.json')

For more information, visit:

Answer 3

Answer №2

This 'this' is not the 'this' you're looking for. Consider using an arrow function or calling bind(this) at the end.

 const fetchData = () => {

        this.http.get('./test.json')
        .map(response=>response.json())
        .subscribe(
          data => { //success
            console.log("success");
          },
          error => console.log("HttpRequestButton Error"), //error
          () => console.log("CategoryCount HttpRequestButton Get Test Finish")
        );

      }.bind(this)

In a better approach, it could be implemented like this :

@Component({
    selector: 'app-root',
    template: '<button (click)="onClick()"></button>'
})

export class MarketComponent implements OnInit {

    constructor( public http: Http ) { } 

    ngOnInit() {}

    onClick(){
       this.http.get('./test.json')
        .map(response=>response.json())
        .subscribe(
          data => { //success
            console.log("success");
          },
          error => console.log("HttpRequestButton Error"), //error
          () => console.log("CategoryCount HttpRequestButton Get Test Finish")
        );

    }

}

Answer 4

This 'this' is not the 'this' you're looking for. Consider using an arrow function or calling bind(this) at the end.

 const fetchData = () => {

        this.http.get('./test.json')
        .map(response=>response.json())
        .subscribe(
          data => { //success
            console.log("success");
          },
          error => console.log("HttpRequestButton Error"), //error
          () => console.log("CategoryCount HttpRequestButton Get Test Finish")
        );

      }.bind(this)

In a better approach, it could be implemented like this :

@Component({
    selector: 'app-root',
    template: '<button (click)="onClick()"></button>'
})

export class MarketComponent implements OnInit {

    constructor( public http: Http ) { } 

    ngOnInit() {}

    onClick(){
       this.http.get('./test.json')
        .map(response=>response.json())
        .subscribe(
          data => { //success
            console.log("success");
          },
          error => console.log("HttpRequestButton Error"), //error
          () => console.log("CategoryCount HttpRequestButton Get Test Finish")
        );

    }

}

What is causing the undefined value for the http used in this function?

Answer №1

For more information, visit:

Answer №2

Similar questions

The Vue application combined with TypeScript is displaying an empty white screen

Convert a Java library to JavaScript using JSweet and integrate it into an Angular project

Ways to reuse test cases across different test suites in Protractor

The module 'json-stringify-safe' could not be located

Ways to immediately display an uploaded image as the background on a canvas

The response type for HTTP Get in Typescript is specified as "text"

Issue with the rendering of Navigation Bar in Angular 4 Bootstrap alpha

Tips for successfully sending an array of numbers using TypeScript and React

data is currently being uploaded to the storage, however, the grid is not displaying any

The TypeScript find() method on an array are showing an error message that says, "There is no overload that matches this call

Using POST parameters with HTTP Client in Angular 2

Getting a response directly from an HttpRequest and assigning it to a variable

An issue has been identified with React's HTML input maxLength feature where it does not display an error

What is preventing me from including an additional parameter in a function in TypeScript?

Automatically assign the creation date and modification date to an entity in jhipster

Encountering an error when trying to set data in a Firestore document with a customized JavaScript object: "Invalid data provided for function DocumentReference.set()"

Transform Angular into a library

Updating meta tags dynamically in Angular Universal with content changes

Encountering the "Argument of type 'string' is not assignable to parameter of type 'never'" error when using Array.prototype.includes

How to apply a single pipe to filter columns in Angular 2 with an array of values