Angular 2 encountering an error with the HTTP GET request

I am currently facing some challenges with subscribing to the response while using the http method get request. Below is my service implementation:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/Rx';
import 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class ProfileService{
http: any;
url: String;
date: Date;

constructor(http:Http){
this.http = http;
this.date = new Date();
//this.baseurl = 'www.google.com';
}

get_heb_date():String{
var year = this.date.getFullYear();
var month = this.date.getMonth();
var day = this.date.getDay();
//var after_sunset = 1;
//var convert_from_gregorian_to_hebrew = 1;
return this.http.get('http://www.hebcal.com/converter/?fg=json&gy='+year+'&gm='+month+'&gd='+day+'&g2h=1')
.map(res => res.json());
 }}

Here is my component where I'm attempting to make the "GET" request.

import { Component } from '@angular/core';
import { JewristService } from '../../app/services/jewrist.service';
import { NavController } from 'ionic-angular';
import { ProfileService } from '../../app/services/profile.service';
import 'rxjs/Rx';


@Component({
selector: 'page-profile',
templateUrl: 'profile.html',
providers: [ProfileService]
})
export class ProfilePage {
username: String;
loggedin: Boolean;
date: String;

constructor(public navCtrl: NavController, private _httpservice: ProfileService) {
this.username = 'null';
}
ngOnInit(){
console.log('Profile component is running..');
this._httpservice.get_heb_date().subscribe(
data => this.date = JSON.stringify(data)
 ); }}

My IDE is ATOM on Windows, and it mentions the following problem: Property 'subscribe' does not exist on type 'String'.

Answer №1

It must be made Observable.

fetch_hebrew_date():Observable<string> // returns an Observable<resultant_type>

Answer №2

After some investigation, I discovered that the issue was located within the main.ts file.

platformBrowserDynamic().bootstrapModule(AppModule);

It turns out that the module name had not been properly configured. Once I corrected this, everything started working smoothly again. Thanks for your assistance!

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

Submit file in Cypress while hiding input[type="file"] from DOM

Currently, I am conducting end-to-end testing on an Angular project that utilizes Ant Design (NG-ZORRO). In this project, there is a button with the class nz-button that, when clicked, opens the file explorer just like an input type="file" element would. W ...

Having trouble with d3 / svg layering when introducing new nodes overtime

Struggling with a frustrating issue on my d3 force directed map project. Initially, I render the necessary nodes and links, then periodically check for updates through AJAX. The problem arises when adding new nodes and links – they appear over existing c ...

Displayed in the xmlhttp.responseText are the tags

Why do tags appear when I input xmlhttp.responseText into my textbox? It displays <!DOCTYPE html><html><body></body></html> along with the desired content. Is there a way to prevent the tags from being displayed? Here is the ...

The navigation bar buttons in my IONIC 2 app are unresponsive on both the

In Ionic 2 for Android, I encountered an issue with the title placement. To resolve this, I applied some CSS to center the title and added left and right buttons to the nav bar. However, when I tried to implement onclick functionality for these buttons, no ...

What is the best way to extract data from API console output using Angular?

Currently, I am deeply involved in a full stack project utilizing asp.net and angularjs. My goal is to extract output response from the Swagger API. You can view the code I've written for this purpose here: (https://i.stack.imgur.com/vLyIE.png) The A ...

Best practices for safely handling dynamic keys in Typescript

I am searching for a secure method to create keyed objects in this manner: interface Types { RED: 'RED'; BLUE: 'BLUE'; GREEN: 'GREEN'; } type TypeKeys = keyof Types; const COLORS: Types = { RED: 'RED', B ...

Getting the percentage of code coverage in Selenium tests in relation to the web application code

I need to track the code coverage of my selenium tests in relation to the source code of the server (web application source code) that they cover. For instance, I want the tests for the login feature to measure how much of the web application's code ...

Using JavaScript, import the variable module object from a specific module

Is there a way to import a module object from a module if I am unsure of the specific objects I will need beforehand? How can I utilize a variable in place of fixed module names? import { dynamicVariable } from './module' The variable represents ...

Check if the div has been clicked, even if its child elements have also

Is it possible to check if both a div and its child are clicked using jQuery? $('div').click(function(e){ if(e.target.id == 'test') alert(e.target.id); }); I have a specific div with an id of #test in my HTML code, and wh ...

Set the class function to be uninitialized

I'm a little unsure of my TypeScript knowledge. I have a class MyClass with a member variable that is a function, but I don't know what this function will be at compile time. I want to allow external code to set this function dynamically during r ...

The popularity of AJAX in JavaScript is continuing to rise

I am facing an issue with my website that features a configurable 3D object with various properties. Whenever I reload the div containing the 3D object to reflect new properties, the script data keeps adding on. This not only slows down the functionality a ...

Is the issue with AJAX and a global variable a result of my misunderstanding?

My goal is to use AJAX to load client data onto a page and then replace a company ID with the corresponding name from a different company table in the same database. However, I am facing an issue where the global JavaScript variable is not being updated wi ...

Before accessing the page, please ensure to make a double request

Encountered a weird issue, While inspecting the network tab in Chrome devtools, I noticed that my Vue app is making double requests to the same endpoint :/ Here's a snippet of my code: In the router section, I have a beforeEach function. When I navig ...

What is the best way to ensure webpacker compiled javascript only runs once the page has finished loading in a rails application

What is the best location to place window.onload for it to execute on every page within a Rails 6 application? ...

Exciting Angular feature: Dynamic Titles

I am working with an <i> tag <i class="actionicon icon-star" [ngClass]="{'yellow' : data.isLiked}" (click)="Like(data)" aria-hidden="true" title="Liked"></i> In my current set ...

Ways to switch classes within a loop of elements in vue.js

I'm just starting to learn vue.js and I'm working on a list of items: <div class="jokes" v-for="joke in jokes"> <strong>{{joke.body}}</strong> <small>{{joke.upvotes}}</small> <button v-on:click="upvot ...

Angular 2 Login Component Featuring Customizable Templates

Currently, I have set up an AppModule with a variety of components, including the AppComponent which serves as the template component with the router-outlet directive. I am looking to create an AuthModule that includes its own template AuthComponent situa ...

Is there a way for me to access the information within these curly brackets [[]}?

I'm facing a challenge where I need to extract the ID from an API response that is formatted in a way unfamiliar to me. As a result, I'm unsure of how to retrieve the ID data from this response. (This is my initial query, so if it's unclear ...

How to toggle between two background colors in a webpage with the click of a button using JavaScript

I need help with a unique website feature. I want to implement a button that cycles between two different background colors (white and black) as well as changes the font color from black to white, and vice versa. My goal is to create a negative version of ...

Tips for centering or aligning a component to the right using Material UI?

Is there an efficient method to align my button to the right of its parent in Material UI? One approach could be using: <Grid container justify="flex-end"> However, this would also require implementing another <Grid item />, which m ...