Angular8: Rest API returning JSON data want to bind UNIQUE data IN dropdownlist

Question

Problem : API returning JSON data in below format in my case all CategoryName is returning in Dropdown list.

I want to populate only Unique CategoryName but it's populating all three as per JSON data.(returning 3 time AAA it should be only 1 time )

Note : Looking complete working solution because I tried in many ways.

**

• JSON Data Format:

** [{"catID":200,"categoryName":"AAAA","sID":1,"subCategoryName":"XXX","active":1},{"catID":200,"categoryName":"AAAA","sID":1,"subCategoryName":"XXX","active":1},{"catID":200,"categoryName":"AAAA","sID":1,"subCategoryName":"XXX","active":1},{"catID":201,"categoryName":"BBB","sID":1,"subCategoryName":"YYYY","active":1},{"catID":201,"categoryName":"BBB","sID":1,"subCategoryName":"YYYY","active":1},{"catID":201,"categoryName":"BBB","sID":1,"subCategoryName":"YYYY","active":1},

REST API ->Controller: (URL calling in Frontend to popluatethe JSON data)

@GetMapping("/getAllCategory")
{
        public List<ccCategory> getAllCategory() {
        List<ccCategory> cCategory = categoryRepository.getCategoryName();
        return cCategory;
}

In Angular Side:

service.ts:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ICategory } from '../model/emporvendor/ICategory';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CategoryService {

  public URL = 'http://localhost:8080/getAllCategory';

  constructor(private http: HttpClient) { }

  getAllCategory(): Observable<ICategory[]> {
    console.log("Call Observable ICategory getAllCategory()");
    return this.http.get<ICategory[]>(this.URL);
  }

}

.component.ts :>

export class NewinquiryComponent implements OnInit {

constructor(private categoryService: CategoryService,private route: ActivatedRoute) { }

ngOnInit() {
    this.categoryService.getAllCategory()
        .subscribe(data => this.listAllCategory = data);

    myMethod();
  }

}


html:

<select  [(ngModel)]="enquirycategory" name="enquirycategory" class="form-control" required>
<option *ngFor="let enquirycategory of listAllCategory" [value]="enquirycategory.catID"> {{enquirycategory.categoryName}}
</option>
    </select>