retrieving and displaying json object using *ngFor

I want to retrieve informations from a json file in angular2.For this purpose, i created this custom pipe, following the example How to display json object using *ngFor

import {Pipe, PipeTransform} from 'angular2/core';

@Pipe({name: 'parseData'})

export class ParseDataPipe implements PipeTransform{

    transform(value, args:string[]) : any {

       let keys = [];

         for (let key in value) {
                 key: key,
                 value: value[key]
         return keys;



This is the template i used in the component:

        <button (click)="onTestGet()">GET REQUEST</button><br>

        <button (click)="onTestPost()">POST REQUEST</button><br>

        <span *ngFor="#entry of postData | parseData">
                    <!--<li>Key: {{entry.key}}, value: {{entry.value.status}}</li>;-->
                    <li>Value: {{entry.value}}</li>

this is my json file:

{"status":"success","type":"cellSetData","data":    {"epoch":6874,"cube":"EquityDer","axes":[{"id":-1,"hierarchies":  [{"dimension":"Measures","hierarchy":"Measures"}],"positions":  [[{"namePath":["pnl.SUM"],"captionPath":["pnl.SUM"],"properties":   {"DISPLAY_INFO":0}}]]}],"cells":[{"ordinal":0,"value":-42973.21272120108,"formattedValue":"-42,973.21","properties":{}}],"defaultMembers":[{"dimension":"Measures","hierarchy":"Measures","path":["contributors.COUNT"],"captionPath":["Count"]},{"dimension":"Time","hierarchy":"HistoricalDates","path":["Mon Apr 11 02:00:00 CEST 2016"],"captionPath":["2016-04-11"]},{"dimension":"Epoch","hierarchy":"Epoch","path":["master"],"captionPath":["master"]}]}}

i want to retrieve for example “status” and “type”, but i retrieve an array of character like this:

Value: {
Value: ”
Value: s
Value: t
Value: a
Value: t
Value: u
Value: s
Value: ”
Value: :
Value: ”
Value: s
Value: u
Value: c
Value: c
Value: e
Value: s
Value: s
Value: ”
Value: ,
Value: ”

I parse the Object i retrieve like that:

          var param=JSON.stringify(
            {"mdx":"SELECT FROM [EquityDerivativesCube] WHERE ([Measures].[pnl.SUM])"}

          var firstheaders = new  Headers();

          firstheaders.append('Content-Type', 'application/json');
          firstheaders.append('Authorization', 'Basic YWRtaW46YWRtaW4=');

        return this._http
            .post('http://localhost:9090/webservices/pivot/rest/v1/cube/query/mdx', param,{headers: firstheaders})
            .map(res => res.json());


Does anyone know why i retrieve an array of character and not an array of string like i desired?
i want to specify that i follow these examples : access key and value of object using *ngFor
Deep nested json to array in array / json rendering of Angular 2 *ngFor

I think that it’s not a problem of parsing json, but retrieve it to display…

thanks for helping me

Leave a Reply

1 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
newest oldest most voted
Notify of

I don’t know how to get the data but it seems that you forget to parse them (i.e. convert it to a JSON object) since you iterate over a string and not an object.

In your loop, the first element is { the first char of the content, the second one is ", and so on…

To load your JSON file you should use something like that:

this.http.get('/myfile.json').map(res => res.json());