Data is getting loaded on the UI after a lag
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I am working on code to get a list on UI but the list is getting loading very slowly. The data comes from .NET Core2 API. What can be the better way of writing this code to avoid delays in list loading?
service.ts
--------------------
public getMyList(): Observable<IMyList> {
const headers = new HttpHeaders({
'Accept': 'application/json',
'Content-Type': 'application/json'
});
return this.http.get(this.url + '/list', { headers }).pipe(
map((result: IMyList) => {
if (result && Object.keys(result).length > 0) {
return result;
} else {
return ;
}
})
);
}
component.ts
--------------------
public myList: IMyList = ;
public getMyList(): void {
this.service.getMyList().subscribe(
(result: IMyList) => { this.myList = result; }
);
}
component.html
----------------------------------------
<tr class="tableRow" *ngFor="let list of myList = index">
<td class="orgCell">{{list.col1}}</td>
<td>{{list.col2}}</td>
<td>
<label [ngClass]="{'cellStatusInUse':list.col5,'cellStatusNotInUse' : !list.col5}"></label>
{{code.col5 === true ? 'In use' : 'Not used'}}
</td>
</tr>

add a comment |
I am working on code to get a list on UI but the list is getting loading very slowly. The data comes from .NET Core2 API. What can be the better way of writing this code to avoid delays in list loading?
service.ts
--------------------
public getMyList(): Observable<IMyList> {
const headers = new HttpHeaders({
'Accept': 'application/json',
'Content-Type': 'application/json'
});
return this.http.get(this.url + '/list', { headers }).pipe(
map((result: IMyList) => {
if (result && Object.keys(result).length > 0) {
return result;
} else {
return ;
}
})
);
}
component.ts
--------------------
public myList: IMyList = ;
public getMyList(): void {
this.service.getMyList().subscribe(
(result: IMyList) => { this.myList = result; }
);
}
component.html
----------------------------------------
<tr class="tableRow" *ngFor="let list of myList = index">
<td class="orgCell">{{list.col1}}</td>
<td>{{list.col2}}</td>
<td>
<label [ngClass]="{'cellStatusInUse':list.col5,'cellStatusNotInUse' : !list.col5}"></label>
{{code.col5 === true ? 'In use' : 'Not used'}}
</td>
</tr>

add a comment |
I am working on code to get a list on UI but the list is getting loading very slowly. The data comes from .NET Core2 API. What can be the better way of writing this code to avoid delays in list loading?
service.ts
--------------------
public getMyList(): Observable<IMyList> {
const headers = new HttpHeaders({
'Accept': 'application/json',
'Content-Type': 'application/json'
});
return this.http.get(this.url + '/list', { headers }).pipe(
map((result: IMyList) => {
if (result && Object.keys(result).length > 0) {
return result;
} else {
return ;
}
})
);
}
component.ts
--------------------
public myList: IMyList = ;
public getMyList(): void {
this.service.getMyList().subscribe(
(result: IMyList) => { this.myList = result; }
);
}
component.html
----------------------------------------
<tr class="tableRow" *ngFor="let list of myList = index">
<td class="orgCell">{{list.col1}}</td>
<td>{{list.col2}}</td>
<td>
<label [ngClass]="{'cellStatusInUse':list.col5,'cellStatusNotInUse' : !list.col5}"></label>
{{code.col5 === true ? 'In use' : 'Not used'}}
</td>
</tr>

I am working on code to get a list on UI but the list is getting loading very slowly. The data comes from .NET Core2 API. What can be the better way of writing this code to avoid delays in list loading?
service.ts
--------------------
public getMyList(): Observable<IMyList> {
const headers = new HttpHeaders({
'Accept': 'application/json',
'Content-Type': 'application/json'
});
return this.http.get(this.url + '/list', { headers }).pipe(
map((result: IMyList) => {
if (result && Object.keys(result).length > 0) {
return result;
} else {
return ;
}
})
);
}
component.ts
--------------------
public myList: IMyList = ;
public getMyList(): void {
this.service.getMyList().subscribe(
(result: IMyList) => { this.myList = result; }
);
}
component.html
----------------------------------------
<tr class="tableRow" *ngFor="let list of myList = index">
<td class="orgCell">{{list.col1}}</td>
<td>{{list.col2}}</td>
<td>
<label [ngClass]="{'cellStatusInUse':list.col5,'cellStatusNotInUse' : !list.col5}"></label>
{{code.col5 === true ? 'In use' : 'Not used'}}
</td>
</tr>


