What is the best way to prevent the execution of the else block after breaking out of a loop within an if statement in

Here's what I need help with: I have an array with the following values,

{"OPN":0,"INPR":8,"WAIT":2,"STP":1,"RED":13}

I need to show a modal window if all keys have a count of 0, except for WAIT. If the count of all keys is greater than 0, then I need to display a different modal window. I attempted the code below, but it's not working as expected because both modal windows are being shown.

 for (let index = 0; index <  this.status.length; index++) {
            if(this.status[index] != 'WAIT' && this.countOfStatus[this.status[index]] > 0){
              $("#modal1").modal("show");
              break;
            }else{
              dummyVar = true;
            }
          }
          if(dummyVar){
             $("#modal2").modal("show");
          }

Any assistance on this matter would be greatly appreciated.

Thank you in advance.

typescriptangular8

Answer №1

Angular is not the focus here. You seem to be utilizing JQuery instead, which may not be the best choice within an Angular environment. This question pertains to pure JavaScript/TypeScript.

The goal is to display a single modal, so the modal display code should not be within a loop.

My suggestion is to create simple functions that have specific purposes:

  1. A function that determines which modal to show
  2. A function that actually displays the modal

.

findIdOfModalToShow(): string {
  for (let index = 0; index <  this.status.length; index++) {
    if (this.status[index] != 'WAIT' && this.countOfStatus[this.status[index]] > 0) {
      return 'modal1';
    }
  }
  return 'modal2';
}

showAppropriateModal() {
  const idOfModalToShow = this.findIdOfModalToShow();
  $(`#${idOfModalToShow}`).modal('show');
}

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

Typing should be positioned on either side of the declaration

When I define the type MyType, it looks like this: export type MyType = { ID: string, Name?: string }; Now, I have the option to declare a variable named myVar using three slightly different syntaxes: By placing MyType next to the variable ...

javascriptnode.jstypescript

What is the reason for Object.keys not returning a keyof type in TypeScript?

Wondering why Object.keys(x) in TypeScript doesn't return the type Array<keyof typeof x>? It seems like a missed opportunity as Object.keys outputs that by default. Should I report this on their GitHub repo, or should I just submit a pull reques ...

typescript

How to bring in a specific module using its name in TypeScript

Can a module in typescript import itself by its own name? For example, let's consider a module called my-module with various tests. Is it possible to import it within the tests using import ... from "my-module" instead of using a local path like impo ...

node.jstypescript

Tips on changing the name of a property within an object using JavaScript

While this question may appear to be a duplicate, there is actually a distinction. I am attempting to provide a new key that does not contain any spaces. {order_id :"123" , order_name : "bags" , pkg_no : "00123#"} My goal is ...

javascripttypescript

Is it possible to get intellisense for Javascript in Visual Studio Code even without using typings?

Is it possible to have intellisense support in Visual Studio Code for a 3rd party library installed via npm, even if there is no typings file available? I have noticed this feature working in IntelliJ/Webstorm, so I believe it might be feasible. However, ...

typescriptvisual-studio-code

What is the best way to declare a collection of objects in TypeScript?

Need assistance with TypeScript - Can anyone help? I'm having trouble deciphering the error message in relation to the code snippet below. My goal is to create an array of objects, but it doesn't seem to be working as expected. interface FieldC ...

typescript

Embarking on a fresh XR experience

As a newcomer to TypeScript, I am exploring how to create a functionality similar to a "double-click" event for a hand-input controller in my Three.js application. Here is my approach: - I monitor a click event - I check the timing between the last click ...

javascripttypescriptthree.jswebxr

Guide to Setting Up "Remember Me" Login for Users in Angular

I am having trouble setting the 'Remember Me' option on my Login page. I tried using localstorage session but it seems like something is missing in the service file that's causing it not to respond properly. I attempted to follow a guide on ...

angulartypescript

Delete the text in MUI's TablePagination component that displays the number of rows per page and the total rows in the table

Currently, I am integrating MUI's tablePagination component into my React table with TypeScript. I am looking to remove/disable the circlemarked text displayed in the image (the picture is an example from MUI). https://i.stack.imgur.com/ib0t2.png Af ...

reactjstypescriptmaterial-ui

The properties required for type 'Subscription' are not present

I encountered an issue in my IDE while trying to run the following code. Within my component, I am making a call to a service in the ngOnInit method to fetch some data. This service, in turn, calls another service to gather additional information before f ...

angulartypescriptobservable

I am encountering an issue regarding the 'endpoint' property within my environment.ts file while working on an Angular 17 project

My goal is to incorporate the property endpoint from my environment.ts file into my service: export const environment = { production: false, endpoint: 'http://localhost:3000/api/cabin/' }; This snippet showcases my service: import {Injectabl ...

angulartypescriptenvironment-variables

Steps for displaying a new event on a fullCalendar

Utilizing fullCalendar to display a list of events in the following manner: this.appointments = [{ title: "Appointment 1", date: "2020-09-06", allDay: false }, { title: "Appointment 2", date: "2020 ...

angulartypescriptfullcalendar

Resolve the issue with automatically generating SCSS type definitions (style.d.ts) for Preact within a TypeScript webpack setup

Utilizing webpack with Preact 10.x (nearly identical to React) and TypeScript in the VSCode environment. Following an update from Node version 12 to version 14, there seems to be a problem where *.scss files no longer automatically generate their correspo ...

javascriptreactjstypescriptwebpackpreact

How can I set up Prettier to exclude a line following a specific pattern?

Is there a method to configure Prettier in Visual Studio Code to exclude lines following a specific pattern? Sometimes, I require a directive like /**@ts-ignore */ followed by a lengthy line. However, when Prettier formats the code, it introduces new line ...

typescriptvisual-studio-codeprettier

When using the delete method in Next.js, req.body is undefined

Strangely, I cannot figure out the reason why fetching data and inserting it into the body of my response results in an "undefined" message in the console. Interestingly, I have two nearly identical components - one employing a POST method with a populated ...

reactjstypescriptnext.jsprismanext-api

Importing modules that export other modules in Typescript

I am facing an issue with two modules and two classes. ModuleA, ModuleB, ClassA, and ClassB are defined as follows: export class ClassA { } export class ClassB { } The modules are structured like this: export * from './ClassA'; export module ...

typescript

"Exploring the relationship between Vue checkbox components: parent and

Currently, I am working on a checkbox group where the behavior is such that if the parent checkbox is checked, all the child checkboxes will also be checked. Similarly, if a child checkbox is checked, the parent checkbox should also get checked, and so on. ...

.nettypescriptvue.jscheckbox

The type 'undefined' cannot be assigned to the type 'string | Buffer | { key: string | Buffer; passphrase: string; } | GetPublicKeyOrSecret'

Verification Code for JWT This function is used to verify a jwt using typescript. public verify( token: string, secretOrPublicKey?: string | Buffer, options?: jwt.VerifyOptions ): Promise<object | string> { if (!secretOrPublicKey) { ...

javascriptnode.jstypescriptexpressjwt

Issues with getOptionLabel in Material UI

I have a constant with the following values : const Reference = [ { label: "RF-100", year: "Test" }, { label: "RF-200", year: "Test2" }, { label: "RF-300", year: "Test3" }, ]; and my Autoco ...

reactjstypescriptmaterial-ui

cssclassName={ validatorState === RIGHT ? 'valid' : 'invalid' }

Is there a way to dynamically add different classes based on validation outcomes in React? My current implementation looks like this: className={ validatorState === RIGHT ? 'ok' : 'no' } However, I also need to handle cases where the ...

javascriptreactjstypescript