angulartypescriptangular7

Get the API response and store the data in to an array


I am trying to call an API from my Angular Application and get the data back use the data in to my front end. I get the response back but I am not sure how to get a specific field from the JSON and store them in to an array

 dataList;
 apiUrl = 'GetDatafromSys?prj=123;

 constructor(service: DataService) {
 service.get<any>(this.apiUrl).subscribe(x => {this.dataList = (JSON.stringify(x)); });
}

I get the dataList back as JSON like

 [
  {
    "Name": "Jack",
    "EmpNo":"123"
  },
  {
   "Name": "Joe",
    "EmpNo":"456"
  }
 ]

I am not sure how to get the Name from the JSOn and store in a array so I can use it as a data source for a dropdown

  <dx-select-box [dataSource]=""

Solution

  • You can create an interface for your employee:

    export interface Employee{
    Name:string;
    EmpNo:number;
    }
    

    Now, you can modify your constructor eliminating your "any" for your interface of employee, and also add this type to your datalist.

     dataList: Employee[];
     apiUrl = 'GetDatafromSys?prj=123';
    
     constructor(service: DataService) {
     service.get<Employee[]>(this.apiUrl).subscribe(x => {this.dataList = x }); // here you assign your results to your datalist array
    }
    

    And now, you can obtain the property of any element by accesing it's position. Or use a foreach function to obtain names o anything that you need. For example:

    public print(){
    this.dataList.forEach(element => {
      console.log(element.Name);
    });
    

    }

    Hope this gives you and idea of how to store your information.