json nested structure in angular 6

Question

I am new to angular. I have requirement to send the data to backend system. The structure of the objects are like this

interface semester {
  Id: number;
  Semester: string;
  Year: number;
  course: course[];
}

interface course {
  CourseNumber: number;
  CourseTitle: string;
  CurriculumID: string;
}

My user interface will add a course each time on pressing add button and trying to develop a object as below and send it to backend api.

adding first course:

[  
   {  
      "Id":"20193",
      "Semester":"Fall",
      "Year":"2018",
      "course":[  
         {  
            "CourseNumber":"100",
            "CourseTitle":"CEU: Contemporary Collective Bargaining",
            "CurriculumID":"00004285"
         }
      ]
   }
]

and when add one more course in different semester

[  
   {  
      "Id":"20193",
      "Semester":"Fall",
      "Year":"2018",
      "course":[  
         {  
            "CourseNumber":"100",
            "CourseTitle":"CEU: Contemporary Collective Bargaining",
            "CurriculumID":"00004285"
         }
      ]
   },
   {  
      "Id":"20195",
      "Semester":"Spring",
      "Year":"2019",
      "course":[  
         {  
            "CourseNumber":"230",
            "CourseTitle":"American Indians of Minnesota",
            "CurriculumID":"00007541"
         }
      ]
   }
]

and third time when add a course o previous semester then strcture should be like as below

[  
   {  
      "Id":"20193",
      "Semester":"Fall",
      "Year":"2018",
      "course":[  
         {  
            "CourseNumber":"100",
            "CourseTitle":"CEU: Contemporary Collective Bargaining",
            "CurriculumID":"00004285"
         },
         {  
            "CourseNumber":"101",
            "CourseTitle":"Design Foundations",
            "CurriculumID":"00000897"
         }
      ]
   },
   {  
      "Id":"20195",
      "Semester":"Spring",
      "Year":"2019",
      "course":[  
         {  
            "CourseNumber":"230",
            "CourseTitle":"American Indians of Minnesota",
            "CurriculumID":"00007541"
         }
      ]
   }
]

Results captured from the form after button click

this.selectedSemester={Id: "20193", Semester: "Fall ", Year: "2018"};
this.selectedCourse={CourseNumber:"240",CourseTitle:"Painting",CurriculumID:"00001025"}

And wrote a addCourse method to capture the data in required format

courseList: semester[];
addCourse(){
  this.courseList.push({
  Id: this.selectedSemester.Id,
  Semester: this.selectedSemester.Semester,
  Year: this.selectedSemester.Year,
  course: this.selectedCourse
        }
      );
    }

Here in semester, Id is the unique key Id. Can anyone help one with syntax to form this object.

Answer 1

Here is an example of how you could handle the object according to your updated information:

courseList: Array<ISemester> = [];

addCourse(){
    this.selectedSemester={Id: "20193", Semester: "Fall ", Year: "2018", course: []};
    this.selectedCourse={CourseNumber:"240",CourseTitle:"Painting",CurriculumID:"00001025"}

    // Add the semester and get the reference to it
    const currentSemester = this.addSemester(this.selectedSemester);

    // Add the selected course to the referenced semester in the courseList
    this._addCourse(this.selectedCourse, currentSemester);
}

/**
 * This method first checks whether the semester is already listed.
 * If not, the semester will be added.
 * The method finally returns the reference to the semester object in the list.
 */
private addSemester(semester: ISemester): ISemester {
    let isInList: boolean = false;
    let currentSemester: ISemester;

    // walk through the semester list
    this.courseList.forEach(element => {
        // if the semester is already listed
        if(element.Id === semester.Id){
            // memorize this and let the return value (currentSemester) 
            // be a reference to the semester element in the list
            isInList = true;
            currentSemester = element;

            // stop iteration
            break;
        }
    });

    // if there was no match, add the semester to the courseList
    if(!isInList) {
       currentSemester = semester;
       this.courseList.push(semester);
    }

    return currentSemester;
}

private _addCourse(course: ICourse, semester: ISemester) {
    // if the course is not yet listed
    if(this.semester.course.filter(element => element.Id === course.Id).length < 0){
        // add it
        this.semester.course.push(course);
    }
}

Answer 2

You could assemble your objects this way

You have your interfaces

export interface ISemester {
    Id: number;
    Semester: string;
    Year: number;
    course: ICourse[];
}

export interface ICourse {
    CourseNumber: number;
    CourseTitle: string;
    CurriculumID: string;
}

You have models that implement the interfaces

export class Semester implements ISemester {
    Id: number;
    Semester: string;
    Year: number;
    course: ICourse[];
}

export class Course implements ICourse {
    CourseNumber: number;
    CourseTitle: string;
    CurriculumID: string;
}

You have a List of type ISemester where you push in semester-objects. This semester objects get course-objects which you push into their course-list.

const semesters: Array<ISemester> = [];

const semester1 = new Semester();
semester1.Id = 1000;
semester1.Semester = 'Semester1';
semester1.Year = 2018;

const course1 = new Course();
course1.CourseNumber = 1;
course1.CourseTitle = 'Title1';
course1.CurriculumID = '00123';

semester1.course.push(course1);

const course2 = new Course();
course1.CourseNumber = 5;
course1.CourseTitle = 'Title2';
course1.CurriculumID = '00124';

semester1.course.push(course2);

semesters.push(semester1);

const semester2 = new Semester();
semester1.Id = 1001;
semester1.Semester = 'Semester2';
semester1.Year = 2019;

const course3 = new Course();
course1.CourseNumber = 101;
course1.CourseTitle = 'Title4';
course1.CurriculumID = '00800';

semester1.course.push(course3);

semesters.push(semester2);

This results in a list of semesters that contain either one or n courses.