Home > other >  array.push not working typescript/Angular
array.push not working typescript/Angular

Time:09-23

Environment: Angular 6: I have a blank array defined in the class and interface as below: and

   export class Student {
    fullName: string;
    age: number;
    classType: string;
}
export class MyClass {
    public resultData: Array<Student> = [];
    processedData = {
        studentData: [
            {
                name: 'Nayan',
                type: 'toddler',
                classType: 'secondary'
            },
            {
                name: 'Rajesh',
                type: 'infant',
                classType: 'primary'
            },
            {
                name: 'Rithik',
                type: 'toddler',
                classType: 'secondary'
            },
            {
                name: 'Rob',
                type: 'toddler',
                classType: 'primary'
            },
            {
                name: 'Daneirl',
                type: 'toddler',
                classType: 'secondary'
            }

        ]
    }
    resultData1 =[
        {name:'nayan', age:8, classType:'primary'},
        {name:'Daniel', age:15, classType:'scondary'},
        {name:'Rithik', age:12, classType:'secondary'}
    ]

    someEventClickedFormView() {
        this.processedData.studentData.forEach((data, index) => {
            switch (data.classType) {
                case 'primary': {
                    this.processName(data, 'fullName', index);
                    this.processAge(data,'age',index);
                    break;
                }
                case 'secondary': {
                    this.processName(data, 'fullName', index);
                    this.processAge(data,'age',index);
                    break;
                }
            }

        })
    }
    public processName(data: any, fieldName: string, index: number) {
        this.resultData.push({ fieldName: data.fullName })

        // here I am getting error
        //         Argument of type '{ fieldName: any; }' is not assignable to parameter of type 'Student'.
        //   Object literal may only specify known properties, and 'fieldName' does not exist in type 'Student'.ts(2345)
    }
    public  processAge(data:any,fieldName:string,index:number) {
        this.resultData.push({ fieldName: this.someTransformationToAge(data.age)})

    }
}

at button click event which is here someEventClickedFormView being called and pushes the data into resultData coming from mock data.

However, I am getting errors as below: you can see above code section push method.

Argument of type '{ fieldName: any; }' is not assignable to parameter of type 'Student'.
  Object literal may only specify known properties, and 'fieldName' does not exist in type 'Student'.ts(2345)

basically, I want resultData as below

  resultData =[
        {name:'nayan', age:8, classType:'primary'},
        {name:'Daniel', age:15, classType:'scondary'},
        {name:'Rithik', age:12, classType:'secondary'}
    ]

CodePudding user response:

I think this simple logic should suffice. Create object of student class , set the members as per logic. I do not see difference between 2 cases of switch statement. hence have put simple attribute assignment

 someEventClickedFormView() {
         
        this.processedData.studentData.forEach((data, index) => {
            Student s = new Student();
            s.name = data.fullName;
            s.classType = data.classType;
            s.age = this.someTransformationToAge(data.age);

            this.resultData.push(s);
            // switch (data.classType) {
            //     case 'primary': {
            //         s.name = data.fullName;
            //         s.classType = data.classType;
            //         s.age = this.someTransformationToAge(data.age);
            //         this.processName(data, 'fullName', index);
            //         this.processAge(data,'age',index);
            //         break;
            //     }
            //     case 'secondary': {
            //         this.processName(data, 'fullName', index);
            //         this.processAge(data,'age',index);
            //         break;
            //     }
            // }

        })
    }

CodePudding user response:

Replace the 3 functions someEventClickedFormView() ,processName() and procesAge() with the below single function . Here are 2 solutions for getting your desired result.

Solution 1 :

someEventClickedFormView() {
    this.processedData.studentData.forEach((data, index) => {
        let studentRecord = {};
        studentRecord['name'] = data.fullName;
        studentRecord['age'] = data.age;
        studentRecord['classType'] = data.classType;
        this.resultData.push(studentRecord);
    })
}

Solution 2: If you want to add any extra dynamic key to the object along with the existing key values, try this solution where the dynamic field dynamicNameField is set with the value passed as parameter(the below solution is passing fullName as a dynamic key) to function processDynamicValue() from below code .

someEventClickedFormView() {
    this.processedData.studentData.forEach((data, index) => {
        let studentRecord = {};
        studentRecord['name'] = data.fullName;
        studentRecord['age'] = this.someTransformationToAge(data.age);
        studentRecord['classType'] = data.classType;
        
        //use the below 1 line and the function processDynamicValue() to add any dynamic name to key of the studentRecord object to be pushed to this.resultData array.
        studentRecord=this.processDynamicValue(studentRecord,'dynamicNameField',data.fullName);
        this.resultData.push(studentRecord);
    })
}
processDynamicValue(studentRecord,fieldName,valueToSetToDynamicField){
   studentRecord[fieldName] = valueToSetToDynamicField;
   return studentRecord;
}
  • Related