The error message "Property does not exist on type Object from subscribe" indicates that

When using forkJoin to make multiple http calls, I encountered the error

error TS2339: Property 'data' does not exist on type 'Object'

forkJoin(this.userservice.getUser(), this.userservice.getDashboard()).pipe(
    map(([userData, dashboardData]) => {

      // set the user
      this.user = userData;

      // set order count
      this.orderCount.new = dashboardData.data.new.length;
      console.log(dashboardData);

      this.dataLoaded = true;
    })
).subscribe();

I understand that this property comes from an external API which is not set in Angular/Ionic. However, when I try solutions like:

map(([userData, dashboardData<any>]) => {

or similar approaches, it does not work. How can I resolve this?

The getUser and getDashboard methods return HTTP objects:

    getUser() {
    return this.http.get(environment.baseUrl + '/auth/user').pipe(
        map(results => {
            console.log(results);
            return results;
        })
    );
}

Answer №1

To update your code, simply substitute the following line:

  this.orderCount.new = dashboardData.data.new.length;

with:

  this.orderCount.new = (dashboardData as any).data.new.length;

This action essentially converts the Object into typescript's any type.

An alternative approach would be to establish model classes for data and incorporate those model classes instead of any.

Answer №2

If you want to represent an array in code, here's one way to do it:

map(([userInformation, adminDashboard]: [UserInformation, AdminDashboard]) =>

Alternatively, you can simply declare your observables without any unnecessary complexity.

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

String Compression - Number of Elements

Suppose I define a specific type: type SomeType = 'a' | 'b' | 'c' Is there a TypeScript function available that can calculate the number of unique values a variable of type SomeType can hold? assertEq(countUniqueValues(SomeTy ...

Construct an outdated angular project from scratch

I'm facing an issue with an old Angular project that I'm trying to build. After pulling down the code, running npm install @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc9f9095bccdd2cbd2c8">[email p ...

Error shown in console when using Angular 7 FormControlName

My webpage has a reactive form, but I keep encountering an error message that states: ERROR Error: formControlName must be used with a parent formGroup directive. Make sure to include a formGroup directive and pass it an existing FormGroup instance (you ...

Problem with Angular's command line interface

I'm facing an unusual issue with angular/cli on my Windows machine. A year back, I installed Angular and created a new project successfully. I've been updating Angular whenever a new version is released (currently on v7). Today, when trying to cr ...

Angular 6 - ngModel Value Reveals Itself upon User Interaction

I am currently working on a component that lists items with a dropdown option to change values. However, I have noticed a small issue where the selected item in the dropdown appears empty upon component creation. The selection only becomes visible after cl ...

When using Jest + Enzyme to test a stateful class component, encountering problems with Material-UI's withStyles functionality is a common issue

I have a React + TypeScript application with server-side rendering (SSR). I am using Material-UI and following the SSR instructions provided here. Most of my components are stateful, and I test them using Jest + Enzyme. Below is an example of one such com ...

Resolving the issue of missing properties from type in a generic object - A step-by-step guide

Imagine a scenario where there is a library that exposes a `run` function as shown below: runner.ts export type Parameters = { [key: string]: string }; type runner = (args: Parameters) => void; export default function run(fn: runner, params: Parameter ...

When a function is passed as an argument in Typescript, it may return the window object instead of the constructor

I'm still getting the hang of typescript, and I've come across a situation where a function inside a Class constructor is calling another function, but when trying to access this within sayHelloAgain(), it returns the window object instead. With ...

Troubleshooting Nested Handlebars Problem

After creating a customized handlebar that checks for equality in this manner: Handlebars.registerHelper('ifEquals', (arg1, arg2, options) => { if (arg1 == arg2) { return options?.fn(this); } return options?.inverse(t ...

Unable to use global modules in NestJS without importing them

Currently, I am in the process of integrating a global module into my nest.js project I have written a service as shown below: export interface ConfigData { DB_NAME: string; } @Injectable() export class ConfigManager { private static _inst ...

Techniques for importing esm libraries without requiring the "type": "module" declaration in the package.json configuration file

I have successfully implemented a TypeScript Node project but now I am facing an issue while trying to integrate the VineJS library into the project. The problem arises because VineJS is exclusively an ESM (ECMAScript Module) package, and when adding it to ...

I'm looking to find the Angular version of "event.target.value" - can you help me out?

https://stackblitz.com/edit/angular-ivy-s2ujmr?file=src/app/pages/home/home.component.html I am currently working on getting the dropdown menu to function properly for filtering the flags displayed below it. My initial thought was to replicate the search ...

Encountering a crash when trying to create a form within a subscription in Angular 2 due to the formGroup being

I have data stored in my Firebase database that I want to use in a form using FormBuilder. Although it generally works fine, I often encounter errors saying formGroup expects a FormGroup instance. Please pass one in.. What confuses me is that the error oc ...

Error in TypeScript: Gulp + Browserify combination is not yielding the expected type

I keep encountering an error whenever I try to run this script. The error message I receive is: -> % gulp compile-js [22:18:57] Using gulpfile ~/wwwdata/projects/site/gulpfile.js [22:18:57] Starting 'compile-js'... events.js:141 th ...

Is there a way for me to generate an Nx command that can dynamically create a library with a specified name?

In the world of Nx and Angular, I have a repository named org housing all my projects. To create a special library within this setup, like one called auth, I typically use a command that looks like this: npx nx g @nx/angular:lib auth-data-access --directo ...

Angular Bootstrap Datepicker provides us with a date object, but I need it in the Date format

My desired date format is "Wed Aug 07 2019 16:42:07 GMT+0530 (India Standard Time)", but instead I am receiving { year: 1789, month: 7, day: 14 } from ngbDatepicker. Any assistance on resolving this issue would be greatly appreciated. ...

Angular - send multiple HTTP requests for the length of an array and combine the responses into one array

Exploring angular for the first time and dabbling with the trello API. I have an array containing some list IDs that I need to make HTTP GET calls for, equal to the length of the array. For instance, if there are two IDs in the array, then the HTTP call sh ...

Unable to delete event listeners from the browser's Document Object Model

Issue at hand involves two methods; one for initializing event listeners and the other for deleting them. Upon deletion, successful messages in the console confirm removal from the component's listener array. However, post-deletion, interactions with ...

Using optional chaining on the left side in JavaScript is a convenient feature

Can the optional chaining operator be used on the left side of an assignment (=) in JavaScript? const building = {} building?.floor?.apartment?.number = 3; // Is this functionality supported? ...

Building Angular CLI Applications with Separate SCSS Files for Browser Loading

Below is how I am importing the scss file: import { Component, OnInit, ViewEncapsulation } from '@angular/core'; @Component({ ...., styleUrls: ['../../scss/dashboard_admin.scss'], encapsulation: ViewEncapsulation.None }) e ...