asked Jan 3 at 10:00
rakhorakho
11
11
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
map((result: IMyList) => {
if (result && Object.keys(result).length > 0) {
return result;
} else {
return ;
}
})
This is wrong map operator usage. Map function passes each source value through a transformation function to get corresponding output values.
Read more here
I think your code should look like
service.ts
--------------------
public getMyList() {
const headers = new HttpHeaders({
'Accept': 'application/json',
'Content-Type': 'application/json'
});
return this.http.get(this.url + '/list', { headers });
}
component.ts
--------------------
public myList: Observable<IMyList> = of();
public getMyList(): void {
this.myList = this.service.getMyList().pipe(
map(item => { return item; })
);
}
component.html
----------------------------------------
<tr class="tableRow" *ngFor="let list of myList | async; let i = index;">
<td class="orgCell">{{list.col1}}</td>
<td>{{list.col2}}</td>
<td>
<label [ngClass]="{'cellStatusInUse':list.col5,'cellStatusNotInUse' : !list.col5}"></label>
{{code.col5 === true ? 'In use' : 'Not used'}}
</td>
</tr>
Also, you should receive an empty array from the server instead of null or undefined
On removing map operator from service.ts, it gives the following error:Type 'Observable<Object>' is not assignable to type 'Observable<IMyList>'. Type 'Object' is not assignable to type 'IMyList'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Property 'includes' is missing in type 'Object'.
– rakho
Jan 3 at 11:13
Sorry, I made some mistakes. I have updated the code
– NechiK
Jan 3 at 11:24
Sorry but it still gives an error Type 'Observable<any>' is not assignable to type 'IMyList' at public myList: IMyList = of() and at this.myList = this.service.getMyList().pipe( map(item => { return item; }) );
– rakho
Jan 3 at 11:42
ohh .... sure. You need to set typeObservable<IMyList>
– NechiK
Jan 3 at 11:45
The code now works fine but there is no improvement in performance. Still taking time.
– rakho
Jan 3 at 12:17
|
show 1 more comment
I think the code is simple, it should not cause any problem. The problem is your backend and how to present your code.
Can you check the code on Web API you mentioned above? If the load time is too long, can you do any thing to improve the API performance.
If there are too many data. For example 10.000 rows. You should do the pagination on Web API. And on Front End you can add infinity scrolling feature. It will boost the load time a lot.
The Web API code has been tested(not by me though as I don't have much knowledge about ASP.NET Core) and it works fine. Some problem with the UI which I am unable to find. There are only 3 records and it takes around 2 seconds to load it. For first 2 secs, it shows "no record found" which should be the message if there are no records. And then it shows the list.
– rakho
Jan 3 at 10:21
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54019971%2fdata-is-getting-loaded-on-the-ui-after-a-lag%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
map((result: IMyList) => {
if (result && Object.keys(result).length > 0) {
return result;
} else {
return ;
}
})
This is wrong map operator usage. Map function passes each source value through a transformation function to get corresponding output values.
Read more here
I think your code should look like
service.ts
--------------------
public getMyList() {
const headers = new HttpHeaders({
'Accept': 'application/json',
'Content-Type': 'application/json'
});
return this.http.get(this.url + '/list', { headers });
}
component.ts
--------------------
public myList: Observable<IMyList> = of();
public getMyList(): void {
this.myList = this.service.getMyList().pipe(
map(item => { return item; })
);
}
component.html
----------------------------------------
<tr class="tableRow" *ngFor="let list of myList | async; let i = index;">
<td class="orgCell">{{list.col1}}</td>
<td>{{list.col2}}</td>
<td>
<label [ngClass]="{'cellStatusInUse':list.col5,'cellStatusNotInUse' : !list.col5}"></label>
{{code.col5 === true ? 'In use' : 'Not used'}}
</td>
</tr>
Also, you should receive an empty array from the server instead of null or undefined
On removing map operator from service.ts, it gives the following error:Type 'Observable<Object>' is not assignable to type 'Observable<IMyList>'. Type 'Object' is not assignable to type 'IMyList'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Property 'includes' is missing in type 'Object'.
– rakho
Jan 3 at 11:13
Sorry, I made some mistakes. I have updated the code
– NechiK
Jan 3 at 11:24
Sorry but it still gives an error Type 'Observable<any>' is not assignable to type 'IMyList' at public myList: IMyList = of() and at this.myList = this.service.getMyList().pipe( map(item => { return item; }) );
– rakho
Jan 3 at 11:42
ohh .... sure. You need to set typeObservable<IMyList>
– NechiK
Jan 3 at 11:45
The code now works fine but there is no improvement in performance. Still taking time.
– rakho
Jan 3 at 12:17
|
show 1 more comment
map((result: IMyList) => {
if (result && Object.keys(result).length > 0) {
return result;
} else {
return ;
}
})
This is wrong map operator usage. Map function passes each source value through a transformation function to get corresponding output values.
Read more here
I think your code should look like
service.ts
--------------------
public getMyList() {
const headers = new HttpHeaders({
'Accept': 'application/json',
'Content-Type': 'application/json'
});
return this.http.get(this.url + '/list', { headers });
}
component.ts
--------------------
public myList: Observable<IMyList> = of();
public getMyList(): void {
this.myList = this.service.getMyList().pipe(
map(item => { return item; })
);
}
component.html
----------------------------------------
<tr class="tableRow" *ngFor="let list of myList | async; let i = index;">
<td class="orgCell">{{list.col1}}</td>
<td>{{list.col2}}</td>
<td>
<label [ngClass]="{'cellStatusInUse':list.col5,'cellStatusNotInUse' : !list.col5}"></label>
{{code.col5 === true ? 'In use' : 'Not used'}}
</td>
</tr>
Also, you should receive an empty array from the server instead of null or undefined
On removing map operator from service.ts, it gives the following error:Type 'Observable<Object>' is not assignable to type 'Observable<IMyList>'. Type 'Object' is not assignable to type 'IMyList'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Property 'includes' is missing in type 'Object'.
– rakho
Jan 3 at 11:13
Sorry, I made some mistakes. I have updated the code
– NechiK
Jan 3 at 11:24
Sorry but it still gives an error Type 'Observable<any>' is not assignable to type 'IMyList' at public myList: IMyList = of() and at this.myList = this.service.getMyList().pipe( map(item => { return item; }) );
– rakho
Jan 3 at 11:42
ohh .... sure. You need to set typeObservable<IMyList>
– NechiK
Jan 3 at 11:45
The code now works fine but there is no improvement in performance. Still taking time.
– rakho
Jan 3 at 12:17
|
show 1 more comment
map((result: IMyList) => {
if (result && Object.keys(result).length > 0) {
return result;
} else {
return ;
}
})
This is wrong map operator usage. Map function passes each source value through a transformation function to get corresponding output values.
Read more here
I think your code should look like
service.ts
--------------------
public getMyList() {
const headers = new HttpHeaders({
'Accept': 'application/json',
'Content-Type': 'application/json'
});
return this.http.get(this.url + '/list', { headers });
}
component.ts
--------------------
public myList: Observable<IMyList> = of();
public getMyList(): void {
this.myList = this.service.getMyList().pipe(
map(item => { return item; })
);
}
component.html
----------------------------------------
<tr class="tableRow" *ngFor="let list of myList | async; let i = index;">
<td class="orgCell">{{list.col1}}</td>
<td>{{list.col2}}</td>
<td>
<label [ngClass]="{'cellStatusInUse':list.col5,'cellStatusNotInUse' : !list.col5}"></label>
{{code.col5 === true ? 'In use' : 'Not used'}}
</td>
</tr>
Also, you should receive an empty array from the server instead of null or undefined
map((result: IMyList) => {
if (result && Object.keys(result).length > 0) {
return result;
} else {
return ;
}
})
This is wrong map operator usage. Map function passes each source value through a transformation function to get corresponding output values.
Read more here
I think your code should look like
service.ts
--------------------
public getMyList() {
const headers = new HttpHeaders({
'Accept': 'application/json',
'Content-Type': 'application/json'
});
return this.http.get(this.url + '/list', { headers });
}
component.ts
--------------------
public myList: Observable<IMyList> = of();
public getMyList(): void {
this.myList = this.service.getMyList().pipe(
map(item => { return item; })
);
}
component.html
----------------------------------------
<tr class="tableRow" *ngFor="let list of myList | async; let i = index;">
<td class="orgCell">{{list.col1}}</td>
<td>{{list.col2}}</td>
<td>
<label [ngClass]="{'cellStatusInUse':list.col5,'cellStatusNotInUse' : !list.col5}"></label>
{{code.col5 === true ? 'In use' : 'Not used'}}
</td>
</tr>
Also, you should receive an empty array from the server instead of null or undefined
edited Jan 3 at 11:46
answered Jan 3 at 10:55


NechiKNechiK
146111
146111
On removing map operator from service.ts, it gives the following error:Type 'Observable<Object>' is not assignable to type 'Observable<IMyList>'. Type 'Object' is not assignable to type 'IMyList'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Property 'includes' is missing in type 'Object'.
– rakho
Jan 3 at 11:13
Sorry, I made some mistakes. I have updated the code
– NechiK
Jan 3 at 11:24
Sorry but it still gives an error Type 'Observable<any>' is not assignable to type 'IMyList' at public myList: IMyList = of() and at this.myList = this.service.getMyList().pipe( map(item => { return item; }) );
– rakho
Jan 3 at 11:42
ohh .... sure. You need to set typeObservable<IMyList>
– NechiK
Jan 3 at 11:45
The code now works fine but there is no improvement in performance. Still taking time.
– rakho
Jan 3 at 12:17
|
show 1 more comment
On removing map operator from service.ts, it gives the following error:Type 'Observable<Object>' is not assignable to type 'Observable<IMyList>'. Type 'Object' is not assignable to type 'IMyList'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Property 'includes' is missing in type 'Object'.
– rakho
Jan 3 at 11:13
Sorry, I made some mistakes. I have updated the code
– NechiK
Jan 3 at 11:24
Sorry but it still gives an error Type 'Observable<any>' is not assignable to type 'IMyList' at public myList: IMyList = of() and at this.myList = this.service.getMyList().pipe( map(item => { return item; }) );
– rakho
Jan 3 at 11:42
ohh .... sure. You need to set typeObservable<IMyList>
– NechiK
Jan 3 at 11:45
The code now works fine but there is no improvement in performance. Still taking time.
– rakho
Jan 3 at 12:17
On removing map operator from service.ts, it gives the following error:Type 'Observable<Object>' is not assignable to type 'Observable<IMyList>'. Type 'Object' is not assignable to type 'IMyList'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Property 'includes' is missing in type 'Object'.
– rakho
Jan 3 at 11:13
On removing map operator from service.ts, it gives the following error:Type 'Observable<Object>' is not assignable to type 'Observable<IMyList>'. Type 'Object' is not assignable to type 'IMyList'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Property 'includes' is missing in type 'Object'.
– rakho
Jan 3 at 11:13
Sorry, I made some mistakes. I have updated the code
– NechiK
Jan 3 at 11:24
Sorry, I made some mistakes. I have updated the code
– NechiK
Jan 3 at 11:24
Sorry but it still gives an error Type 'Observable<any>' is not assignable to type 'IMyList' at public myList: IMyList = of() and at this.myList = this.service.getMyList().pipe( map(item => { return item; }) );
– rakho
Jan 3 at 11:42
Sorry but it still gives an error Type 'Observable<any>' is not assignable to type 'IMyList' at public myList: IMyList = of() and at this.myList = this.service.getMyList().pipe( map(item => { return item; }) );
– rakho
Jan 3 at 11:42
ohh .... sure. You need to set type
Observable<IMyList>
– NechiK
Jan 3 at 11:45
ohh .... sure. You need to set type
Observable<IMyList>
– NechiK
Jan 3 at 11:45
The code now works fine but there is no improvement in performance. Still taking time.
– rakho
Jan 3 at 12:17
The code now works fine but there is no improvement in performance. Still taking time.
– rakho
Jan 3 at 12:17
|
show 1 more comment
I think the code is simple, it should not cause any problem. The problem is your backend and how to present your code.
Can you check the code on Web API you mentioned above? If the load time is too long, can you do any thing to improve the API performance.
If there are too many data. For example 10.000 rows. You should do the pagination on Web API. And on Front End you can add infinity scrolling feature. It will boost the load time a lot.
The Web API code has been tested(not by me though as I don't have much knowledge about ASP.NET Core) and it works fine. Some problem with the UI which I am unable to find. There are only 3 records and it takes around 2 seconds to load it. For first 2 secs, it shows "no record found" which should be the message if there are no records. And then it shows the list.
– rakho
Jan 3 at 10:21
add a comment |
I think the code is simple, it should not cause any problem. The problem is your backend and how to present your code.
Can you check the code on Web API you mentioned above? If the load time is too long, can you do any thing to improve the API performance.
If there are too many data. For example 10.000 rows. You should do the pagination on Web API. And on Front End you can add infinity scrolling feature. It will boost the load time a lot.
The Web API code has been tested(not by me though as I don't have much knowledge about ASP.NET Core) and it works fine. Some problem with the UI which I am unable to find. There are only 3 records and it takes around 2 seconds to load it. For first 2 secs, it shows "no record found" which should be the message if there are no records. And then it shows the list.
– rakho
Jan 3 at 10:21
add a comment |
I think the code is simple, it should not cause any problem. The problem is your backend and how to present your code.
Can you check the code on Web API you mentioned above? If the load time is too long, can you do any thing to improve the API performance.
If there are too many data. For example 10.000 rows. You should do the pagination on Web API. And on Front End you can add infinity scrolling feature. It will boost the load time a lot.
I think the code is simple, it should not cause any problem. The problem is your backend and how to present your code.
Can you check the code on Web API you mentioned above? If the load time is too long, can you do any thing to improve the API performance.
If there are too many data. For example 10.000 rows. You should do the pagination on Web API. And on Front End you can add infinity scrolling feature. It will boost the load time a lot.
answered Jan 3 at 10:04
Nguyen Manh TungNguyen Manh Tung
6
6
The Web API code has been tested(not by me though as I don't have much knowledge about ASP.NET Core) and it works fine. Some problem with the UI which I am unable to find. There are only 3 records and it takes around 2 seconds to load it. For first 2 secs, it shows "no record found" which should be the message if there are no records. And then it shows the list.
– rakho
Jan 3 at 10:21
add a comment |
The Web API code has been tested(not by me though as I don't have much knowledge about ASP.NET Core) and it works fine. Some problem with the UI which I am unable to find. There are only 3 records and it takes around 2 seconds to load it. For first 2 secs, it shows "no record found" which should be the message if there are no records. And then it shows the list.
– rakho
Jan 3 at 10:21
The Web API code has been tested(not by me though as I don't have much knowledge about ASP.NET Core) and it works fine. Some problem with the UI which I am unable to find. There are only 3 records and it takes around 2 seconds to load it. For first 2 secs, it shows "no record found" which should be the message if there are no records. And then it shows the list.
– rakho
Jan 3 at 10:21
The Web API code has been tested(not by me though as I don't have much knowledge about ASP.NET Core) and it works fine. Some problem with the UI which I am unable to find. There are only 3 records and it takes around 2 seconds to load it. For first 2 secs, it shows "no record found" which should be the message if there are no records. And then it shows the list.
– rakho
Jan 3 at 10:21
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54019971%2fdata-is-getting-loaded-on-the-ui-after-a-lag%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown