Displaying products with the active status set to 0 when utilizing the select feature in Angular

I need help displaying only data where "active" is set to 0. The data is retrieved in JSON format as shown below:

{
    "StatusCode": 0,
    "StatusMessage": "OK",
    "StatusDescription": [
        {   "h_id": "1",
            "active": 0,
            "date_created": "2018-08-02T15:28:52.000Z",
            "serial_number": "4324fdfd",
            "client_id": null
        },
        {   "h_id": "2",
            "active": 0,
            "date_created": "2018-08-02T15:28:52.000Z",
            "serial_number": "3435fdf",
            "client_id": null
        },
        {   "h_id": "3",
            "active": 0,
            "date_created": "2018-08-02T15:28:52.000Z",
            "serial_number": "fgdge43",
            "client_id": null 
        },
        {   "h_id": "4",
            "active": 1,
            "date_created": "2018-08-02T15:28:52.000Z",
            "serial_number": "edf43",
            "client_id": 1
        },
        {
            "h_id": "5",
            "active": 1,
            "date_created": "2018-08-02T15:28:52.000Z",
            "serial_number": "3456677777",
            "client_id": 2
        },
        ....
        {
           "h_id": "10",
            "active": 1,
            "date_created": "2018-08-02T15:28:52.000Z",
            "serial_number": "JDLk32",
            "client_id": 200
        }
      ]
     }

Currently, I have the following HTML code to display all data in a dropdown:

<div class="input-field col s12">
  <select formControlName="h_id" id="h_id" materialize="material_select" [materializeSelectOptions]="hbp" >
    <option value="" disabled selected>Select Hb</option>
    <option *ngFor="let hb of hbp" [value]="hb.h_id">{{hb.serial_number}}</option>
  </select>
</div>

Although all values are correctly displayed in the dropdown, I want to filter and show only the data where active:0.

Could you please suggest ideas on how I can achieve this filtering to display only data with active = 0?

angulartypescriptmaterialize

Answer №1

Add a method to your component for obtaining specific values.

fetchValues() {
  return this.data && this.data.filter(item => item.active === true) || [];
}

<div *ngFor="let item of fetchedValues" [id]="item.id">{{item.name}}</div>

Answer №2

Use *ngIf with ng-container for conditional rendering

**<select>
   <ng-container *ngFor="let hb of hbp">
     <option *ngIf="hb.active == 0"  [ngValue]="hb.h_id" ></option>
   </ng-container>
</select>**

Answer №3

If you need to update your html code, consider using the following format:

<select id="h_id">
  <option value="" disabled selected>Choose something</option>
  <ng-container *ngFor="let item of itemList.Items">
    <option *ngIf="item.active === 1">{{item.name}}</option>
  </ng-container>
</select>

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

The kendo-grid-messages are utilized across all columns

I encountered an issue while working with the following code: <kendo-grid-column field="isActive" [title]="l('Status')" filter="boolean"> <kendo-grid-messages filterIsTrue="Yes" filterIsFalse=&qu ...

javascriptangularkendo-uikendo-grid

"Encountering issues with iterating over a Mongo cursor after upgrading to Angular2 rc5

I'm currently working on a meteor/angular2 application and recently upgraded to rc5. Unfortunately, I encountered an error while trying to display a list of messages based on a mongo cursor in my component. I've tried to simplify the code for bet ...

mongodbangularangular-meteorangular2-rc5

Aliases in Typescript are failing to work properly when used alongside VSCode Eslint within a monorepository

I've incorporated Typescript, Lerna, and monorepos into my current project setup. Here's the structure I'm working with: tsconfig.json packages/ project/ tsconfig.json ... ... The main tsconfig.json in the root directory looks lik ...

typescriptvisual-studio-codeeslintmonorepolerna

error TS2304: The term 'MediaRecorder' is not recognized

How can I add audio recording capability to my Angular application using media recorder? Unfortunately, I am encountering the following error: Error TS2304: 'MediaRecorder' cannot be found If anyone knows a solution for this issue, your help w ...

javascriptangulartypescriptmediaaudio-recording

Running the Express service and Angular 6 app concurrently

Currently, I am in the process of developing a CRUD application using Angular6 with MSSQL. I have managed to retrieve data from my local database and set up the necessary routes, but I am encountering difficulties when it comes to displaying the data on th ...

javascriptnode.jssql-serverangularexpress

Troubleshooting: The reason behind my struggles in locating elements through xpath

There is a specific element that I am trying to locate via XPath. It looks like this: <span ng-click="openOrderAddPopup()" class="active g-button-style g-text-button g-padding-5px g-margin-right-10px ng-binding"> <i class=&quo ...

