When utilizing the GET method to retrieve information, I have encountered a problem. Here is the code snippet:
constructor(private http: HttpClient) { }
items: Item[];
stuff: any[];
ngOnInit() {
const url = ...;
this.http.get(url)
.subscribe(next => {
console.log(next);
console.log(next.length);
this.items = next;
this.stuff = next;
});
}
Upon inspecting the console, I can see that there are 6 elements present in the response. However, when attempting to display these elements using the ngFor directive, nothing appears on the screen or only a single line shows up.
<div ngFor="let item of items">
->{{item?.id}}
</div>
<div ngFor="let item of stuff">
->{{item?.id}}
</div>
I am aware that one workaround is to expose the data through a service as demonstrated here. Nevertheless, I am also interested in finding a quick solution to this issue and gaining knowledge on how to handle it properly since the same problem might arise during the service implementation.
I have attempted utilizing map and forEach on the next value, but I encountered an error stating that Object is not an array. The IDE suggested adding a variable array to the syntax like next.array.forEach, but that did not yield any results and instead showed errors visibly.
What steps should I take next? (Unsure about what terms to research at this point.)