Doing a simple HTTP GET request with RxJS does not do anything

I'm encountering an issue with my code:

export class Test {

constructor(private http: Http) {}

logResponse(): Observable<any> {
  return this.http.get('http://google.com')
    .do(data => console.log("All: " +  JSON.stringify(data)));
  }
}

Even though I have all the necessary imports and trigger it on a button press, nothing is getting logged to the console. This is frustrating as I am just starting out with Rxjs. Can anyone help me understand why the data is not being logged? Your assistance would be greatly appreciated.

javascripthttptypescriptangularrxjs

Answer №1

First of all, you need to include the subscribe method in order to activate it. Remember that this observable is considered cold (check out this article on hot vs cold observables for more information).

In your specific situation:

logResponseData(): Observable<any> {
  return this.http.get('http://google.com')
    .do(data => console.log("All data: " + JSON.stringify(data)))
    .subscribe(data => console.log("All data from subscribe: " + JSON.stringify(data)));
  }
}

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

unusual occurrences with JavaScript - debugging on Google Chrome

There's a bizarre issue happening in my code. An object is being sent correctly by the server, and it's arriving in my angular factory just fine. However, when I log the object, something strange occurs: https://i.sstatic.net/S6WvC.png When the ...

javascriptangularjsgoogle-chromelogginggoogle-chrome-devtools

Angular 4 router is being implemented for drag and drop functionality by ng-dragula with the

Our app is built with angular 4 and we are currently attempting to customize our theme using dragula. I successfully implemented all aspects of the page and everything seems to be working properly, including persistence. However, there is one major issue t ...

angularangular2-routingdragula

Elevate your tooltips with Bootstrap 5: enabling hoverable tooltips and clickable links

At times, you may want to include clickable links in tooltips. I recently encountered this issue while using Bootstrap 5 and had trouble finding a solution. After some trial and error, I finally figured it out and wanted to share my findings. The standard ...

javascriptbootstrap-5bootstrap-popoverpopper.jstwitter-bootstrap-tooltip

Image of sprite is not displayed

Having trouble displaying a sprite. Here is the HTML file : <head> <script src="https://github.com/photonstorm/phaser-ce/releases/download/v2.7.5/phaser.min.js"></script> </head> <body> <div id="game"></div& ...

javascriptphaser-framework

Adding the ability to export CSV files from Bootstrap Table to an Angular 15 project

Struggling to incorporate the Bootstrap-table export extension into my Angular project without success so far. Visit this link for more information Any assistance or examples would be greatly appreciated. Thank you in advance! This is what I have tried ...

javascriptjqueryangularbootstrap-5bootstrap-table

Tips for creating a drawing grid with a table

I am currently working on a project where I need to create a canvas-like table with around 10,000 cells. The goal is to allow users to draw on this canvas by moving their mouse over it while holding down specific keys (e.g. ctrl for blue, shift for red). ...

javascripthtmlcsscanvashtml-table

A unique string containing the object element "this.variable" found in a separate file

Snippet of HTML code: <input class="jscolor" id="color-picker"> <div id="rect" class="rect"></div> <script src="jscolor.js"></script> <script src="skrypt.js"></script> Javascript snippet: function up ...

javascripthtmlthis

Utilize Javascript to establish a fresh attribute by analyzing other attributes contained in an array within the object

Currently, I am working on a data structure that looks like this: masterObject: { Steps: [ { step: { required: false, }, step: { required: false, }, step: { required: false, }, }, ] } ...

javascriptangularjsloopsforeach

Preserving type information in TypeScript function return values

Wondering how to make this code work in TypeScript. Function tempA copies the value of x.a to x.temp and returns it, while function tempB does the same with x.b. However, when calling tempA, the compiler seems to forget about the existence of the b field ...

typescript

Displaying a Div Element using jQuery based on a PHP list

After researching how to toggle a div using jQuery based on dropdown selection made with "select" and options, I am facing a challenge. The dropdown selection code I am working with is as follows: <?php echo $this->lists['catid']; ?> T ...

javascriptphpjquery

How can I apply a CSS class to a group of radio buttons within a radio button list?

I'm attempting to validate a radio button group and apply a specific CSS class to it. Since this is a server control, I can only apply the class one way. However, upon checking with jQuery, I discovered that the class is actually being attached to the ...

javascriptjqueryhtmlasp.netcss

A Guide to Performing Dual API Calls within Angular for a Single Component

Is there a way to make two separate API calls within the same Angular component? For instance, I have an order component that is rendered twice in a tabular manager on a page. Using ngif condition, I display different data for TAB1 and TAB2. The issue is ...

angularangularjsangularjs-directiveangular-ui-router

Clicking to reveal a v-date-picker v-menu and automatically focusing on a v-text-field within it?

I implemented a date-picker component in my app following the instructions from Vuetify. To enhance usability for desktop users, I removed the readonly attribute to allow manual input. Now, desktop users can easily navigate through form fields using th ...

javascriptvuejs2vuetify.js

"Implementing type definitions for a function that updates records with nested properties and callback support

I am currently working on a function that updates nested values within a record. I have different versions of this function for paths of varying depths. My main struggle is figuring out how to properly type the callback function used when updating the val ...

typescripttypescript-generics

Utilizing React Router with the power of useCallback

My route configuration is set up as follows: const defineRoutes = (): React.ReactElement => ( <Switch> <Redirect exact from="/" to="/estimates" /> <Route exact path="/estimates" component={CostingPa ...

reactjstypescriptreact-router

The API response appears to be a successful 200 status code, however the actual result is a

I'm currently working with a VUEJS / VUEJS Resources code snippet that retrieves data from an API service. fetchData: function(name){ var self = this; self.$http.get('http://www.apiservice.com/', { params: { ...

javascriptvue.jsvue-resource

Is there a way to determine if the items in an array are duplicated?

Hello all, as a beginner in coding, I'm looking for guidance on determining whether an array contains repeated objects regardless of their order, without knowing the specific objects in advance. Let's say: I initialize an empty array: var rando ...

javascriptarrays

Splitting an array into multiple arrays with distinct names: A step-by-step guide

I have a data set that looks like this: [A,1,0,1,0,1,B,1,0,0,1,A,1]. I want to divide this array into smaller arrays. Each division will occur at the positions where "A" or "B" is found in the original array. The new arrays should be named with the prefix ...

javascripthtmlarrays

Using Node JS as both an HTTP server and a TCP socket client simultaneously

Currently, I am developing a Node.js application to act as an HTTP server communicating with a TCP socket server. The code snippet for this setup is displayed below: var http = require('http'); var net = require('net'); var url = requi ...

javascriptnode.jssocketstcp

Synchronizing the call of various views in an Angular application

I'm currently working on an angular single page application with a specific structure in mind. "app.parent - main parent state" "app.parent.childState - child state" "app.parent.childSatate" includes 4 different named views. My goal is to display so ...

javascriptangularjsangular-ui-router