angularseleniumxpath

Detecting Changes in Angular Only Works Once when Dealing with File Input Fields

Issue arises with the file input field as it only allows uploading one file at a time, which needs to be modified. Uploading a single file works fine. However, upon attempting to upload multiple files, it appears that the "change" handler method is not tr ...

javascriptangularfileinputonchange

What is the best way to create a T-shaped hitbox for an umbrella?

I've recently dived into learning Phaser 3.60, but I've hit a roadblock. I'm struggling to set up the hitbox for my raindrop and umbrella interaction. What I'd love to achieve is having raindrops fall from the top down and when they tou ...

typescriptphaser-frameworkphaserjs

Creating a JSON schema for MongoDB using a TypeScript interface: a step-by-step guide

In order to enhance the quality of our data stored in MongoDB database, we have decided to implement JSON Schema validation. Since we are using typescript in our project and have interfaces for all our collections, I am seeking an efficient method to achie ...

typescriptmongodbmongodb-schema

Issue arises when isomorphic-dompurify is used alongside dompurify in Next.js 13 causing compatibility problems

I am currently facing a compatibility problem involving isomorphic-dompurify and dompurify in my Next.js 13 project. It appears that both libraries are incompatible due to their dependencies on canvas, and I am struggling to find a suitable alternative. M ...

javascriptreactjstypescriptnext.jsdompurify

Managing onChange in a ReactJs project

Currently, my React tsx page features input boxes like the following: <textarea value={this.state.myData!.valueOne} onChange={(e) => this.handleValueOneChange(e)}/> <textarea value={this.state.myData!.valueTwo} onChange={(e) => thi ...

javascriptreactjstypescript

When you hover over nested HTML-lists in a webpage, make the tree's long text lines expand gracefully using a combination of HTML, CSS

In my Angular 4 application, I have a left div that displays a tree of items as recursive HTML lists. When there is a long text, it gets cut off by the border of the div and a scrollbar appears. I want to have the text expand beyond the border and show in ...

htmlcssangularbootstrap-4

Promise disregards the window being open

I'm facing an issue with redirecting users to Twitter using window.open in a specific function. It seems like the instruction is being ignored, even though it works perfectly on other pages. Any ideas on how to fix this? answerQuestion() { if ...

javascriptangulartypescriptionic-frameworkcapacitor

Troubleshooting: Bootstrap not functioning in Angular with Webpack due to vendor bundle issue

Bootstrap is included in my vendor.js bundle, as shown in the snapshot below, https://i.stack.imgur.com/q5k8c.png Upon inspecting the DOM, it's clear that bootstrap classes are being applied too, as seen in the snapshot below, https://i.stack.imgur. ...

angulartwitter-bootstrap-3webpack

Can you demonstrate how to showcase images stored in an object?

Is there a way to properly display an image from an object in React? I attempted to use the relative path, but it doesn't seem to be working as expected. Here is the output shown on the browser: ./images/avatars/image-maxblagun.png data.json " ...

reactjstypescriptobject

What is the best way to avoid curly braces in an Angular template?

If I need to show the following string, including the {{ }}, in an Angular 2+ template: Hello {{name}}, how are you?" Note: The entire string will be hardcoded, not from a variable. What is the optimal method to encode the curly braces so they are not ...

angular

Utilize existing *.resx translation files within a hybrid application combining AngularJS and Angular 5

Greetings! I currently have an AngularJS application that utilizes $translateProvider for internalization and WebResources.resx files: angular.module('app') .config(['$translateProvider', 'sysSettings', 'ngDialogProv ...

angularjsangularinternationalizationangular-i18nangular-hybrid

Enabling and disabling contenteditable functionality on a div element in Angular

Issue I am facing an issue while trying to bind a boolean to the contenteditable directive of a div. However, it seems that this binding is not working as expected. Error Message: The 'contenteditable' property is not recognized as a valid p ...

javascriptangular

Executes the function in the child component only if the specified condition evaluates to true

When a specific variable is true, I need to call a function in a child component. If the variable is false, nothing should happen. allowDeleteItem = false; <ChildComponent .... removeItemFn={ deleteFn } /> I attempted to use the boolean variable wi ...

reactjstypescript

What is the best way to interact with and modify the relationships of "many-to-many" fields in my database table?

As someone who is new to nestjs, I am working with two entities: @Entity({ name: "Books" }) @ObjectType() export class Book { @PrimaryGeneratedColumn() @Field() id: number; @Column() @Field() title: string; @ManyToMany(() => Auth ...

typescriptgraphqlnestjsapollotypeorm