unable to successfully complete parameter in angular 2

After receiving data from the API, I am using the subscribe method to execute lines of code. Below is the code snippet:

this.attRecService.getAgendaData(moment(this.viewDate).format('YYYY-MM')).subscribe(
        resp => {
            this.agendaData = resp;

            for (let item of resp) {
                if (item.schedule) {
                    for (let sched of item.schedule) {
                        this.events.push({
                            'start': new Date(moment(item.date).format('YYYY-MM-DD')),
                            'title': sched.title 
                        });
                    }
                }
            }
        },
        () => {
            console.log('display');
            this.displayClockDetail();
        }
    );

However, when attempting to log the word display, it appears that the code does not reach that part. What could be causing this issue?

Answer №1

This specific method

() => {
    console.log('output');
    this.showData();
}

is designed to execute only in case of an unsuccessful request (errors occurring) and when proper error handling is not implemented.

If you require a function to run upon completion of the observable, you can provide it as the third argument to the subscribe method.

.subscibe(() => { success }, () => { failure }, () => { finished })

Answer №2

Give this code a shot, then check the console to see what message is being displayed:

this.attRecService.getAgendaData(moment(this.viewDate).format('YYYY-MM'))
.subscribe((res: any) => {
  if(res) {
    for (let item of resp) {
      if (item.schedule) {
        for (let sched of item.schedule) {
          this.events.push({
            'start': new Date(moment(item.date).format('YYYY-MM-DD')),
            'title': sched.title 
          });
        }
      }
    }
    console.log('display');
  }
}, (error?: any) => {
  console.log('error');
});

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

Implementing unique behaviors based on data types in Typescript

I'm currently working on a React project where I need to showcase different types of articles, which I refer to as "Previews." These articles can be either text-based or contain images/videos. To handle this, I've defined two interfaces (TextPre ...

Steps to deactivating a styled button using React's styled-components:

I've created a very basic styled-components button as follows: import styled from 'styled-components'; const StyledButton = styled.button``; export const Button = () => { return <StyledButton>Default label</StyledButton> ...

Sharing Angular 2 modals across different components

My Angular 2 app consists of several components, including a modal component that I added from here. Now, I want to find a way to use the same modal across multiple components. Is it possible to have one modal open when different buttons are clicked in var ...

Whenever I try to load the page and access the p-tableHeaderCheckbox in Angular (primeng), the checkbox appears to be disabled and I am unable to

I attempted to use the disabled attribute on p-tableheadercheckbox in order to activate the checkbox. <p-tableHeaderCheckbox [disabled]="false"></p-tableHeaderCheckbox> <ng-template pTemplate="header"> <tr> ...

Troubleshooting Appium error management is ineffective

As a newcomer to appium, I might have made some mistakes. I'm encountering a problem with appium while using wdio and jasmine. it('wtf', (done) => { client.init().element('someName').getText() // ^ here ...

Item removed from the cache despite deletion error

Currently, I am utilizing Angular 8 along with @ngrx/data for handling my entities. An issue arises when a delete operation fails (resulting in a server response of 500), as the entity is being removed from the ngrx client-side cache even though it was not ...

Tips for preserving the status of radio buttons in a React application

I am currently utilizing a Map to keep track of the state of radio buttons, but I am facing challenges when it comes to correctly saving and updating it whenever a user makes a selection. The structure of my Map is as follows: { "Group A": [ ...

Understanding how to interpret error messages received from a server within an Angular component

Below is the code I am using for my backend: if (err) { res.status(400).send({ error: "invalid credentials", data: null, message: "Invalid Credentials" }); } else { res.status ...

ngx-bootstrap: Typeahead, receiving an unexpected error with Observable

Encountering an error whenever more than 3 characters are typed into the input box. Error message: TypeError: You provided an invalid object where a stream was expected. Acceptable inputs include Observable, Promise, Array, or Iterable. .html file : < ...

Tips on setting the first root element to automatically expand in a tree component

Currently, I am utilizing a tree component that includes partially loaded data. For reference, here is the link to the stackblitz example: StackBlitz. Is there a way for me to have the child element of the first root element automatically opened by defau ...

Struggling to store information in a MongoDB database within my MEAN Stack project

After successfully creating a collection for user LOGIN/LOGOUT and managing to store and retrieve data using Express app and mongoose, I encountered an issue when trying to create another collection. Despite successfully creating the collection, the data w ...

Combining Two Related API Requests using Angular Observables and RxJS

If I have two API calls that return JSON: First call (rows): { {"row": 1, detailId: "a"} {"row": 2, detailId: "b"} } Second call (rowDetails): { details: { row details } } The task at hand is to fetch rows first, then iterate through each row o ...

Comparing numbers in Angular using Typescript

Hello! I'm encountering an issue with comparing two variables: console.log(simulation.population == 40000000); //true console.log(simulation.initialInfectedNumber == 5); //true console.log(simulation.population < simulation.initialInfectedNumber); ...

Having trouble establishing a connection with mongoose and typescript

When attempting to establish a connection using mongoose, I consistently encounter the errors outlined below. However, if I use MongoClient instead, everything functions as expected. import connectMongo from '../../lib/connectMongo' console.log( ...

A guide on iterating through a JSON object fetched using Http in Angular 2/Typescript

I am attempting to extract specific data from my JSON file using http. The structure of the JSON is as follows: [{"name":"Name1","perc":33},{"name":"Name2","perc":22},{"name":"Name3","perc":41}] To loop through this retrieved object, I use the following ...

The type '{}' is lacking the 'submitAction' property, which is necessary according to its type requirements

I'm currently diving into the world of redux forms and typescript, but I've encountered an intriguing error that's been challenging for me to resolve. The specific error message reads as follows: Property 'submitAction' is missing ...

What is the best way to exceed the capacity of a function in TypeScript by incorporating optional

I've been working on converting some code from JavaScript to TypeScript, and I have a specific requirement for the return type of a function. The function should return void if a callback parameter is provided, otherwise it should return Promise<o ...

What is the best way to retrieve data from MySQL for the current month using JavaScript?

I need to retrieve only the records from the current month within a table. Here is the code snippet: let startDate = req.body.startDate let endDate = req.body.endDate let result = await caseRegistration.findByDate({ p ...

Next.js React Server Components Problem - "ReactServerComponentsIssue"

Currently grappling with an issue while implementing React Server Components in my Next.js project. The specific error message I'm facing is as follows: Failed to compile ./src\app\components\projects\slider.js ReactServerComponent ...