Using Angular to display error messages based on conditions with ngIf and Else statement

Hey there! I have an array that I am looping through and displaying the id as a link.

errMsg: string
const group = [
    {
        "name": "TSPM Process Connector Validation",
        "values": [
            {
                "id": "10007017",
                "url": "http://www.aol.com",
                "component": "TSPM Process Connector Validation",
                "requestSentStatus": 1,
                "responseReceivedStatus": 1
            },
            {
                "id": "10007016",
                "url": "http://msn.com",
                "component": "TSPM Process Connector Validation",
                "requestSentStatus": 1,
                "responseReceivedStatus": 1
            }
        ]
    },
    {
        "name": "TSPM Application Mapping Validation",
        "values": [
            {
                "component": "TSPM Application Mapping Validation",
                "requestSentStatus": 1,
                "responseReceivedStatus": 0
            },
            {
                "component": "TSPM Application Mapping Validation",
                "requestSentStatus": 1,
                "responseReceivedStatus": 0
            }
        ]
    }
]

  getStatusMessage(group) {
    if (group) {
        for (const mappedObj of group.values) {
          if (mappedObj.requestSentStatus === null || mappedObj.requestSentStatus === undefined) {
            this.errMsg = 'Enqueued for pickup and processing.'
          } else if (mappedObj.requestSentStatus === 0 ){
            this.errMsg = 'Failure sending data to CM.';
          } else if (mappedObj.requestSentStatus === 1) {
            if (mappedObj.responseReceivedStatus === null || mappedObj.responseReceivedStatus === undefined) {
              this.errMsg = 'CR generation awaited from CM.'
            } else if (mappedObj.responseReceivedStatus === 0) {
              this.errMsg = 'CR generation failed at CM.'
            } else if (mappedObj.responseReceivedStatus === 1) {
              this.errMsg = '';
            }
            console.log('errorMessage', this.errMsg);
          }
        }
     }
  }

HTML

 <ol class="lmn-list-group lmn-list-group-initial">
     <ng-container *ngFor="let value of group.values">
             <li class="lmn-list-group-item" *ngIf="value.id; else crCreationFailTmp">
                  <a [href]="value.url" target="_blank" [mtTooltip]="value.id" placement="top">
                                      {{ value.id}}
                  </a>
             </li>
      <div class="lmn-pb-2 lmn-font-size-xs bfaText">{{ value.name }}</div>
    </ng-container>
 </ol>
 <ng-template #crCreationFailTmp>
       <li class="lmn-list-group-item lmn-pl-3 lmn-text-danger">{{errMsg}}</li>  
 </ng-template>

I'm showcasing the ID with the link of URL, so if the ID is not present, instead I want to display a message based on the conditions mentioned in the function getStatusMessage. Essentially, I am checking multiple conditions in order to show different error messages based on the requestSentStatus and responseReceivedStatus values. However, even though I am implementing this, I am only seeing empty error messages without any content. Can anyone help me figure out what I am doing wrong?

Answer №1

Based on the code excerpts you've shared, it seems like you're not correctly implementing the getStatusMessage() function.

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

Transform array of objects into a two-dimensional array

