I am facing a challenge while trying to iterate through an array containing values that need to be displayed to the user. Despite receiving a response with the data, I am having trouble accessing and looping through the elements of the array using Angular. I am unsure about what might be causing this issue.
Here is the C# code snippet:
[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;
}
}
And here's the Angular code snippet:
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});
}
})
}
https://i.sstatic.net/JLdM7.png
I aim to integrate the received response data into the following structure:
For 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"
}
]
}
An example of the response from the server:
[
{
"Map_Data_ID": 122,
"County": "West Yorkshire",
"Color": "#d45faa"
},
{
"Map_Data_ID": 167,
"County": "Wiltshire",
"Color": "#d45faa"
}
]