Angular 6: Fetch Hash Table Data from JSON respond Backend

Question

I have This JSON respond from my backend:

//User_Courses

[
  {
    id: 1,
    name: "Ice King",
    email: "[email protected]"
    completedCourses: [1,3],
    unlockedCourses:  [1,3,4,5,6],
    completedLessons: [{"1" => [1,2,3]}, {"3" => [1,2,3,4,5,6,7]}, {"4" => [1]}]
  },
  {
    id: 2,
    name: "Mr. Crocker",
    email: "[email protected]"
    completedCourses: [3],
    unlockedCourses:  [1,3,4],
    completedLessons: [{"3" => [1,2,3,4,5,6,7]}, {"4" => [1,2]}]
  }
]

// completed lessons are all the lesson the user finished. 
// courses can be in progress or completed.

I want to fetch data from backend and subscribe it to this interface. I don't sure how to implement the data structure and how to access data. This is the interface I created:

export interface IUser {
  id: number;
  name: string;
  email: string;
  completedCourses: number[];
  unlockedCourses: number[];
  completedLessons: // <----- don't know what type to write
}

I want to know how to implement this, subscribe data with service and access data (in order to change it later and add data). Thank you so much!

you can use array of this type: interface CompletedLesson{[name:string]:number[]} — Lia
– Lia, Commented Oct 14, 2018 at 10:30
ok that's sounds good. then how I subscribe to it? do I need to do something special or subscribe like I usually do? — Ofir Sasson
– Ofir Sasson, Commented Oct 14, 2018 at 10:36
and is CompletedLesson is array? can I make it array by adding []? — Ofir Sasson
– Ofir Sasson, Commented Oct 14, 2018 at 10:37

miselking · Accepted Answer · 2018-10-14 12:03:02Z

3

Create model for CompletedLesson (as mentioned in the comments):

interface ICompletedLesson {
    [name: string]: number[];
}

interface IUser {
    id: number;
    name: string;
    email: string;
    completedCourses: number[];
    unlockedCourses: number[];
    completedLessons: ICompletedLesson[];
}

Then, create a service, something like this:

@Injectable()
export class UserService {

    constructor(private http: HttpService) { }

    fetchUserCourses(): Observable<IUser[]> {
        return this.http.get<IUser[]>(`URL_TO_THE_USER_COURSES%);
    }
}

And, wherever you are fetching data (some component for example):

fetchUserCourses() {
    // userService is injected in this component's constructor
    this.userService.fetchUserCourses().subscribe(users => {
        // do something with result, yes, something like
        this.users = users;
    });
}

In the JSON you provided, to access the first lesson of the Mr. Crocker completed lessons (this.users are all users you retrieved from backend):

const firstCompletedLesson = this.users[1].completedLessons[0];   // {"3": [1,2,3,4,5,6,7]}
const lessons = firstCompletedLesson["3"];  // [1,2,3,4,5,6,7]
const firstLesson = lessons[0];  // 1

Furhermore, you can access "3" like this:

Object.keys(firstCompletedLesson)[0];   // 3

and you can add to array using push:

lessons.push(8);   // [1,2,3,4,5,6,7,8]

and to add new completed lesson use:

this.users[1].completedLessons.push({ "5": [1, 2, 3] });

Hope this helps.

edited Oct 14, 2018 at 12:03

answered Oct 14, 2018 at 11:02

miselking

3,1034 gold badges33 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ofir Sasson Over a year ago

thank you! what do you mean do something with result? something like this.users = users?

Ofir Sasson Over a year ago

how do I access for e.x the first lesson in the array? for e.x if I have [{"3": [1,2,3]}] so how I print lesson 1?

miselking Over a year ago

I edited the answer, check if this edit answers your comment questions...

Ofir Sasson Over a year ago

yeah that's good! is there a way to access "3" somehow? to check if the course id is the correct one?

Ofir Sasson Over a year ago

and how I add to existed array lesson and how I add new hash?

|

Collectives™ on Stack Overflow

Angular 6: Fetch Hash Table Data from JSON respond Backend

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related