Как обработать JSON Observable

Question

Я получаю сложный объект, отправленный с моего внутреннего сервера Express, используя res.json.(Список участников, которые зарегистрировались).

На внешнем интерфейсе я хотел бы преобразовать ответ json в объект, который я могу обработать в своем шаблоне.Разве я не могу просто вызывать JSON.parse () для ответа json?

Я видел несколько предложенных решений, которые требуют, чтобы вызов HttpClient get имел универсальный тип возвращаемого объекта, то есть get<MyObj>.(например, в этой статье Angular Http Call ).Есть ли способ сделать это без предварительного указания типа возврата из вызова get?(Я бы хотел сохранить реализацию внешнего интерфейса как можно более легкой и гибкой и выполнить все определения данных во внутреннем интерфейсе, а затем использовать внешний интерфейс для «чтения» внутренней структуры данных. Данныеструктура довольно сложная и длинная, и это позволило бы сэкономить много работы, если бы я мог избежать повторения определения данных как на задней, так и на внешней стороне).

К сожалению, я еще не нашел пути, так как, например, редактор говорит мне, что JSON.parse ожидает строковый параметр, в то время как мой вызов HttpClient возвращает Object.

Вот кодУ меня так далеко:

member.service.ts:

constructor(private http: HttpClient) { }

ngOnInit() {
  this.getList();
}

getList(): Observable<any> {
    return this.http
      .get(`${this.host_url}list`,{responseType: 'json'})
  }

register.component.ts

users$: Observable<Object>;

getUsers() {
    this.users$ = this.member.getList();
  }

register.component.html

<ul>
  <ng-container *ngFor="let user of users$ | async ">
    <li>
      {{user | json}}  <-- This gives me a string. If I use {{ user }} without the json pipe, I get an object, but can't reference its properties.
    </li>
  </ng-container>
</ul>

В настоящее время вмой цикл ngFor*, я не могу получить объект user и ссылаться на его свойства (то есть user.authData[0].username).Как я могу изменить свой код, чтобы иметь возможность ссылаться на свойства user в шаблоне?Нужно ли заранее указывать тип данных для вызова get, или есть другой способ?

EDIT (1): Вот некоторые примеры данных, возвращаемых {{ user | json }} pipe:

 { "_id": "5cf1b7792ecf136bd4cddebf", "authData": [], "nameData": [], "emailData": [], "phoneData": [], "addressData": [], "companyData": [], "idData": [], "photoData": [], "memberData": [], "creditCardData": [], "__v": 0 }
{ "_id": "5cf207038e3f2551dcf4c803", "authData": [], "nameData": [], "emailData": [], "phoneData": [], "addressData": [], "companyData": [], "idData": [], "photoData": [], "memberData": [], "creditCardData": [], "__v": 0 }
{ "_id": "5d6ff6ac7046a519403c801f", "authData": [], "nameData": [], "emailData": [], "phoneData": [], "addressData": [], "companyData": [], "idData": [], "photoData": [], "memberData": [], "creditCardData": [], "__v": 0 }
{ "_id": "5d7015dddba7384d64540571", "authData": [], "nameData": [], "emailData": [], "phoneData": [], "addressData": [], "companyData": [], "idData": [], "photoData": [], "memberData": [], "creditCardData": [], "__v": 0 }
{ "_id": "5d7061fd767c8c41202f49b7", "authData": [], "nameData": [], "emailData": [], "phoneData": [], "addressData": [], "companyData": [], "idData": [], "photoData": [], "memberData": [], "creditCardData": [], "__v": 0 }
{ "_id": "5d71b9b1fa4fb10afc346323", "authData": [], "nameData": [], "emailData": [], "phoneData": [], "addressData": [], "companyData": [], "idData": [], "photoData": [], "memberData": [], "creditCardData": [], "__v": 0 }
{ "_id": "5d71bcd2fa4fb10afc346332", "authData": [], "nameData": [], "emailData": [], "phoneData": [], "addressData": [], "companyData": [], "idData": [], "photoData": [], "memberData": [], "creditCardData": [], "__v": 0 }
{ "_id": "5d71bf76fa4fb10afc34633e", "authData": [], "nameData": [], "emailData": [], "phoneData": [], "addressData": [], "companyData": [], "idData": [], "photoData": [], "memberData": [], "creditCardData": [], "__v": 0 }
{ "_id": "5d71ce7d52a93e0700f2c052", "authData": [], "nameData": [], "emailData": [], "phoneData": [], "addressData": [], "companyData": [], "idData": [], "photoData": [], "memberData": [], "creditCardData": [], "__v": 0 } 

Answer 1

member.service.ts:

getUsers(): Observable<any[]> {
  return this.httpClient
    .get<any[]>(`${environment.api_url}/api/users`)
    .pipe(map(data => data));}

register.component.ts:

  getUsers() {
    this.memberService.getUsers().subscribe(data => {
      this.users = data;
    });
  }

Тогда используйте, как вы написали

<ul>
  <ng-container *ngFor="let user of users$ | async ">
    <li>
      {{user._id}}  <-- For example user name
    </li>
  </ng-container>
</ul>

Answer 2

Конечно можно;кстати Angular возвращает разобранный вам объект;все, что вам нужно, это иметь некоторую переменную объекта, которая содержит ответ;как правило, этот объект может иметь тип любой , НО вам сначала нужно подписаться на ответ.

В качестве примера, имитирующего часть вашего json для доступа к нему direclty

getUsers() {
    this.member.getList().subscribe( resp => {
         this.users = resp;

         // To go through your json, you can use direct access like the following
         this.users.foreach(user => {
            let id = user['id'];                   // get the id
            let authData: [] = user['authData'];   // get authData list
         });

    })
}

И так далее, это позволит вам анализировать динамически, вместо того, чтобы снова создавать модель во внешнем интерфейсе.и, как вы должны знать, чтобы получить доступ к этому из HTML, вам нужно связать каждый объект и заменить на него мои объекты кода (id & authData).Ваш код для этой части в html после подписки и назначения результата должен работать нормально, также вы можете делать вложенные циклы без проблем.

Answer 3

база вашего образца данных вы можете получить данные authData, как это

<ul>
    <ng-container *ngFor="let user of users ">
        <li >
            user id {{user._id}} , authData length {{user.authData.length}}
            userName <span *ngFor="let auth of user.authData">  {{auth.userName }}</span>
        </li>
    </ng-container>
</ul>

демо ⚡⚡