Ошибка при совмещении вставки данных в элемент angular и запроса на сервер с subscribe

Question

В методе ngOnInit происходит получение объекта с сервера, после чего в переменные двух стороннего связывания заносятся значения полей объекта.

  lecture$ : Observable<any>;

  idLecture: any
  title: string
  photo: string
  text: string
  lvl: string
  priority: string

  ngOnInit(): void {
    this.lecture$ = this.route.params
      .pipe(switchMap((params : Params) => {
        return this.authService.getLectureById(params['id'])
      }))

    this.idLecture = this.route.params
      .pipe(switchMap((params : Params) => {
        return params['id']
      }))

    this.lecture$.subscribe(x => {
      this.title = x.title
      this.photo = x.photo
      this.lvl = x.lvl
      this.priority = x.priority
      this.text = x.text
    })
  }

Ошибка возникает при вызове метода updateLecture, в котором вызывается метод updateLecture с subscribe:

 updateLecture() {
    const updateLecture = {
      id: this.idLecture,
      title: this.title,
      photo: this.photo,
      text: this.text,
      lvl: this.lvl,
      priority: this.priority
    }

    this.authService.updateLecture(this.idLecture, updateLecture).subscribe(data => {
      if (!data.success) {
        this._flashMessagesService.show(data.msg,
          { cssClass: 'alert-danger', timeout: 3000 });
      } else {
        this._flashMessagesService.show(data.msg,
          { cssClass: 'alert-success', timeout: 3000 });
        this.router.navigate(['/'])
      }
    })

  }

именно из-за данного вызова запрос не отправляется на сервер и выводится данная ошибка в консоли:

core.mjs:6494 ERROR TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'OperatorSubscriber'
    |     property '_parentage' -> object with constructor 'SafeSubscriber'
    |     property '_finalizers' -> object with constructor 'Array'
    --- index 0 closes the circle
    at JSON.stringify (<anonymous>)

Метод updateLecture из authService

// @ts-ignore
  updateLecture(id, lecture) {
    return this.http.patch(`http://localhost:3000/editlecture/${id}`, lecture).pipe(map(res => res.json()))
  }

Answer 1

Это ошибка связана с цикличностью в структуре данных.

Например Объект 1 ссылается на Объект 2, а тот в свою очередь опять на Объект 1 и так далее, до бесконечности.

Ищите цикличность среди своих данных, например ссылку на весь объект можно заменить его id (особенно при передаче на сервер).

Для наглядности допустим у вас есть некая структура:

// Учебная группа
interface Group {
   student: Student; // Ссылка на ученика в группе (для примера)
}

// Ученик
interface Student {
    group: Group; // Ссылка на группу, которой принадлежит данный ученик
}

Теперь из, допустим, переменной const student: Student ..., при формировании JSON-структуры будет создаваться такое дерево:

{
    student: {
        ...
        group: {
            ...
            student: {
                ...
                group: {
                    и так далее
                }
            }
        }
    }
}

Решение - это заменить ссылки на объекты, идентификаторами (id) этих объектов:

interface Student {
    group: Group | number; // number для хранения id при передаче на сервер
}

{
    student: {
        group: <число> // идентификатор группы...
    }
}

БЛОГ НА HUSL

Ошибка при совмещении вставки данных в элемент angular и запроса на сервер с subscribe

Ответы (1 шт):