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.

You mean you need an object that wraps semesters and courses together? — user6749601
– user6749601, Commented Jun 23, 2018 at 20:49
It would be meaningful if you can share what you have tried instead of just posting the requirement you wanted.You can form a newCourse{ } on click of add button and then push that to course[ ] of the object with id = semesterId to which you want to add the course. — Avinash
– Avinash, Commented Jun 23, 2018 at 20:52
Yes you are correct I am trying to push data in addCourse() function. I updated the question(Please check). When I trying to push the course its giving me error because I am pushing an single object instead of an array. So could you please help me change the structure or any other place. — pavany
– pavany, Commented Jun 24, 2018 at 2:30
@DiabolicWords Yes I need to wrap smester and course together. I updated my question please check — pavany
– pavany, Commented Jun 24, 2018 at 2:31
I added a second answer considering your new information. Please, have a look at it. If this helped you, please, don't forget to mark this answer as solution. — user6749601
– user6749601, Commented Jun 24, 2018 at 7:47

score 3 · Accepted Answer · 2018-06-23 21:20:08Z

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.

score 1 · Accepted Answer · 2018-06-24 17:02:31Z

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

edited Jun 24, 2018 at 17:02

answered Jun 24, 2018 at 7:46

user6749601

4 Comments

pavany Over a year ago

Thank you very much @DiabolicWords. I tried with the your approach I was able to push for addSemester but I am getting error at _addCourse function like as below

ERROR TypeError: Cannot read property 'course' of undefined     at PlanningComponent.push../src/app/AcademicPlanning/student/planning/planning.component.ts.PlanningComponent._addCourse (planning.component.ts:69)     at PlanningComponent.push../src/app/AcademicPlanning/student/planning/planning.component.ts.PlanningComponent.addCourse (planning.component.ts:62)

Please let me Know I need to share more info

user6749601 Over a year ago

Sorry, my bad. I corrected the code. Please note that this.selectedSemester now contains the field course: []. This should do it. Please, try again.

pavany Over a year ago

Thanks @DiabolicWords. So when I added course: [], the _addCourse function not adding any courses for the first time add because semester.course.filter(element => element.CurriculumID === course.CurriculumID).length is 0. so I changed semester.course.filter(element => element.CurriculumID === course.CurriculumID).length>-1 then I could able to push the course into it.

pavany Over a year ago

And only thing missing here is, when I am adding a course, I should check the each semester object whether it is exist in it or not.

Collectives™ on Stack Overflow

json nested structure in angular 6

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related