CODEWITHSUNDEEP
jsonangulartypescript
K.Z
K.Z

Reputation: 5075

How to create Object of angular class from JSON in Angular

I am working on Angular 5 application and part of requirement is to create dynamic form from Web API Json data.

I have create multiple class of each input type i.e. text, radio, range, checkbox etc. I have tested all with hard-coded test metadata and is working. Now I need to create object of these classes dynamically in loop rather then hard-code as I have below define under test medtadata, each record in json is tag with questionType which tell which is input type

Test MetaData

getQuestions() {

    let questions: QuestionBase<any>[] = [

      new DropdownQuestion({
        key: 'brave',
        label: 'How you Rate New steel X technology for industrial construction ',
        options: [
          {key: 'solid',  value: 'Solid'},
          {key: 'great',  value: 'Great'},
          {key: 'good',   value: 'Good'},
          {key: 'unproven', value: 'Unproven'}
        ],
        order: 1
      }),

      new TextboxQuestion({
        key: 'firstName',
        label: 'First name',
        value: 'Bombasto',
        required: true,
        order: 5
      }),

      new DropdownQuestion({
        key: 'ice-cream',
        label: 'which ice-cream you prefer?',
        options: [
          {key: 'Vanilla',  value: 'Vanilla'},
          {key: 'banana',  value: 'banana'},
          {key: 'apple',   value: 'apple'},
        ],
        order: 3
      }),      
      new TextboxQuestion({
        key: 'weekend',
        label: 'What you doing this weekend?',
        order: 4
      }),   
      new RadioButtonQuestion ({
        key: 'eating-ice-cream',
        label: 'What ice-crea you like to eat?',
        order: 6,
        options: [
          {name:'ice-cream', key: 'Vanilla',  value: 'Vanilla'},
          {name:'ice-cream', key: 'banana',  value: 'banana'},
          {name:'ice-cream', key: 'apple',   value: 'apple'},
        ],
      }),
  ];

example radio class

  import { QuestionBase } from './question-base';

 export class RadioButtonQuestion extends QuestionBase<string> {
 controlType = 'radio';
 options: {name:string, key: string, value: string}[] = [];

   constructor(options: {} = {}) {
   super(options);
   this.options = options['options'] || [];
 }
}

Example of API;

point red arrow from where I know type, i.e in this case text so create object of textQuestion

enter image description here

Another Attempt

let questions2: QuestionBase<any>[];

for(var key in questionsList)
{
   let questionElementType = questionsList[key].questionElement.questionElementType[0].typeDefination;      

  if(questionElementType=="textbox")
  {       
    var _textBox =

  new TextboxQuestion({
  key: 'firstName',
  label: 'First name',
  value: 'Bombasto',
  required: true,
  order: 5
 }); 

 console.log("_textBox",_textBox);

 questions2.push(_textBox);

 }
  else  if(questionElementType=="dropdown")
 {
  new DropdownQuestion({
    key: 'brave',
    label: 'How you Rate New steel X technology for industrial construction ',
   options: [
      {key: 'solid',  value: 'Solid'},
      {key: 'great',  value: 'Great'},
      {key: 'good',   value: 'Good'},
      {key: 'unproven', value: 'Unproven'}
      ],
    order: 1
    })
   }
 }

in above code I am getting error block scoped variable used before its declaration when I try to push object into base class array

Upvotes: 0

Views: 758

Answers (1)

David
David

Reputation: 34445

Assming all your questions can be imported like this

import * as questions from "./question";

Then you can instantiate classes like this

let instance = new questions["className"];

So in your actual example, it could be

let questionType = "textbox";//the type you showed on your screenshot

let classType = `${questionType.charAt(0).toUpperCase()}${questionType .slice(1)}Question`;


let questionInstance new questions[classType](options);

Upvotes: 1

Related Questions