Tips for modifying only one property after receiving an object from an HTTP GET request

Within my Angular application, I have defined an object structure like this:

export class Article {
  id: number;
  author: number;
  title: string;
  content: string;
  date: Moment;
  readingTime: number;
  draft: boolean;

  constructor(obj: Partial<Article>) {
    Object.assign(this, obj);
    this.date = moment(this.date);
  }
}

The issue arises with the property "author:number", which is meant to represent an object but only utilizes the ID when making HTTP calls to post articles. Upon receiving articles, all values within the object except for the ID are set to null. However, I need this ID to be associated specifically with the "author" property, instead of replacing it entirely.

I attempted to address this problem by trying to access the ID as follows: article.author.id (but encountered an error stating that "id" is not recognized as a property of the "number" type).

updateArticle(): void {
    this.register(this.articleService.getArticles()
      .pipe(tap(articles => {
        articles.map(article => {
          if(typeof article.author === 'object') {
            return {...article , author: article.author.id};
          }
        })
      }))
      .subscribe(articles => this.articles = articles));
  }

Answer №1

What do you think of the idea to update the author type to be like this?

author: number | { id: number };

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

Integration of Mocha with WebStorm

WebStorm offers a useful feature that adds a small arrow next to describe() and it() keywords when writing tests with Mocha, allowing for easy manual execution. However, there is a challenge: I require additional setup before each test, leading me to use ...

The required dependencies for @angular/[email protected] and @angular/[email protected] have not been fulfilled

Details: npm version: 3.10.10 and nodejs version: 6.11.1 I am in the process of setting up a .NET project with an angular web API but am encountering unmet dependencies: "unmet peer dependency @angular/[email protected] and @angular/[email prote ...

Firefox having trouble displaying styles correctly

I just finished creating a website for my band, but I am having issues with it displaying correctly in Firefox. While everything looks great in Chrome and Safari, it seems like the stylesheet isn't loading at all in Firefox, leaving the page looking u ...

The issue of a non-functional grid with scroll in a flexbox

I've encountered a problem while working with the grid layout using divs and flexbox. The header, which I want to be fixed, is overlapping with the first row and I'm struggling to get the scrolling behavior right. How can I address this issue? I ...

Preserve the authentic picture along with a blur mask that can be dragged and applied to it

Is there a way to preserve the original image while having a draggable blur mask over it? If you want to see an example of a draggable blur mask over an image, you can check out this link: https://codepen.io/netsi1964/pen/AXRabW $(function() { $("#ma ...

Exception Regarding Security in My Java Applet

Every time I try to use an applet, I encounter the java.lang.SecurityException: Permission denied: file:////Videos/public/scripts/screenshot.jar error. Below is the applet code that I am having trouble with: <applet code="Screenshot" archive="file:/// ...

When I trigger a function by clicking, I also set a timeout of 1 second. Is it possible to deactivate this timeout from within the function itself?

One button triggers a function with a timeout that repeats itself upon clicking. Here's the code snippet: function chooseNum() { let timeout = setTimeout(chooseNum, 1000); } To disable this repeating function, I attempted another function like so ...

Is there a way to access service data within an Angular interceptor?

I'm trying to include my authentication token in the request header within my auth.interceptor.ts. The value of the authentication token is stored in auth.service.ts. Below is the code for auth.interceptor.ts @Injectable() export class AuthIntercepto ...

Adjust positioning of navigation when hovered over

Need help creating a cool navigation effect like this. Live example: https://hookandbarrelrestaurant.com/ Here is my code: https://codepen.io/Dhaval182/pen/rQPMoW ...

The Context API's `useContext` hook appears to be malfunctioning, persistently

My situation is as follows: export const LocationContext = createContext(null); export const LocationProvider = LocationContext.Provider; export const useLocationContext = () => useContext(LocationContext); Using the Provider: export const Search = () ...

jQuery not targeting absolute positioned duplicates of the <div>'s

(Please find the code link at the bottom of this question) I have been working on a radial menu for a web project. However, I've encountered an issue that has me stuck for hours now. No matter what I try, I can't seem to get any response from th ...

Error message stating that there is no property 'collection' in Firestore when using Firebase v9 modular syntax in Firebase Firestore

Working on a React application that makes use of Firebase Firestore for handling database operations, I recently upgraded to Firebase version 9 and adopted the modular syntax for importing Firebase services. Nevertheless, when attempting to utilize the co ...

Issues with table formatting and malfunctioning functions

I created a basic tic-tac-toe game, but I'm having an issue with the table display. It appears squished when the game loads. Is there a way to prevent this and keep the table empty? Additionally, I am using NotePad++ and encountering problems running ...

Is it possible to showcase a notification as a popup or alert in Django?

I'm working on a form in Django that redirects to itself after submission. I want to show a message saying "You have entered (work_area)" as a popup or alert that users can close. However, my current setup only displays the message within the HTML aft ...

Box containing text going in both directions

I am trying to recreate a div structure that features a circle emoji at the top and two text elements at the bottom. However, my attempt is not producing the desired result. Here is my current code: .container { width: 70px; height: 400px; backgroun ...

Encountering a "Cannot POST" error in Angular upon redirection to a callback URL with a SAML response

Currently, I'm implementing SAML authentication in my angular application that will be hosted on AWS. The angular code is stored in a separate project from the webapi where Itfoxtec saml library is being utilized. The flow of communication between my ...

Noticeable increase in load time post integration of Facebook SDK

I am in the process of integrating Facebook social buttons into my website. Feel free to visit the website here. Though I am new to using the Facebook API, I noticed a significant increase in load time after adding the code to the footer. After conductin ...

Building a responsive CardMedia component with React Material UI

I am currently working on creating a gallery using React Material UI (utilizing Card, ...). I am facing some challenges in making the gallery responsive, especially with varying cover sizes: https://i.stack.imgur.com/2n6vf.png Here is the code snippet I ...

Navigating between routes in Angular can lead to multiple subscriptions being created

One issue I've encountered is receiving multiple subscriptions as I switch between routes in my Angular application. Within my parent component, I have defined the following routes: <li routerLink="route1" [routerLinkActive]="[&apos ...

Ways to toggle the visibility of an element based on the condition of two other elements

I'm facing a challenging UI use-case that I just can't crack. I have 2 non-nested divs that are causing me trouble (not nesting is crucial here as it would have made things much simpler). Here is the structure of the divs: <div class="a"> ...