items components in nativescript not populating the response from django api - django

Question

I have simple django api which provide a list of movies title with their ids.
I have created a movies service in type script which performs the get operation and get the list of movies title and id.
In native script I have two files, items.component.ts
import { Component, OnInit } from "#angular/core";
import { MovieService } from "../services/movie.service";
#Component({
selector: "ns-items",
moduleId: module.id,
templateUrl: "./items.component.html",
providers: [MovieService]
})
export class ItemsComponent implements OnInit {
items;
constructor(private movieService: MovieService) { }
ngOnInit(): void {
this.movieService.getMovies().subscribe(
movies => {
this.items = movies;
console.log(movies);
},
error => {
console.log('error', error);
}
);
}
}
and items.component.html
<ActionBar title="Movie Rater App" class="action-bar">
</ActionBar>
<StackLayout class="page">
<ListView [items]="items" class="list-group">
<ng-template let-item="item">
<Label [nsRouterLink]="['/item', item.id]" [text]="item.title"
class="list-group-item"></Label>
</ng-template>
</ListView>
</StackLayout>
I am getting blank screen on the app in the emulator - just the action bar title. No exception in logs
I validated API is running fine and even I can see the response in console (i.e. output of console.log(movies)).
Any help will be appreciated.
django API response:
{
"count": 5,
"next": null,
"previous": null,
"results": [
{
"id": 1,
"title": "Rocky (1976)",
"description": "A small-time boxer gets a supremely rare chance to fight a heavy-weight champion in a bout in which he strives to go the distance for his self-respect.",
"moviePoster": "http://127.0.0.1:8000/pic_folder/rocky-1976-poster2451370.jpg",
"avg_rating": 5,
"no_of_ratings": 1,
"maxRatings": 5
},
{
"id": 16,
"title": "Rocky II",
"description": "Rocky II",
"moviePoster": "http://127.0.0.1:8000/pic_folder/rocky2.jpg",
"avg_rating": 5,
"no_of_ratings": 1,
"maxRatings": 5
}
}

Answer 1

You must assign the result array to items so it suppose to be,
this.movieService.getMovies().subscribe(
movies => {
this.items = movies.results;
console.log(movies);
},
error => {
console.log('error', error);
}
);
Also you may not need the StackLayout wrapping the ListView, you could remove that.