array.push not working typescript/Angular

Question

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'}
    ]

If you want `resultData` to be a list of students, why are you pushing `{ fieldName: data.fullName }` which has nothing in common with a student? — VLAZ, Sep 23 '22 at 05:22
I did not get you, fieldName is 'fullName; which is property of Student interface itself — angularguy, Sep 23 '22 at 05:30
No, `fieldName` is `fieldName`. If [it was dynamic](https://stackoverflow.com/questions/2274242/how-to-use-a-variable-for-a-key-in-a-javascript-object-literal), it would have been `{ [fieldName]: data.fullName }` And even then, that's ***not*** a student object. A student, as defined in your interface, has three mandatory properties: `fullName`, `age`, and `classType`. Having just one is still not a valid student. — VLAZ, Sep 23 '22 at 05:33
ok can, you mean putting index like this.this.resultData.push({ [fieldName]: data.fullName }) — angularguy, Sep 23 '22 at 05:39
other two properties would be added at later stage in processing, wont it work ? is there index plays a role here, do you have any working example — angularguy, Sep 23 '22 at 05:40
I mean that *even if you do that*, you would not have a valid student object, because it requires three properties and you're only providing one — VLAZ, Sep 23 '22 at 05:40
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/248287/discussion-between-angularguy-and-vlaz). — angularguy, Sep 23 '22 at 05:42
Do index plays a role here? for example at same index I can add another property ? what is other alternative if you have — angularguy, Sep 23 '22 at 05:46

Milind Barve · Answer 1 · 2022-09-23T06:08:02.627

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

        })
    }

I added processAge as well, that is same as processName, based on type the age will be determined. — angularguy, Sep 23 '22 at 05:29

score 0 · Answer 2 · answered Sep 23 '22 at 06:51

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

array.push not working typescript/Angular

2 Answers2