I am working on Angular Schema Form to bind the JSON data. JSON data consist of 430 controls on the form. I am having performance issues. It takes 3 minutes to load.
How can I solve this issue?
Elaborated
I am using schema form js to form the dynamic controls and data in the form of json string. I have to populate the Json string data onto the html page. As controls are more it takes 3mins to render the page.
Schema
{
"type":"object",
"properties": {
"University": {
"type":"object",
"properties": {
"UniversityID": {
"title":"University ID",
"type":"number",
"validationMessage":"",
"pattern":""
},
"UniversityID_Source": {
"title": "Source",
"type": "string"
},
"university_name": {
"title": "University Name *",
"type":"string",
"required":true,
"validationMessage":"",
"pattern":""
},
"university_name_Source": {
"title":"Source",
"type":"string"
},
"Website":{
"title":"Website *",
"type":"string",
"required":true,
"validationMessage":"",
"pattern":""
},
"Website_Source": {
"title": "Source",
"type": "string"
}
}
}
}
}
Form Definition
[
{
"type":"tabs",
"tabs":[
{
"title":"University",
"items": [
{
"type":"fieldset",
"title":" ",
"items":[
"University.UniversityID",
"University.UniversityID_Source",
"University.university_name",
"University.university_name_Source",
"University.Website",
"University.Website_Source",
"University.Street",
"University.Street_Source",
"University.Country",
"University.Country_Source",
"University.State",
"University.State_Source",
"University.City",
"University.City_Source",
"University.ZipCode",
"University.ZipCode_Source",
"University.FAX",
"University.FAX_Source",
"University.email_id",
"University.email_id_Source",
"University.act_code",
"University.act_code_Source",
"University.Carnegie",
"University.Carnegie_Source",
"University.grade_unique_id",
"University.grade_unique_id_Source",
{
"key":"University.UniversityESTD",
"type":"datepicker",
"dateOptions":{
"minDate":"01-01-1900",
"maxDate":"01-01-2100"
},
"options":null,
"min":null,
"max":null,
"ignoreTimezone":false
},
{
"key":"University.UniversityESTD_Source"
},
{
"key":"University.UniversityCermonyDT",
"type":"datetimeedit",
"dateOptions":null,
"options":null,
"min":"01-01-1900",
"max":"01-01-2100",
"ignoreTimezone":false
}
]
}
]
}
]
}
]
TypeScript Code
private loadTaskOntology(projectId: number, taskId?: number): void {
vm.taskService
.getJsondata(vm.taskId, vm.sourceId)
.then(function (response) {
vm.jsonData = response.data;
});
}