Handle the information obtained from JSON API using Angular

I have been working on collecting data from an API in JSON format.

After implementing the code below, I was able to successfully gather the data inside Subscribe method.

However, when trying to manipulate this data outside of Subscribe within the .TS file itself, I faced some challenges.

I attempted using promises as well, but it seems like I did not implement them correctly, resulting in no positive outcome.

Do you have any suggestions on how I could effectively handle and process this data before displaying it on the screen?

getHour() {
this.hourService.getData()
  .subscribe(
    posts => this.posts = posts,
    error => this.errorMessage = <any>error,
   () => console.log(this.posts));     

  console.log(this.posts);
}

getData(): Observable<usersPerHour[]> {
   return this.http.get(this.uri)
        .map(this.extractData)
        .catch(this.handleError);
}

View Console Results

Answer №1

Congratulations on reaching your target by including the print command within the subscription logic.

As you are monitoring a specific subject in an asynchronous programming approach, the console.log statement right after the subscription gets executed before the observable emits any 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

Adjust the background color of the header as you scroll

Seeking assistance in adjusting the background color of my header upon scrolling. This is my current implementation: header.component.ts export class HeaderComponent { ngOnInit(): void { const header = document.querySelector('.header'); ...

When running the `ng build` command with the `--base-href` flag set to `serverip/dir`, all assets such as CSS

Let's consider the local host IP address 127.0.0.1 When the ng build command is run in a directory named "mainproj/subproject" The command used is: ng build --base-href 127.0.0.1/mainproj/subproject This specific build is generated in the mentioned ...

Angular 6 and Bootstrap4 datetime picker with no reliance on fontawesome

Seeking recommendations for an Angular 6 / Bootstrap 4 datetime picker that does not rely on fontawesome or any other custom fonts, and is compatible with IE 11. Any suggestions? ...

What could be causing the continuous "Objects are not valid as a React child" error with my array of fetched data?

App.tsx import { useEffect, useState } from "react"; import "./App.css"; import UserInput from "./components/userInput"; import { ResultRow } from "./components/ResultRow"; // type TCachedValues = { // [keys: stri ...

Optimizing the utilization of multiple ngIf statements in Angular 5

I am new to Angular development and I'm currently working with *ngIf statements in my components. While researching, I came across articles advising against using complex logic in *ngIf statements. For instance: <user-component *ngIf="role= ...

Using Angular2 moment to format a date in a specific way

Encountered an error while using the amTimeAgo pipe from angular2-moment. The error message is as follows: Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not ...

A guide on refreshing the dependencies list within Angular's node modules and package.json files

A close friend sent me the angular src folder, which I used to create a new Angular project. However, when I replaced my newly created src folder with my friend's and tried running the application using npm start, I encountered errors related to missi ...

Ways to resolve issues related to null type checking in TypeScript

I am encountering an issue with a property that can be null in my code. Even though I check for the value not being null and being an array before adding a new value to it, the type checker still considers the value as potentially null. Can anyone shed lig ...

Angular Typed Forms Cannot Assign Values to Incomplete Types

I have created a simple example to demonstrate the goal I am trying to achieve: In essence, there are two types defined as follows: type BaseType = FormGroup<{ user: FormControl<string>; }>; type SomeOtherType = FormGroup<{ user: FormC ...

Cease the inclusion of the definition file import in the output of TS

I am facing an issue with a third-party library that needs to be dynamically loaded with an authentication key. Since the API is complex, I require type definitions in my TypeScript code for better clarity. In my .tsconfig file, I have set "target": "esn ...

Ways to access the JSON data beyond the subscribe function

After obtaining JSON data from the backend, my goal is to store it in a variable for populating a table. Below is the code snippet I am working with: @Component({ selector: 'app-kontakte', templateUrl: './kontakte.component.html', ...

What measures can I take to address the TypeScript error indicating that my function is missing a return statement and the return type does not include 'undefined' in my code?

In this scenario, there is a straightforward function called make which utilizes the handle function to retry a specified number of times if it encounters an error. Once all retries have been exhausted, the make function should throw the error. const handl ...

Situations in which the OnPush ChangeDetectionStrategy may not be the best

After extensive research, I discovered an intriguing performance enhancement technique in Angular: setting ChangeDetectionStrategy to OnPush. This method can effectively reduce the number of modifications within an Angular App. However, are there specific ...

I encountered an issue with Angular where it is throwing an error stating that the property 'catch' does not exist on the type 'Observable<Object>'

I have been working on an angular application that interacts with a python flask API. During development, I encountered the need to display results passed from the backend. To achieve this, I created an angular service. Below is the code for the angular s ...

Require type parameter to be of enum type

I have a specific goal in mind: // first.ts export enum First { One, Two, Three } // second.ts export enum Second { One, Two, Three } // factory.ts // For those unfamiliar, Record represents an object with key value pairs type NotWorkingType ...

Displaying the input text directly is ineffective when the dropdownlist value changes due to the presence of another dropdownlist

How can I tackle the issue of dynamically populating dropdown lists with cascading categories and subcategories? I currently have two dropdown lists where the subcategory dropdown is filled based on the selected category. I also need to display an input fi ...

Angular Nx and NgRx: troubleshooting unresponsive applications

Hello, I am currently learning Angular NX with NgRx and I am working on implementing a basic state for my app. Within my workspace, I have an app named company-portal which has its own state. To create this state, I used the following command: ng gener ...

Obtaining client system details in an Angular application

Hey there! I'm looking to retrieve the client system information using Angular, could someone please guide me on how to do this? System Information Model Serial Number Operating System Details OS Type Architecture Host Name CPU Specifications ...

"Encountering an issue with Angular's HTTP client

My application has a component that is functioning perfectly, but I am encountering an error in the line this.stylistDetails = data;. Can anyone suggest a solution to fix this issue? import { Component, OnInit } from '@angular/core'; import ...

Tips for developing a universal wrapping function that maintains its original signature and has a comparable return type in TypeScript

I am encountering challenges in developing a universal function that enhances argument functions in a specific manner. Is it feasible to create a versatile factory function that alters a function in a way that allows it to either execute or not? const wra ...