CODEWITHSUNDEEP
c#arraysangulartypescriptloops
ashley g
ashley g

Reputation: 885

looping through response object angular

I am trying to iterate through an array which hold some values which i want to present to the user. I am having some difficulty extracting these values with angular. Im not sure what i am doing wrong. I am getting a response so i know the request is coming back however i cannot seem to access or loop through the parts of the array.

c# code:

 [EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]
public class MapController : ApiController
{
    Map[] map = new Map[]
    {
        new Map { Map_Data_ID = 122, County = "West Yorkshire", Color = "#d45faa"},
        new Map { Map_Data_ID = 122, County = "West Yorkshire", Color = "#d45faa"},
    };

    public IEnumerable<Map> GetAllProducts()
    {
        return map;
    }
}

Angular:

test: Array<{id: Number, value: string, color: string}> = [];

getMapData() {     
       this._interactiveMapService.getMapData()
          .subscribe(
              data => {
                  var arr = Object.keys(data).map(key => ({type: key, value: data[key]}));
                  for(var i; i < arr.length; i++) {
                    this.test.push({id: i.Map_Data_ID, value: i.County, color: i.Color});
                  }
              })
    }

enter image description here

This is what i want to attach the response data too

Example:

 this.dataSource = {
      chart: {
        caption: "Depot Locations",
        subcaption: "United Kingdom (Counties)",
        numbersuffix: "%",
        includevalueinlabels: "1",
        labelsepchar: ": ",
        entityFillHoverColor: "#FFF000",
        theme: "fint",
      },   
      // Source data as JSON --> id represents counties of england.
      data: [
        {
          id: "126",
          value: "Anglesey",       
          color: "#d45faa"
        },
        {
          id: "108",
          value: "Argyl & Bute",          
          color: "#d45faa"
        }
      ]
    }

example response from server:

[
    {
        "Map_Data_ID": 122,
        "County": "West Yorkshire",
        "Color": "#d45faa"
    },
    {
        "Map_Data_ID": 167,
        "County": "Wiltshire",
        "Color": "#d45faa"
    }
]

Upvotes: 2

Views: 4356

Answers (1)

Nicholas K
Nicholas K

Reputation: 15423

Assuming the response is of the following format:

data =  [ { "Map_Data_ID": 122, "County": "West Yorkshire", "Color": "#d45faa" }, { "Map_Data_ID": 167, "County": "Wiltshire", "Color": "#d45faa" } ];

you may do so using

.subscribe(data => {
  this.data.forEach(e => {
    this.test.push({
      id: e.Map_Data_ID,
      value: e.County,
      color: e.Color
    })
  })
});

Since we are in the world of typescript we can define a class to hold this data and make our lives more easier.

export class CountryDetails {
  constructor(
    private id: number,
    private value: string,
    private color: string
  ) {}
}

now using the newly created class:

.subscribe(data => {
  this.data.forEach(e => {
    this.test.push(new CountryDetails(e.Map_Data_ID, e.County, e.Color));
  })
});

Upvotes: 2

Related Questions