Displaying exclusively distinct values in the selection box/dropdown menu

Question

Displaying exclusively distinct values in the selection box/dropdown menu

My goal is to retrieve data from the SQL server database and populate the corresponding fields on the frontend. While I am able to fetch the data, some fields in the response contain duplicate values in the dropdown menu. Here is an example of how my Component looks:

export class ReportingFilterComponent implements OnInit {
 ShipmentList: ShipmentByProject[];
 output= [];
 entityUrl = 'ShipmentDetail/GetByReportingProject?repPrj=000634';

 constructor(service: DataService) {
 this.ShipmentList = [];
 service.get<ShipmentByProject[]>(this.entityUrl).subscribe(x => {this.ShipmentList = x });
  }


 ngOnInit() {
  var flags= [];
  var l = Array.isArray(this.ShipmentList) ? this.ShipmentList.length : 0, i;
   for( i=0; i<l; i++) {
    if( flags[this.ShipmentList[i].customer_shipto_name]) continue;
    flags[this.ShipmentList[i].customer_shipto_name] = true;
    this.output.push(this.ShipmentList[i].customer_shipto_name);
  }}

For testing purposes, I utilized the output array in the HTML code:

 Output data!
<li *ngFor="let out of output">
     {{ out.customer_shipto_name }}
</li>

<div class="dx-fieldset">
<div class="dx-field">
    <div class="dx-field-label">ShipTo Account</div>
    <div class="dx-field-value">
        <dx-select-box [dataSource]="ShipmentList" displayExpr="customer_shipto_name"></dx-select-box>
    </div>
 </div>

Despite having data in ShipmentList, I do not see any results in the output. https://i.sstatic.net/w9KvS.png

javascript angular typescript angular7

Answer 1

Answer №1

If you want to display data from the ShipmentList when receiving information from your service or API, make sure to create an instance variable for the output. Here is an example code snippet that you might find helpful. Don't forget to troubleshoot your code if needed.

export class ReportingFilterComponent implements OnInit {
  ShipmentList: ShipmentByProject[];
  entityUrl = 'ShipmentDetail/GetByReportingProject?repPrj=000634';
  output = [];

  constructor(private service: DataService) {
  }

  ngOnInit() {
    const flags = [];
    this.service.get<ShipmentByProject[]>(this.entityUrl).subscribe(x => {
      if (x && x.length > 0) {

        this.ShipmentList = x;
        for (let i = 0; i < this.ShipmentList.length; i++) {
          if (flags[this.ShipmentList[i].customer_shipto_name]) continue;
          flags[this.ShipmentList[i].customer_shipto_name] = true;
          this.output.push(this.ShipmentList[i].customer_shipto_name);
        }
      }

    });
  }
}

Answer 2

If you want to display data from the ShipmentList when receiving information from your service or API, make sure to create an instance variable for the output. Here is an example code snippet that you might find helpful. Don't forget to troubleshoot your code if needed.

export class ReportingFilterComponent implements OnInit {
  ShipmentList: ShipmentByProject[];
  entityUrl = 'ShipmentDetail/GetByReportingProject?repPrj=000634';
  output = [];

  constructor(private service: DataService) {
  }

  ngOnInit() {
    const flags = [];
    this.service.get<ShipmentByProject[]>(this.entityUrl).subscribe(x => {
      if (x && x.length > 0) {

        this.ShipmentList = x;
        for (let i = 0; i < this.ShipmentList.length; i++) {
          if (flags[this.ShipmentList[i].customer_shipto_name]) continue;
          flags[this.ShipmentList[i].customer_shipto_name] = true;
          this.output.push(this.ShipmentList[i].customer_shipto_name);
        }
      }

    });
  }
}

Answer 3

Answer №2

If your

service.get<ShipmentByProject>[]>

call returns a promise, it seems like this.ShipmentList will be undefined until the promise is resolved. To avoid errors, you can either initialize the value as an empty array or check for its presence before trying to access its length.

You have a few options for initializing ShipmentList:

class YourClass {
    ShipmentList = [];

    constructor() {
        // ...
    }
}

Alternatively, you can initialize it in the constructor:

constructor() {
    this.ShipmentList = [];
    service.get<ShipmentByProject[]>(this.entityUrl).subscribe(x => 
{this.ShipmentList = x });
  }
}

Or, you can check for its existence before accessing its length:

var l = Array.isArray(this.ShipmentList) ? this.ShipmentList.length : 0;

Answer 4

If your

service.get<ShipmentByProject>[]>

call returns a promise, it seems like this.ShipmentList will be undefined until the promise is resolved. To avoid errors, you can either initialize the value as an empty array or check for its presence before trying to access its length.

You have a few options for initializing ShipmentList:

class YourClass {
    ShipmentList = [];

    constructor() {
        // ...
    }
}

Alternatively, you can initialize it in the constructor:

constructor() {
    this.ShipmentList = [];
    service.get<ShipmentByProject[]>(this.entityUrl).subscribe(x => 
{this.ShipmentList = x });
  }
}

Or, you can check for its existence before accessing its length:

var l = Array.isArray(this.ShipmentList) ? this.ShipmentList.length : 0;

Answer 5

Answer №3

Ensure you are working with data that has already been loaded. The code within the ngOnInit method should be placed in the subscribe block above.

As pointed out by @Ash, the output property needs to be a class property and not initialized inside the ngOnInit.

Remember: avoid using var, opt for const or let instead as they are scoped within the block where they are declared.

Additionally, use camelCase when writing in Typescript, meaning ShipmentList should be changed to shipmentList

Answer 6

Ensure you are working with data that has already been loaded. The code within the ngOnInit method should be placed in the subscribe block above.

As pointed out by @Ash, the output property needs to be a class property and not initialized inside the ngOnInit.

Remember: avoid using var, opt for const or let instead as they are scoped within the block where they are declared.

Additionally, use camelCase when writing in Typescript, meaning ShipmentList should be changed to shipmentList

Answer 7

Answer №4

The error you're encountering seems to be originating from your ngOnInit section. Have you checked if this.ShipmentList is defined?

In addition, in order to access output within your angular template, it must be a property that belongs to the component class. Make sure to declare public output = [] at the beginning of your class and reference that variable instead.

Answer 8

The error you're encountering seems to be originating from your ngOnInit section. Have you checked if this.ShipmentList is defined?

In addition, in order to access output within your angular template, it must be a property that belongs to the component class. Make sure to declare public output = [] at the beginning of your class and reference that variable instead.

Displaying exclusively distinct values in the selection box/dropdown menu

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Guide to iterating through an array within an object in Vue.js

Utilizing a dictionary within an Angular controller

Require modification of JSON values in React Promise code

Generate a custom map by utilizing JavaScript and HTML with data sourced from a database

Is there a way to showcase my information on flash cards using JavaScript?

Issue with angular 8 radio button not being selected

"Troubleshooting: Ajax error 'Uncaught ReferenceError: data is not defined' on the

Innovative ways to design a responsive carousel with Bootstrap

No code is appearing on the page, just a blank space

Tips for verifying the presence of a specific value within an array of union types

Exploring Typescript Logging with Bunyan and Logentries

The regular expression used for validating domains does not function properly in the Safari browser

Retrieving the current value of the selected option using JQuery

Send PHP data through AJAX and retrieve it on a different PHP page

Choose a variety of table rows based on the values of the data attributes that are

One of the three identical paths in Node.JS is experiencing issues

Is it possible to include multiple spyObjs within a beforeEach block?

Generate the Xpath for the mentioned href element to use with Selenium Webdriver

having difficulty deactivating matInput within angular form

Grab the URL from React Router