The type 'Observable<void>' cannot be assigned to the type 'Observable<JSON>'

  fetchStepData(): Observable<JSON>  {                  
            this.headers = new Headers();
            this.headers.append('Content-Type', 'application/json; charset=utf-8');                
            let options = new RequestOptions({
                method: RequestMethod.Post,
                url: "FeedbackMaster.aspx/fetchStepData",                   
                headers: this.headers,
                  body:{log:this.login}
            });
            return this._http.request(new Request(options)).retry(2)
            .map((response: Response)=>this.retrieveData(response))
            .do(data => {this.temp=data, console.log('fetchStepData:'+ JSON.stringify(JSON.parse(this.temp.d)))})
            .catch(this.handleError);                  
    }

    retrieveData(res: Response) {
           let data = res.json();
           return data || { }; //<--- not wrapped with data
     }
          handleError(error: any) {
         console.error('An error occurred', error);
          return Promise.reject(error.message || error);
   }  

.......................................................................................................

Error

[ts]
 Type 'Observable<void>' is not assignable to type 'Observable<JSON>'.
 Type 'void' is not assignable to type 'JSON'.

What could be the issue in my code?

Answer №1

.map() must have a return value, such as:

.map((result: Result) => { this.processResult(result); return result.data(); })

The return result.data() produces an Observable<Data>. If nothing is returned from .map(), it will result in an Observable<void>.

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

Differences in weekend start and end days vary across cultures

Looking for a solution to determine the weekend days per culture code in Typescript/Javascript? While most countries have weekends on Sat-Sun, there are exceptions like Mexico (only Sunday) and some middle-eastern countries (Fri-Sat). It would be helpful ...

Who is the intended audience for the "engines" field in an npm package - consumers or developers?

As the creator of an npm library, I have included the current LTS versions of Node.js and npm in the package manifest under the engines field. This ensures that all contributors use the same versions I utilized for development: Node.js <a href="/cdn-cgi ...

Obtain access to the DOM element using template reference variables within the component

Searching for a method to obtain a reference to the DOM element for an Angular 2 component through a template reference variable? The behavior differs when working with standard HTML tags versus components. For example: <!--var1 refers to the DOM node ...

Error: In Angular 5, the function .next() is not recognized as a valid method for Subjects

I'm attempting to update a Subject named period by calling .next() with a new string, but the console is showing an error saying this.period.next is not a function. option.component.ts import { Component, OnInit } from '@angular/core'; imp ...

Discovering items located within other items

I am currently attempting to search through an object array in order to find any objects that contain the specific object I am seeking. Once found, I want to assign it to a variable. The interface being used is for an array of countries, each containing i ...

Pipe for Angular that allows for searching full sentences regardless of the order of the words

I am looking to create a search bar that can search for the 'title' from the table below, regardless of the word order in the sentence. I attempted to use a filter pipe to check if the search string exists in the title. I also experimented with ...

Instructions for inserting a hyperlink into a column of a table with the *ngFor directive in Angular2

I currently have a table with 4 columns: Name, ID, Department, and City. I am fetching both the row data and column data as an array from a TypeScript file and iterating through them using *ngFor. Below is a snippet of my code: <tbody> <tr *ng ...

Angular-Slickgrid: Some filters may not display on the header row

After thorough investigation and experimentation, I was able to identify both the issue and a suitable solution: The problem stemmed from our dataset's usage of numeric IDs (e.g. 1,2,3,...). Within the code, there was an error where the grid misinter ...

Exploring Angular: How to Access HTTP Headers and Form Data from POST Request

I am currently working with an authentication system that operates as follows: Users are directed to a third-party login page Users input their credentials The website then redirects the user back to my site, including an auth token in a POST request. Is ...

Unable to modify the text value of the input field

I am currently learning how to code in React, so please forgive me if my question seems basic. I am attempting to change the text of an Input element based on the value of the filtered variable, like this: const contactContext = useContext(ContactContext); ...

Downsides of exclusively using TypeScript for all components in a React project with .tsx files

While working on TypeScript + React (JSX) code, I encountered a problem where I mistakenly wrote JSX with the file extension of .ts, causing issues. It can be resolved by changing the extension to .tsx, but I wondered if it would be more convenient to have ...

Dialog component from HeadlessUI doesn't support the Transition feature

Currently working with Next.JS version 14.1.3 I recently integrated the <Dialog> component from HeadlessUI and configured TailwindCSS. However, I encountered an issue where the Modal window doesn't have any transition effects even though I foll ...

"Experiencing issues retrieving user-modified values in NativeScript's TimePicker component

I'm having trouble retrieving the user-modified value from a TimePicker. Instead of getting the modified value, I keep receiving the original value that was initially set in the control. Below is my component template: <TabView [(ngModel)]="tabSe ...

The JSX element with type 'Component' does not support any construct or call signatures at this time

I am facing an issue with the following code snippet const pageArea = (Component:ReactNode,title:string) => ({ ...props }) => { return ( <> <div> { Component && (<Component { ...

Angular is having trouble locating the module for my custom library

Trying to implement SSR in my angular application, but encountering an error when running npm run build:ssr. I've created my own library named @asfc/shared, which is bundled in the dist folder. ERROR in projects/asfc-web/src/environments/environment. ...

Accessing the authentication-required image source in Nativescript

I am attempting to show an image that is protected with OAuth in Nativescript. <Image src="url-to-secured-image"></Image> Therefore, I have to include the jwt token in the header of the request somehow. I searched and came across angular-img ...

Looking for a way to include an input box within a react-select option dropdown menu

Currently, I am facing a situation where I need to include an input box within my dropdown option menu. The challenge is that I cannot utilize the custom tag creator feature of react select to create a new option with the dropdown. Upon going through the ...

Dealing with errors in authorized requests in Angular 6 with the help of interceptors

Within my Angular application, I have implemented an interceptor to handle authorization headers. This interceptor also specifically handles HTTP errors related to status code 401, indicating bad credentials or a missing access token on the server side. In ...

Having trouble accessing the product details in my Angular app hosted on Azure

In Azure, my Angular application is hosted. There's an issue where users cannot open the app by pasting a specific URL into the browser (). Instead of opening, it redirects to , even when pasting . If I try pasting in the browser, it works fine. But ...

What is the appropriate data type to specify for the useLoaderData() function, and in what

I'm currently delving into the deep #6 tutorial on NetNinja's react-router, but I'm attempting to implement it using TypeScript. My task involves fetching data from a JSON object, utilizing the useLoaderData() hook, and trying to properly ma ...