Pesquisa de site

angular - Analisar o objeto array JSON do Serviço no Componente


Esta é a resposta que estou passando do Serviço para o Componente, onde devo exibir cada valor na interface. Preciso analisar cada valor e armazená-lo em uma variável.

[{"profileId":"000234","profileName":"kofi prfl","regionName":"NA  ","fileType":"GRRCN","fileVersion":"1.01","fileFreq":"D01","fileFormat":"FIX","emptyFile":"N","cardMask":"Y","uprInd":"N","dataLevel":"01"}]

this.profileDetailsService.getProfileDetails(this.idDisplay)
      .subscribe(profileResponse => {
          // Should parse the profileResponse here....
          this.searchResult = profileResponse;
          this.spinnerService.hide();
        },
      error => {
          this.spinnerService.hide();
          this.showError();
        }
      );

Como separar os valores de profileId, profileName, regionName etc.?

Resposta #1

em vez de no seu código:

...
this.searchResult = profileResponse;
...

você pode usar:

searchResult: any[];

...
this.searchResult = profileResponse.json() || {}
...

então você pode acessar cada propriedade através do item searchResult:

this.searchResult[0].profileId, etc

Resposta #2

Atualização baseada no código do comentário:

A razão pela qual você não consegue acessar as propriedades de searchResult é que o serviço está retornando uma resposta ao invés de um objeto Javascript com propriedades.

Dos documentos HTTP do Angular aqui:

Os dados de resposta estão em formato de string JSON. O aplicativo deve analisar essa string em objetos JavaScript chamando response.json().

Sugiro analisar a resposta no serviço para manter as coisas relacionadas à requisição HTTP lá e evitar duplicação de código.

Alterar :

return this.http.post(this._url, body, options).map((response: Response) => {
    return response;
}).catch((error) => {
    return Observable.throw(error);
});

Para isso (se realmente você quiser apenas o primeiro perfil no array):

 return this.http.post(this._url, body, options).map((response: Response) => {
        return response.json()[0];
    }).catch((error) => {
        return Observable.throw(error);
    });

O novo código analisa o objeto JSON e extrai o primeiro objeto do array com .json()[0]. Em seguida, renomeie profileResponse para profileDetails e acesse as propriedades de this.searchResult usando a notação de ponto:

por exemplo, de outra função no componente: console.log(this.searchResult.profileName)

por exemplo. Do seu modelo: {{searchResult.profileName}}