http.get - different data structure

Melanie-Koeln — Thu, 25 Mar 2021 15:41:28 +0000

Hey,

I'm trying to download data from a server using http.get.

For testing I'm using the tour of heroes tutorial. I changed the url to another local source.
The data looks like this:
{
"current":1, "total":2,"rows":[
{"field1":1000,"field2":"test1"},
{"field1":1001,"field2":test2"}
}
Of course, the code cannot run like this. How can I tell angular to use the rows? Is there a option in the http.get? In the tutorial the command was:
getHeroes(): Observable {
return this.http.get(this.heroesUrl)
}

Another possibility could be to adjust the data later. Perhaps here:
getHeroes(): void {
this.heroService.getHeroes()
.subscribe(heroes => this.heroes = heroes );
}

Thank you very much for your help in advance :).

Melanie

edit:
Received following message in the browser (Entwicklungtools):
core.js:6162 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

The datatype may not be right?

Access api - CORS - failed

Melanie-Koeln — Sat, 20 Mar 2021 14:59:30 +0000

Hi :),
I hope, this is the right place for my question:
In my current project, I’m trying to get data from an api. It is my first angular project, so please excuse my inexperience.
The data is on a server on my pc: http://localhost:8080/api/v1/xy/list

When I try to access the data with my browers, there is no problem.
But when I implement the connection in my app.component.ts
this.rowData = this.http.get('http://localhost:8080/api/v1/xy/list'
it fails.

Checking the result, following notification occurred:
Access to XMLHttpRequest at 'http://localhost:8080/api/v1/xy/list' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
zone-evergreen.js:2863 GET http://localhost:8080/api/v1/xy/list net::ERR_FAILED

I tried to fix it with following adjustment in the C:\Users\Micro\my-app\proxy.conf.json
{
"/api": {
"target": "http://localhost:8080/api/v1/xy/list",
"secure": false,
"changeOrigin": true,
"pathRewrite": {
"^/api": ""
}
}
}
According to this page: https://levelup.gitconnected.com/fixing-cors-errors-with-angular-cli-proxy-e5e0ef143f85
Starting ng again as follows: ng serve --proxy-config .\proxy.conf.json succeed, but the error stays the same. Still no access to the api.

Have you any idea what I’m doing wrong?

DEV Community: Melanie-Koeln

http.get - different data structure

Access api - CORS - failed