Struggling to develop a intricate user interface with Angular using Typescript

I am trying to access the comments array for each user, but I need to create an interface similar to the one shown in the image.

https://i.sstatic.net/2hsIn.png

Although I am able to retrieve everything else, I am having trouble accessing this particular property. In my code, I have implemented the following:

  personSubject = new BehaviorSubject<any>(null);
  person$: Observable<any> = this.personSubject.asObservable();

getAllPosts(event?) {
    this.authService.getAllPosts().pipe(takeUntil(this.destroy$)).subscribe((res: any) => {
      console.log(res);
      this.allPosts = res.length;
      this.down = res.length;

      this.personSubject.next(res.data.post)

})
}

*ngFor="let i=index; let post of person$ | async | sortPipe"

How can I properly handle this interface?

Answer №1

user utilized a nested interface in this way

interface Response {
  data: User;
  status: string;
  length: number;
}

interface User {
  post: Post[];
}

interface Post {
  allComments: Comment[];
  author: Author;
  comments: Comment[];
}

interface Comment {
  commentBody: string;
  userData: {
    photo: string;
  }
}

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

What is the method for adjusting the time format?

Using the TIME data type, my data is currently displayed in the format hh:mm:ss (03:14:00). How can I change it to display in the format hh:mm (03:14)? The usual DATE type method does not seem to work: {{test.time | date: 'HH:mm'}} However, thi ...

Using TypeScript: Functions incorporating properties

Recently, I made an interesting discovery in JavaScript: function foo() { console.log("FOO"); } foo.bar = "FOOBAR"; foo(); // logs "FOO" console.log(foo.bar); // "FOOBAR" This got me thinking: How would I repres ...

Unit tests in Jasmine disable dispatchers when NGXS store.reset is invoked

I am facing a challenge with an unusual behavior during the unit testing of my NGXS store using Jasmine. Specifically, I am encountering issues when trying to test the DeleteAlerts action : @Action(DeleteAlerts) deleteAlerts(ctx: StateContext<Alert ...

Encountering a compile error after updating to Angular 5

I recently updated my project to the latest stable version of Angular 5.0.0 from 4.0.2, along with upgrading all other dependencies. (Initially, I was contemplating whether to upgrade to 4.4.6 first as dealing with making the Angular project function prope ...

How to Properly Initialize a Variable for Future Use in a Component?

After initializing my component, certain variables remain unassigned until a later point. I am seeking a way to utilize these variables beyond the initialization process, but I am unsure of how to do so. Below is my attempted code snippet, which throws a ...

Prevent redundant JSON objects from being added to an array in Angular2

Trying to prevent duplicate objects from being added to an Angular2 array. Imagine having an array called "Cars" and inserting a JSON object like this: { "brand": "Acura" "engine": "2.4L" + other details } New cars can be continuously added to the arr ...

When applying rotation and scaling to Three Js objects, the position of the mesh object will also change

Whenever I apply rotation or scaling using the control, why does the position also change? Watch the video below for reference. View Video I aim to achieve the result shown in the video with my current code. View Expected Result It worked perfectly in ...

How to Switch Map Language on the Fly in Angular 2

I am currently utilizing the AgmCoreModule to display a Google map. Is it feasible to dynamically change the map language when a different language is chosen? Currently, I can establish the default language upon loading the map using the following code sn ...

JavaScript has a feature called "functions" which allow the declaration of named blocks of

Currently, I am developing an Electron app in typescript. In my main.ts file, I have instantiated a custom CommunicationProvider class object. What I want is for this class to declare multiple methods (specified in an interface that it implements) but have ...

Revamp the way slides are showcased in swiper.js

I implemented a swiper js slider in my project and I am wondering if it is possible to change the default slide that is shown. For example, my slides are named slide1, slide2, slide3, etc. Currently, swiper js is displaying slide 1 by default, but I would ...

Creating a single submit handler for multiple forms in React

I am using a shared event handler for form submissions. handleSubmit = (e) => { e.preventDefault(); const errors = this.validate(); this.setState({ errors: errors || {} }); if (errors) return; this.doSubmit(); }; This event handle ...

Wrapper around union function in TypeScript with generics

I'm struggling to find a solution for typing a wrapper function. My goal is to enhance a form control's onChange callback by adding a console.log. Can someone please point out what I might be overlooking? interface TextInput { type: 'Tex ...

Decipher and comprehend the buttons listed in the language translation document

Looking for assistance with a pipe issue. I've created the following custom SafeHtmlPipe: import { DomSanitizer } from '@angular/platform-browser'; import { Pipe, PipeTransform, SecurityContext } from '@angular/core'; @Pipe({ nam ...

Reducing code repetition and creating custom error handling in Typescript back-end operations

I have implemented data validation and sanitization in my Branch class, but I am concerned about the repetition in my code. I feel like I may be using custom errors excessively by creating one for each situation. I would appreciate some suggestions on how ...

Tips for Simplifying Complex Switch Cases with Object Literals in TypeScript

I have a unique situation where I need to switch between two functions within an object literal. One function takes two numerical arguments, "A" and "B", while the other function only takes a single string argument, "C". My TypeScript code showcases my di ...

Node is experiencing difficulty incorporating the AWS DynamoDB package into the project

Important Note: Although AWS SAM and DynamoDB are mentioned here, this question is primarily related to the AWS JavaScript SDK, or potentially just a Node/NPM query at its core. It should be answerable by anyone experienced in developing Node/JavaScript ap ...

Is it possible to integrate the extension library of three.js (including OBJLoader, SceneUtils, etc.) with Angular 6?

Attempting to implement the below code, however, it is not functioning as expected. npm install --save three-obj-loader import * as ThreeObjLoader from 'three-obj-loader'; const OBJLoader = ThreeObjLoader(THREE); let loader = new OBJLoader(): ...

Is it correct to implement an interface with a constructor in TypeScript using this method?

I am completely new to TypeScript (and JavaScript for the most part). I recently came across the article discussing the differences between the static and instance sides of classes in the TypeScript handbook. It suggested separating the constructor into an ...

What is the method for retrieving the GraphQL field name within NestJS?

I am struggling to retrieve the name value of the field decorator from the input below. //myInput.ts @InputType() export class MyInput { @Field(() => Int, { name: "price" }) priceValue: number; } //myResolver.ts @Resolver() export class ...

React slick slider not functioning properly with custom arrows

"I have encountered an issue while trying to implement multiple sliders in my component with custom arrows positioned below each carousel. Despite following the documentation meticulously, the arrows do not respond when clicked. What could possibly be ...