Convert an observable into an array so that it can be used to create a Google chart

I've been working with Angular CLI 6 and Angularfire2, and my code is functioning well to display data in the template using a typical ngFor loop and an asynchronous pipe. However, I also need to utilize the data for a Google graph, which requires data from the TypeScript side. How can I convert my observable into an array in the TypeScript as outlined below?

If necessary, I can provide a Plunker for demonstration.

Within my FireDatabase:

--ppss
  --pps1key
    --treatment: value1
    --DateA: DateA1
    --Date B: DateB1
  --pps2key
    --treatment: value2
    --DateA: DateA2
    --Date B: DateB2

I aim to display data in my //component.ts in the following format:

 this.data1 = [
 ['treatment', 'dateA', 'dateB'],
 [ 'Treatment.value1',  new DateA1(), new DateB1()],
 [ 'Treatment.value2',  new DateA2(), new DateB2()]
 ];

From my service, I send an observable like this:

getPPSByPatientid(Patientid: string)
{
return this.database.list('/ppss', ref => 
ref.orderByChild("Patientid").equalTo(Patientid)).valueChanges();
}

Despite my efforts, I am encountering multiple errors with the following implementation:

patientid: string;
ppssToDisplay;
data1: any[];

    ngOnInit() {
      this.route.params.forEach((urlParameters) => {
      this.patientid = urlParameters['id'];});
      this.ppssToDisplay = this.ppssService.getPPSByPatientid(this.patientid);

let interestingFields = [ 'treatment', 'dateA', 'dateB'];
this.ppssToDisplay.subscribe(obj => {
  this.data1 = [
    interestingFields,
    interestingFields.map(field => obj[field]),
  ];
console.log(this.data1);
});

Error Encountered:

core.js:1598 ERROR Error: Uncaught (in promise): Error: Not an array Error: Not an array

Answer №1

To retrieve data from the Observable, you will need to utilize the .subscribe method:

this.ppssToDisplay.subscribe(obj => {
  this.data1 = [
    interestingFields,
    interestingFields.map(field => obj[field]),
  ];
});

If the usage of data1 allows for it, you might consider using Angular's async pipe within the template instead of directly invoking .subscribe: https://angular.io/api/common/AsyncPipe

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

"Investigating the impact of import quantities on the total size of an Angular production bundle

I searched for an answer but couldn't find one to address my fundamental question. I am currently constructing an Angular App and encountered a situation where I wanted to switch out the angular material components with ionic web components. However, ...

Expanding the Mui Typescript breakpoints within a TypeScript environment

Encountering a typescript error when attempting to utilize custom names for breakpoint values: Type '{ mobile: number; tablet: number; desktop: number;}' is not compatible with type '{ xs: number; sm: number; md: number; lg: number; xl: numb ...

Having issues with my Angular 4 + MVC web application not functioning properly in Internet Explorer

After creating an application using Angular 4 and MVC, I noticed a problem specifically with Internet Explorer. The application runs smoothly on Chrome, Firefox, and other browsers except for IE. Does anyone have any suggestions on how to resolve this br ...

How can I access a component variable within the styles in Angular?

Is it possible to utilize a variable width in my Angular 5 component template? I would like to achieve something similar to this: <style> input:checked + .slider:before { transform: translateX({{width}}px); } </style> The &apo ...

Steering clear of Unfulfilled Promises in TypeScript. The Discrepancy between Void and .catch:

When it comes to handling promises in TypeScript, I'm used to the then/catch style like this: .findById(id) .then((result: something | undefined) => result ?? dosomething(result)) .catch((error: any) => console.log(error)) However, I have also ...

Learn how to set up a class using TypeScript decorators

Is there a way to automatically initialize a class when a specific decorator is present above the class? For example: @apiController export class usersControllers extends lib.baseClasses.apiControllerBase().apiController { @lib.decorators.routesRegist ...

Angular does not permit the use of the property proxyConfig

Click here to view the image I encountered an issue when attempting to include a proxy config file in angular.json, as it was stating that the property is not allowed. ...

No bugs appeared in Next.js

I am currently in the process of migrating a large create-react-app project to NextJS. To do this, I started a new Next project using create-next-app and am transferring all the files over manually. The main part of my page requires client-side rendering f ...

Having trouble retrieving data from Angular's InMemoryDbService

After completing the Angular 4 Heroes tutorial, I felt prepared to create my own project. However, when attempting to use an in-memory database to retrieve data and display it in a list, I encountered some difficulties. The list was not showing up as expec ...

Issues arising from the implementation of a multi-item carousel using Flickity in Angular

I am currently attempting to implement a multi-item carousel/content slider in Angular, but I am encountering an issue with the Flickity carousel. The items within the carousel are aligning vertically instead of horizontally, which is not the desired behav ...

What is the process of creating conditional content projection in Angular?

Looking to implement an optional content projection feature in Angular. Here's the desired structure as an example: <app-root> <app-header></app-header> </app-root> By default, a header is displayed here. <app-root&g ...

Testing the Window beforeunload event method in an Angular unit test: A guide

Currently, I am actively involved in a project using Angular 8. One of the features I implemented was to show a confirm prompt when a user tries to navigate away from the site. This functionality was added by integrating the following function into my com ...

The element is implicitly assigned the 'any' type due to the inability to use an expression of type to index the element

Check out my TS playground here // I have colours const colors = { Red: "Red", Blue: "Blue", Green: "Green" } type TColor = keyof typeof colors; // Some colours have moods associated with them const colorsToMood = { ...

Testing the automation processes of a React or Node project

I am currently working on a project developed using React, Node.js, and MongoDB. I am looking to create an automation test that will automatically fill in either the login or register form. If anyone has any ideas or suggestions, please share them with m ...

Angular's nested arrays can be transformed into a grid interface with ease

I am looking to generate a grid template from a nested array. The current method works well if the elements naturally have the same height, but issues arise when values are too long and some elements end up with different heights. <div id="containe ...

Modify the name of the document

I have a piece of code that retrieves a file from the clipboard and I need to change its name if it is named image.png. Below is the code snippet where I attempt to achieve this: @HostListener('paste', ['$event']) onPaste(e: ClipboardE ...

Creating a Protected Deployment Environment on AWS for Angular and Spring Boot Applications

Recently, I attempted to deploy a backend Spring Boot application and an Angular front end application on AWS. After successfully pushing my Docker image to ECS, I managed to run multiple services behind application load balancers. Specifically, I set up t ...

Using Angular's ng-zorro module, you can easily define objects as tags in

I'm using a nz-select component from that allows users to select multiple members. My goal is to display the username as the tag label, but have the id bound to the model. <nz-select formControlName="member" nzMode="tags" (nzOnSearch)="searchUser ...

Column spilling over with cards

Having a card with a form in it, I wanted to implement a y-scroll bar to control the visibility of the form on the page. However, it seems that the columns are extending beyond the boundaries of the card. .card { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2 ...

Combining and linking 3 RxJS Observables in TypeScript and Angular 4 without nesting to achieve dependencies in the result

I have 3 observables that need to be chained together, with the result from the first one used in the other 2. They must run sequentially and each one should wait for the previous one to complete before starting. Is there a way to chain them without nestin ...