Emulate an HTTP Observable response using a subject

In the realm of Angular 4, I have crafted a service that currently relies on an HTTP request to produce an Observable of type Comment.

 return this.http.post(targetUrl, JSON.stringify({ 'Text': comment.Text, 'ThreadId': threadId }), options)
    .map(this.extractData)
    .catch(this.handleError);

Here's the dilemma: when operating on a local host, I aspire for this service to provide data from a locally constructed variable. However, simply returning said local variable of comment type won't suffice, as it lacks observability. How might I transform this local creation into an observable entity?

angulartypescriptrxjs

Answer №1

To create an observable, simply pass your variable as an argument to the Observable.of method.

*While you could achieve the same result with a Subject, it may not be necessary in this particular situation. Nevertheless, 

var subject = new Subject();
subject.next(variable);
subject.asObservable();

Rx.Observable.of(...args) Converts arguments into an observable sequence.

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/of.md

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

Issue with calling a function to change the CSS color class of a button in Angular

Within my Angular code, I am attempting to set a CSS color for my button by calling a TypeScript function that will return the appropriate CSS class name. This is the code I have tried: <button style="height: 10%" class="getColor(days.date)">{{days ...

cssangulartypescript

What is the best way to send an array to the @input() of a separate component in Angular?

Successfully passed my array to the first @Input() and displayed its contents. Now, facing a challenge where I need to pass data from the first @Input() to the second @Input() and display it. Still navigating my way through Angular and learning the ins a ...

angular

Exploring through objects extensively and expanding all their values within Angular

I am in need of searching for a specific value within an object graph. Once this value is found, I want to set the 'expanded' property to true on that particular object, as well as on all containing objects up the object graph. For example, give ...

angulartypescriptsearch

Unit testing for Angular service involving a mock Http GET request is essential for ensuring the

I am seeking guidance on how to test my service function that involves http get and post calls. I attempted to configure the spec file by creating an instance of the service, and also consulted several sources on creating a mockhttp service. However, I enc ...

angulartypescriptrxjsmockingjasmine

Adding a new .row in Angular based on an ngFor condition

As a newcomer to Angular, I decided to take on their tutorial with a few modifications. I have created an array as follows: export const HEROES: Hero[] = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' }, { id: 13, name: ...

htmlangulartypescriptbootstrap-4

Removing a Request with specified parameters in MongoDB using NodeJS

Working with Angular 4 and MongoDB, I encountered an issue while attempting to send a delete request. My goal was to delete multiple items based on their IDs using the following setup: deleteData(id) { return this.http.delete(this.api, id) } In order ...

javascriptnode.jsangularmongodbexpress

Confirm that the string is in the correct JavaScript Date format

I'm encountering an issue with validating the specified string obtained from the new Date() Object. "2020-10-06T14:23:43.964Z". I anticipate receiving either this particular input format or a new Date(). My aim is to create something that ca ...

javascripttypescriptdatevalidation

What could be causing the app.component.html expression to be invoked repeatedly in my application?

As I was analyzing the evaluation of an expression in the main template app.component.html, I noticed that the trace appears exactly 5 times every time I refresh the page or click on any link. Curiously, when I placed a trace in the ngOnInit of app.compone ...

angularangular2-routingangular2-template

How to Share Angular Modules Between Two Projects with Ivy Compilation Necessity

Query: I am faced with the challenge of sharing common modules between two Angular projects, one of which requires full Ivy compilation to function properly. To manage these shared resources, we have set up a private GitHub NPM repository. However, becaus ...

angularnpmangular-ivy

Utilizing TypeScript Class Inheritance: The Reference to 'super' is Only Allowed in Members of Derived Classes or Object Literal Expressions

We have encountered a scoping issue while using TypeScript classes with inheritance. It seems that TypeScript/JavaScript does not allow us to use 'super' within a promise structure or an enclosed function. The error message we are getting is: Ty ...

javascriptjqueryinheritancetypescript

The argument passed cannot be assigned to the parameter required

Currently, I am in the process of transitioning an existing React project from JavaScript to TypeScript. One function in particular that I am working on is shown below: const isSad = async (value: string) => { return await fetch(process.env.REACT_AP ...

reactjstypescript

Tips on implementing jQuery in a JavaScript file referenced in angular.json

Currently, I am utilizing a JavaScript file that incorporates jQuery within it. In order to employ this JavaScript file, I have included it in the scripts array within the angular.json file. Additionally, I have also included jQuery in the same array befor ...

javascriptjqueryangularangular8

Navigating json information in Angular 6: Tips and Tricks

I'm currently working on an Angular 6 project and I've encountered an issue with iterating over JSON data fetched using httpClient. If anyone has a solution, I would greatly appreciate the help. The JSON data structure is as follows: Json data ...

angularangular6

When using Angular2, the form is being mistakenly submitted instead of triggering the desired onSubmit() method

I am working on a component that includes the following elements: Template <div class="hide" id="login-contents"> <form *ngIf="!current_user" role="form" (ngSubmit)="onSubmit()" #loginForm="ngForm"> <div class="form-group"> ...

angular

Trouble with Styling React-Toastify in TypeScript: struggling to adjust z-index in Toast Container

Currently in the process of developing a React application utilizing TypeScript, I have incorporated the React-Toastify library to handle notifications. However, encountering some challenges with the styling of the ToastContainer component. Specifically, ...

cssreactjstypescriptreact-toastify

Guide on invoking a promise within an observable method

In my current project, I am faced with the task of making two API calls. The second API call expects a value that is fetched from CouchDB as a promise. The method handling these calls is inherited, meaning I am unable to make modifications to it. I requir ...

angularrxjs

What is the proper way to incorporate ts-nameof in the gulp build process and encounter the error message: 'getCustomTransformers' is a compiler option that is not recognized

Utilizing ts-nameof in my TypeScript files, similar to this example in a .ts file: import 'ts-nameof'; export class MyTsNameOfTest { public testTsNameOf() { const nameString = nameof(console.log); } } My Gulp build task setup - followi ...

typescriptgulpgulp-typescript

Encountering a blank page and slow loading when launching the VSCode debugger using VS Code version 1.76.1 and Chrome 111

Recently, I've encountered a problem with the VS Code debugger while trying to debug an Angular application. I created a new Angular app using the ng new command and made some changes to the ngOnInit function. When attempting to start the Chrome deb ...

angularvisual-studio-codevscode-debugger

Angular 5 combined with Electron to create a dynamic user interface with a generated Table

I am working on an Angular Pipe: import {Pipe, PipeTransform} from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import * as Remarkable from 'remarkable'; import * as toc from 'markdown-toc&a ...

javascriptangularmarkdown

Testing reactive streams with marble diagrams and functions

Upon returning an object from the Observable, one of its properties is a function. Even after assigning an empty function and emitting the object, the expectation using toBeObservable fails due to a non-deep match. For testing purposes, I am utilizing r ...

javascripttypescriptjestjsrxjs-marbles