Angular 4 fetches the number obtained from a GET request

In my spring-boot back-end app, I have defined a query as shown below:

@Query("SELECT COUNT(*) "
            + "FROM Foo "
            + "WHERE name = :name and surname = :surname ")
Integer countByNameAndSurname(@Param("name") String name, @Param("surname") String surname);

While the query on the back-end side functions correctly, I am facing issues retrieving the integer value it returns on the front-end side developed with Angular 4. Despite numerous attempts, I have been unable to resolve this issue.

getCount() {
     return this.http.get(this.actionUrl + this.param,{headers: DataService.getHeaders()})
      .subscribe(response => {
          console.log(response);
          console.log(response.json());
          this.countResult = response.json();
        //return this.countResult;
          return response.json();
        })
  }

(I even tried defining a return type as getCount(): number{...} and returning the variable countResult that is set inside the call, but without success.) This method resides within my service class. I attempted both to store it in a public variable this.countResult for access from another class, and also to return the response.json()._body; which holds the desired integer. The API call itself executes flawlessly. I have tested it multiple times.

However, I consistently receive a Subscriber object containing very little information. https://i.sstatic.net/8PR9r.png

The service is invoked in this manner:

var count = this.dataService.getCountExternalCvs();
console.log(count);

When printing the count, it displays the subscriber object mentioned above.

The reason for using the .subscribe() method is to avoid receiving a Promise and instead obtaining the raw value.

Here are the responses and processed JSON data displayed during the service call, alongside the subscriber object obtained when invoking

var count = this.dataService.getCountExternalCvs();
https://i.sstatic.net/MVUSw.png

Despite various attempts, I have not been able to circumvent the Subscriber object and retrieve the actual response.

Answer №1

Make sure to retrieve an Observable from the service like this

fetchData():Observable<any> {
//Include code in service with MAP for returning the JSON object
   }

In your component's class, make a call to a function

getDataFromService(){
service.fetchData().subscribe((data)=>this.dataResult =data)
}

Then, utilize dataResult within your HTML code to exhibit the information.

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

Alternating the main access point from a separate module

I'm finding it difficult to understand why this should be so simple, but I just can't seem to solve this issue. Within my application, I have various root routes like login, events, and more. To manage the main menu functionality, I created a mo ...

Can you explain the reference to "ng2" in relation to Angular 2?

In countless blog posts discussing Angular 2, I often come across references to ng2. Can someone clarify what ng2 stands for? Is it the CLI for Angular 2? ...

What are the steps for designing personalized syncfusion grid-columns while still preserving the built-in search functionality of syncfusion?

Looking to transform the data coming from the backend, specifically mapping a user's status which is represented as a number to its corresponding string value. Considered using typescript for this mapping task, but it interferes with syncfusion' ...

Does anybody have information on the Namespace 'global.Express' not having the 'Multer' member exported?

While attempting to set up an endpoint to send a zip file, I keep encountering the following error: ERROR in ./apps/api/src/app/ingestion/ingestion.controller.ts:46:35 TS2694: Namespace 'global.Express' has no exported member 'Multer'. ...

Looking to merge two components into one single form using Angular?

I am currently developing an Angular application with a dynamic form feature. The data for the dynamic form is loaded through JSON, which is divided into two parts: part 1 and part 2. // JSON Data Part 1 jsonDataPart1: any = [ { "e ...

How can I retrieve the value of an array using ngForm in Angular 2?

One concrete example is a component I created that looks like this. @Component({ selector: 'home', template: ` <form (ngSubmit)="onSubmit(f)" #f="ngForm"> <input type="text" ngControl="people"> ...

The exclusion feature in TSLint does not seem to be functioning properly

It seems that the ts lint -e/--exclude feature is not functioning properly, or perhaps I am doing something incorrectly. I currently have tslint 4.5.1 installed. Whenever I attempt to use the CLI with tslint -e path_to_file, it gives me an error stating ...

Angular encountered an error when trying to access the property "fruits" of an undefined object

When working with Angular, I encountered an issue where I received the error message "cannot read property 'fruits' of undefined." Within my class definition, I have included the following: export class MyClass implements OnInit { fruits: any[] ...

Rendering a component in React based on multiple conditions

Checking sessionStorage and another state variable before rendering a component is essential for my application. I want to avoid showing the same message multiple times within the same session. This is how I have implemented it: const addSession = (noteId: ...

What is the best way to reset a setInterval ID in Angular?

In my Angular project, I am developing a simple timer functionality that consists of two buttons – one button to start the timer and another to stop it. The timer uses setInterval with a delay of 1000ms. However, when the stop button is pressed, the time ...

Pause and anticipate the subscription within the corresponding function

Is there a way to make an If-Else branch wait for all REST calls to finish, even if the Else side has no REST calls? Let's take a look at this scenario: createNewList(oldList: any[]) { const newList = []; oldList.forEach(element => { if (eleme ...

Determine if the current page is the root page in Ionic 2 - here's how!

Currently, I am trying to verify the name of the current page in Ionic 2. To achieve this, I utilized NavController in my app.component.ts file. However, an error stating No provider for NavController is being displayed. I would appreciate any suggestions ...

Converting an array of objects into a dictionary using TypeScript

I'm attempting to convert an array of objects into a dictionary using TypeScript. Below is the code I have written: let data = [ {id: 1, country: 'Germany', population: 83623528}, {id: 2, country: 'Austria', population: 897555 ...

Applause tally problem in Ionic3

For my university project, I am utilizing Ionic-3 and attempting to achieve a similar effect as shown in this example. Please take a look at my code on StackBlitz. I am encountering an issue where I want the count circle to move from the bottom to the top ...

The inclusion of HttpClient is causing issues with the functionality of my component

Currently, I am facing an issue with my Angular service called ConnexionService. The problem arises when I try to incorporate CSV files into this service using HttpClient. Strangely, the component associated with this service fails to display once HttpClie ...

Looking to substitute the <mark> element within a string with the text enclosed in the tag using JavaScript

In need of help with replacing tags inside a string using JavaScript. I want to remove the start and end tags, while keeping the content intact. For example, if my input string is: <div class="active"><mark class="active-search-position">The ...

Navigate to a different page using Angular with a simple click

How can I implement a redirect from clicking on the "Firms" word to another component page in Angular? I have tried using routerLink="/", [routerLink]="['/']". I have imported Routes in the app.module. I have also attempted this approach: import ...

Does an AsyncMethod().Result equivalent exist in typescript?

When working in C#, you have the ability to call the result of an asynchronous method synchronously by accessing the Result property. For example: var returnVal = AsyncMethod().Result; What is a similar approach in typescript? ...

What is the best way to fake the retrieval of '$location' using mock for angular.element(document).injector() in jasmine 3.6?

Currently, I am encountering an issue. I am unsure of how to mock the following method: private angularLocation = angular.element(document).injector().get('$location'); In my hybrid angular application, this method is crucial for navigating betw ...

Exploring the use of TypeScript and Webpack to read non-JavaScript files in Node.js

I'm working on a backend NodeJS setup written in TypeScript that is using webpack for compilation. However, I encountered an error when trying to read a text file even though I confirmed that the file source/test.txt is being copied to the build fold ...