Угловой 6: выборка данных хеш-таблицы из JSON-ответа

Question

У меня есть этот JSON-ответ от моего бэкэнда:

//User_Courses

[
  {
    id: 1,
    name: "Ice King",
    email: "pretty_princess1234@gmail.com"
    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: "fairy_godparents111@gmail.com"
    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.

Я хочу получить данные из бэкэнда и подписать их на этот интерфейс.Я не уверен, как реализовать структуру данных и как получить доступ к данным.Это интерфейс, который я создал:

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

Я хочу знать, как это реализовать, подписать данные сервисом и получить доступ к данным (чтобы потом их изменить и добавить данные).Большое вам спасибо!

Answer 1

Создать модель для CompletedLesson (как упомянуто в комментариях):

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

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

Затем создайте сервис , что-то вроде этого:

@Injectable()
export class UserService {

    constructor(private http: HttpService) { }

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

И, куда бы вы ни брали данные (например, компонент ):

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

В предоставленном вами JSON, чтобы получить доступ к первому уроку Мистер.Crocker пройденных уроков (this.users - это все пользователи, которых вы получили из бэкэнда):

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

Более того, вы можете получить доступ к "3" следующим образом:

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

и выможно добавить в массив, используя push :

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

и добавить новый завершенный урок:

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

Надеюсь, это поможет.