looping through response object angular

Question

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});
                  }
              })
    }

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"
    }
]

What does the response look like in angular i.e what does console.log(data) return? — Nicholas K
– Nicholas K, Commented Dec 6, 2019 at 16:52
i in this.test.push({id: i.Map_Data_ID, value: i.County, color: i.Color}) is a loop control variable. That means it will have values: 0, 1, 2.... It is not a Object. — Harinder Singh
– Harinder Singh, Commented Dec 6, 2019 at 17:00
when i try to access parts of the response like data.Color i get no intelisense suggestions. i need to access each value within the array. — ashley g
– ashley g, Commented Dec 6, 2019 at 17:09

Nicholas K · Accepted Answer · 2019-12-06 17:49:48Z

2

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));
  })
});

edited Dec 6, 2019 at 17:49

answered Dec 6, 2019 at 17:08

Nicholas K

15.4k8 gold badges35 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

ashley g Over a year ago

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

ashley g Over a year ago

The problem i think is that the collection has no name attached to it

Nicholas K Over a year ago

Okay.. so what is the output you are expecting?

ashley g Over a year ago

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

ashley g Over a year ago

i mean the data is somewhat irrelevant i am more interested in lopping through the contents and assigning the values to my array. i want to access the elements like data.color

|

Collectives™ on Stack Overflow

looping through response object angular

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related