r/angular • u/dx_ninja_dx • 3d ago
Angular API implementation
I’m a student that is working with angular for the first time, I have an assignment that requires implementing an api to our project. My teacher has no information on how to unwrap the response using parse for httpResource. There also is no information about mapping with httpclient & observables.
The documentation that is recommended seems completely irrelevant to my the api I have because my api is returning as an array.
How can I get value from the documentation or where should I look to figure this out. I feel like I’ve been having this problem with everything because the documentation never seems relevant. Even with certain concepts, there is things that I know but I am struggling with knowing what or how I can write things to do the task I need completed.
Any assistance would be appreciated.
4
u/Xsiah 3d ago
What exactly do you want to know? Are you trying to validate the response from the API, trying to make it typesafe, just trying to get a value from this API, trying to transform it upon receiving it?
What have you tried and how is it coming up short of what you need?
2
u/dx_ninja_dx 3d ago
Well I am seeing in my log that I am fetching my data, when I click into the hyperlink the data I’m looking for is there. It’s just that my information is wrapped for example x = [{},{},{}]
Obviously with actual information that’s just a skeleton or template, but I’m supposed to unwrap it I believe back into json to display using parse. It just seems like there isn’t much information on parse in the documentation and my slides don’t have it either. So I’m just wondering how I’m supposed to figure this out cause I want to learn how to find these things myself, because my college really doesn’t teach us how to find stuff like this or how to use documentation. It seems like we’re just expected to know and understand documentation.
3
u/Xsiah 3d ago
I think you might be missing some core concepts - the documentation for what you need is there and correct, but especially for httpResource parse I don't think you're understanding what it's for. That one might be especially confusing for you because it does something beyond what you probably actually need. From the docs: "When fetching data, you may want to validate responses against a predefined schema" - do you understand what that means? Is this actually something that you're trying to do?
Your response is already a valid JSON response (I'm assuming you typed your example correctly and it's an array rather than a string that just resembles an array) - an array is valid JSON. That's not something that Angular documentation would cover because that's a fundamental concept that they expect you already understand, and it would be the same regardless of what framework you were using.
You're looking at the docs for a specific tool - like if you were looking at the documentation for a drill, you wouldn't expect it to teach you how to drill holes - it teaches you how the specific features of that tool work.
2
u/dx_ninja_dx 3d ago edited 3d ago
Okay I understand that is fair, there is no mention of validating I believe. I can’t remember if validating responses was mentioned in my lectures.
You are right, realistically thinking, it is valid JSON for should be. I’m not getting marks for this assignment anyways it’s past due, I just need to understand how to do it. I’ve been told by my teacher that the api, themealdb, doesn’t return JSON and that I’d need to parse it.
Also I appreciate the information, that makes a lot more sense, so basically if I am struggling with understanding that’s a core concept programming in general than angular’s documentation won’t be of any value.
I guess I’m gonna go review previous core concepts of programming and hope for the best
2
1
u/drunky1337 3d ago
Check out this resource https://roadmap.sh/frontend?r=frontend-beginner
That gives you a learning path including basics
2
u/karmatics29 3d ago
Since your API returns a plain array, the main thing is to type it as an array, for example httpResource<Item[]>(() => '/api/items'), and then read the result in the template with items.value(). The parse option is only needed if the raw JSON isn't already the shape you want, in which case it's just a function that takes the raw response and returns the transformed value, such as mapping each element to a smaller object. With HttpClient it's the same idea: http.get<Item[]>(url).pipe(map(items => items.map(...))), and you either subscribe or use toSignal. The docs often feel irrelevant because they use a single-object example, so I'd log the response first and write an interface that matches it. What does one element of your array look like, and do you need to transform it or just display it?
0
u/dx_ninja_dx 3d ago
I don’t think I need to transform it, I’m going to try what you said here, about writing it out once and logging it to see what I get and then from there trying to adjust might help get the content I need.
Do you know why the documentation just says parse: starWarsApi.parse (or something similar) is this supposed to be a url stored in a variable?
1
u/erkamyaman 3d ago
If you don't mind me asking which doc are you using? Anything private or angular.dev?
1
1
2
u/leosuncin 3d ago
And, what's your question? Of course, the documentation wouldn't tell you the specific of your assignment in the same way we can't help you out without the details.
What's the API? What are the endpoints? Which formats does the API returns?
The HttpClient by default parse a JSON response but it can't automatically determine which shape has it.
1
-11
u/AdministrativeHost15 3d ago
getData(
): Observable<any[]> {
let url =
location
.origin + '/api/data?';
const url1 = new URL(url);
if (
location
.hostname === 'localhost') {
url1.port = '3000';
}
url = url1.toString();
return this.httpClient.get<any[]>(url);
}
Note: Change 'any' to the type that the API returns.6
u/Xsiah 3d ago
Don't just give people homework answers without explaining what the code does
6
u/couldhaveebeen 3d ago
Funny thing is, it doesn't answer the question anyway
4
u/Responsible-Cold-627 3d ago
It's also dumb as hell manually adding the origin to the URL. Looks like he doesn't know how relative URLs work.
5
u/b3night3d 3d ago
If you want us to do your homework then you should post the whole assignment...