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

Definitions for images in the following format

How to use the Angular 7 CLI in a programmatic way

The error "Cannot access property afs (Angularfirestore) of undefined in the collection.set()" occurred

Node.js, sigma.js, and the typescript environment do not have a defined window

Include a hash in the URL when the current location is entered into the view by scrolling

Tips for maintaining consistent column size in an angular material table as the screen size shrinks

What is the best way to extract Angular's routing UrlMatchResult from UrlMatcher within a component?

Attempting a second filter of the table using the dropdown results in no data being returned

Guide for setting up various validations for formGroup in an Angular 5 project

Having conflicting useEffects?

Vue encountered a double loading issue when utilizing a library compiled with Webpack

An undefined variable in Angular 2's evaluation

Is it possible to execute an HTTP request using a functional resolver?

Why does the page not work when I enter a certain URL with an ID parameter, and instead displays the error message "Uncaught ReferenceError: System is not defined"?

Having trouble getting TypeScript to install using npm on a Mac?

Send a Date Object through an Event Emitter to be used in a Date Picker

Broken Encoding Issue with Server-Side HttpClient Response in Angular 5 Universal

substitute one item with a different item

Troubleshooting issue with Express.json() functionality in the latest release of version 4.17

An issue has been identified with the functionality of the router-out