What is the best way to understand and interpret a GET request?

In my Angular application, I am using a service to send GET requests and retrieve data from a MongoDB database. The service includes a method that searches for a custom object called an Estimate with specific properties:

Estimate.model.ts:

export class Estimate {
    constructor(
        public storyNumber: string,
        public assumptions?: string,
        public risks?: string,
        public estimateDate?: string ) { }
}

The service, ToolboxRepositoryService, has a method named getStoryEstimate():

export class ToolboxRepositoryService {
 constructor(private http: HttpClient) {
    this.baseUrl = "http://localhost:8080/"; 
  };

 getStoryEstimate(storyNumber: string) {
    return this.http.get<Estimate>(this.baseUrl + "spestoryestimate/story/" + storyNumber);
  }
}

Currently, there are 2 records in my database of Estimates with story numbers 9999 and 9998. Testing the GET requests through Postman returns the expected results. However, running the same request in the application yields different outcomes.

The relevant component methods are outlined below:

getStoryEstimate(storyNumber: string){
    console.log('Retrieving estimate...')
    this.toolboxRepository.getStoryEstimate(storyNumber).subscribe((estimate: Estimate) => {
      if(estimate.storyNumber){
        this.storyEstimate.assumptions = estimate.assumptions;
        this.storyEstimate.estimateDate = estimate.estimateDate;
        this.storyEstimate.risks = estimate.risks;
        this.storyEstimate.storyNumber = estimate.storyNumber;
      }
      else {
        console.log('Error: story number not found!')
      }
    })
  }

  findStoryEstimate(storyNumber: string){
    this.getStoryEstimate(storyNumber);
    console.log(this.storyEstimate)
  }

An issue arises when requesting an Estimate with story number 9999, leading to undefined properties in the returned object. Furthermore, the object seems to contain a JSON object with all the necessary attributes of the Estimate being queried.

How should I interpret this outcome? Is there a way to access the attributes of the JSON object?

Answer №1

When you make the call to

this.toolboxRepository.getStoreEstimate
, keep in mind that it is asynchronous. Therefore, if you are trying to access the data using console.log(this.storeEstimate) immediately after, the data may not have been returned yet. To see the order of execution more clearly, try adding a console log within the subscribe function.

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

I'm having trouble with the ts extension in Angular 2 when using http.get command

In my Angular Cli project, I have a file named lessons.ts in the root folder to store data. In the app folder, there is a file called lesson.service.ts used for retrieving data. The code snippet looks like this: import { Injectable } from '@angular/c ...

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 ...

Exploring the depths of friendship with React-Router V6 through recursive routes

I am currently facing an issue with my React-Router V6 implementation. The example I found for recursive routes in React-Router V5 is exactly what I need: However, after migrating to react-router-dom@6, the output is not as expected. import { Routes, ...

"Mastering the art of text animation: A beginner's guide

If you want to see a cool moving text animation, simply head over to this link: . The text will automatically type out and then clear just like the example below: https://i.sstatic.net/dAZW6.png Ever wondered how to create this kind of text animation? A ...

Flashing issues when utilizing the Jquery ui slider within an Angular 2 component

I recently incorporated a jquery-ui slider plugin into an angular 2 component and it's been working well overall, but I have encountered an annoying issue. Whenever the slider is used, there is a flickering effect on the screen. Interestingly, when I ...

An issue has occurred with error code TS2688: The type definition file for 'jquery' cannot be located. [Angular Application] --

I am currently working on developing an Angular web application with a specific theme that requires the inclusion of CSS and JS files. Majority of the JS files needed are jquery plugins, so I made sure to install them using the following commands: npm i j ...

The act of exporting an enum from a user-defined TypeScript path leads to the error message "Module not

I have set up a custom path as explained in this particular discussion. "baseUrl": ".", "paths": { "@library/*": [ "./src/myFolder/*" ], } Within this module, I am exporting an Enum. export enum EN ...

essential elements for mapping an array using typescript

Struggling to iterate through an array of objects, each with a unique id created by uuidv4(), resulting in a string type. TypeScript is giving errors (( Type 'String' is not assignable to type 'Key | null | undefined')) due to the &apos ...

Are there any methods to incorporate Facebook and Google login into an Ionic progressive web app (PWA)?

After successfully developing an app in Ionic 3 for Android and iOS, I encountered a problem when adding the browser platform. The Facebook and Google login features were not functioning as expected. Despite the assurance from Ionic documentation that the ...

Retrieve a type from a Union by matching a string property

Looking at the following structure: type Invitation = | { __typename?: 'ClientInvitation' email: string hash: string organizationName: string } | { __typename?: 'ExpertInvitation' email: strin ...

Highchart in ionic 2 not displaying

https://i.sstatic.net/q2CPR.png I inserted code for a highchart on my webpage, but it's not appearing I followed instructions from this video tutorial https://www.youtube.com/watch?v=FSg8n5_uaWs Can anyone help me troubleshoot this issue? This is ...

Removing selected row(s) from a table using Angular

I have a table that looks like this: <p-dataTable [value]="example"> <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column> <p-column field="a" header="column 1"></p-column> ...

The type 'xxxx' is not compatible with the parameter type 'JSXElementConstructor<never>'

I am currently enrolled in a TypeScript course on Udemy. If you're interested, you can check it out here. import { connect } from 'react-redux'; import { Todo, fetchTodos } from '../actions'; import { StoreState } from '../red ...

Learn the process of sending a delete request to a REST API with Angular

Is there a way to effectively send a delete request to a REST API using Angular? I am attempting to send a delete request with an ID of 1 My current approach is as follows: this.http.delete(environment.apiUrl+"id="+1).subscribe(data => { }); The va ...

The noUnusedLocal rule in the Typescript tsconfig is not being followed as expected

I am currently working on a project that utilizes typescript 3.6.3. Within my main directory, I have a tsconfig.json file with the setting noUnusedLocals: true: { "compilerOptions": { "noUnusedLocals": true, "noUnusedParameters": true, }, ...

Retrieve external JSON using Ionic

Currently, I am facing a challenge with Ionic 5 as I am trying to retrieve data from a remote server in JSON format through a REST service. To accomplish this task, I have created a service provider and utilized the httpClient get method to fetch the JSON ...

Developing Components in Angular 2.0 with the assistance of ui-router

I am currently in the process of transitioning an Angular 1.x application to utilize Angular 1.5 components, a new feature that will be relevant for Angular 2.0. As far as I can tell, I need to create a Root Component that will serve as the main bootstrap ...

An easy way to incorporate a side menu into your NativeScript + Angular 2 project

I am looking to learn how to incorporate a side menu in my existing NativeScript + Angular 2 project. Although I am aware of the side menu template, I initially began with a blank project and am now curious about how to integrate this functionality. ...

Tips for capturing the output of a dynamically rendered component in Angular 8

I need to capture the output from a rendered component using ViewChild. The content of ViewChild is displayed after an ngIf condition is met. Here is the template code: <div *ngIf="isModalVisible" class="modal" tabindex="-1" role="dialog"> <di ...

Exploring the capabilities of nested functions in Jasmine testing framework

I am trying to run a test in my project on a nested function within the code. The specific function I want to test has functions within other functions. Here is an example of the function: ngOnInit() { this.getMenu() } This is how I have set up ...