Is there a way to transform the following group of objects into a 2D array? var tags= [ {id: 0, name: "tag1", project: "p1", bu: "test"}, {id: 1, name: "tag2", project: "p1", bu: "test"}, {i ...

Navigating JSON data with unexpected fields in Typescript and React.js

Looking to parse a JSON string with random fields in Typescript, without prior knowledge of the field types. I want to convert the JSON string into an object with default field types, such as strings. The current parsing method is: let values = JSON.parse ...

Assign the returned auth2 value to an Angular variable

I've been searching for a solution to my issue without much success, even though it seems like it should be an easy fix. Currently, I am using AngularJS and Google auth2 for authentication to fetch the logged in user's information. My goal is to ...

Display or conceal columns based on their index

<div ng-controller="checkBoxController"> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="moda ...

Which codec strings are considered valid for the web codecs API?

I am searching for a definitive list of valid strings that can be passed as the `codec` parameter in `VideoEncoder.isConfigSupported({ codec, width, height })`, but I have been unable to find a clear answer so far: The TS declaration file states that it m ...

Exploring the contrast in importing CSS between the HTML header, JS file, and Vue Component

Exploring the world of Vue with webpack, I find myself curious about the various ways to import CSS. It appears that there are three methods for importing CSS: Adding style sheets directly to HTML headers: <link type="text/css" rel="stylesheet" ... &g ...

Creating an HTML Menu in PHP by Parsing JSON

Managing a website involves constant updates and improvements. Recently, I started using DataTables, but faced timeout issues with large HTML tables. To resolve this, I decided to switch to server-side processing using JSON. Despite being new to JSON, I&ap ...

Cookies are failing to be saved upon reloading the page

I found this snippet of code $(document).ready(function () { var d = new Date(); var newMinutes = d.getTimezoneOffset(); var storedMinutes = getCookieValue("tzom"); if (newMinutes != storedMinutes) { setCookie("tzom", newMinutes) ...

Unable to navigate to the next or previous month using Angular Material's click functionality

Snippet of Code: <mat-calendar *ngIf="dataAvailable" #openCalendar [dateClass]="getAttendance()" (selectedChange)="onSelect($event)" (monthSelected)="monthSelected($event)"> </mat-calendar> Is there a workaround for implementing custom events ...

"What is the best way to retrieve the id of the element that triggered a JavaScript onclick

I'm facing an issue with my GridView where I have information displayed in each row. When a user clicks on a row, more related information is supposed to be shown in a separate DIV. However, I am unable to target the specific row when trying to change ...

Input value not being displayed in one-way binding

I have a challenge in binding the input value (within a foreach loop) in the HTML section of my component to a function: <input [ngModel]="getStepParameterValue(parameter, testCaseStep)" required /> ... // Retrieving the previously saved v ...

The converging of interactive and fixed routes in next JS

After developing a NextJS application and implementing its routing system, I encountered an issue with dynamic routes. Specifically, I created a route to capture URLs in the format of {base_url}/{username}/{post-slug}. However, this route is also capturi ...

How can you convert all nodes of a nested JSON tree into class instances in Angular 2 using Typescript?

I have a Leaf class that I want to use to convert all nodes in a JSON response into instances of Leaf. The structure of the JSON response is as follows: JSON Response { "name":"animal", "state":false, "children":[ { "name" ...

The information that is visible in the console is failing to appear in the view

My issue revolves around retrieving data from Firestore. While the console displays the data correctly, my view ends up showing empty cards. Consider the following HTML code: <ion-grid> <ion-row> <ion-col size="12" > ...

Revamp HTML <font size=1-7> with the use of CSS or JavaScript

I've been developing a prototype application that incorporates a plugin utilizing the deprecated HTML feature. Can I set custom pixel sizes for each font size ranging from 1 to 7? Currently, I'm contemplating using CSS zoom/scale properties, bu ...

What are the steps to utilizing the Global extension in Angular?

While working on my Angular 12 application, I developed the following string extension: declare global { interface String { toNumber(): number | null; } } Object.defineProperty(String.prototype, "toNumber", { value: function(this: stri ...

methods for hiding dropdown menu when clicked in html using javascript

I have a web page with a dropdown menu as shown below: <li class="dropdown"> <a class="nav-link" href="#" id="shop_submenu" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Rent ...

Localizing in Angular 2 does not retrieve locale information

@robisim74 Hello, I've been working on integrating Angular2localization into my new Ionic 2 (rc0) application. My goal is to translate messages and format dates, numbers, percentages, and currency amounts. One issue I've encountered is that whe ...

Personalized Angular dropdown menu

Recently, I've started delving into angularJS and I'm eager to create dropdowns and tabs using both bootstrap and angular. Although there is a comprehensive angular bootstrap library available, I prefer not to use it in order to gain a deeper und ...

Utilizing React and TypeScript: Passing Arguments to MouseEventHandler Type Event Handlers

Can you help me understand how to properly define the event handler handleStatus as type MouseEventHandler, in order to pass an additional argument of type Todo to the function? interface TodoProps { todos: Array<Todos> handleStatus: Mous ...