retrieving and displaying json object using *ngFor

Question

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{
    constructor(){}

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

       let keys = [];

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

    }

}

This is the template i used in the component:

        <button (click)="onTestGet()">GET REQUEST</button><br>
            <p>{{getData}}</p>

        <button (click)="onTestPost()">POST REQUEST</button><br>
            <p>{{postData}}</p>

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

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:

postJSON(){
          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

score 2 · Answer 1 · answered Apr 11 '16 at 12:56

2

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());

answered Apr 11 '16 at 12:56

Thierry Templier

198,364
44
396
360

thanks Thierry, but about your previous question i looked, did you retrieved data correctly from your json? it the same thing i would like to do – steky Apr 12 '16 at 08:09
Could you provide the content of your response? Specially the `Content-Type` header. Thanks! – Thierry Templier Apr 12 '16 at 08:16
have a look on the Content-Type of my response here and at the bottom : firstheaders.append('Content-Type', 'application/json'); firstheaders.append('Authorization', 'Basic YWRtaW46YWRtaW4='); – steky Apr 12 '16 at 14:30
It's the headers you put for your request? The headers for response can be seen within Dev Tools in the Network tab... – Thierry Templier Apr 12 '16 at 14:34
yes , they are headers i put for request. Content-Type response is the same : application/json – steky Apr 12 '16 at 15:07
i just want to retrieve information from my json like this post: http://stackoverflow.com/questions/35647365/how-to-display-json-object-using-ngfor?lq=1 but i retrieve data character by character, not key by key ... – steky Apr 12 '16 at 15:08

retrieving and displaying json object using *ngFor

1 Answers1