Angular Schema Form taking more time to load large data

时间:2017-06-19 13:55:06

标签: javascript angularjs json jsonschema angular-schema-form

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;
        });
}

0 个答案:

没有答案