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

Thierry Templier · Accepted Answer · 2016-04-11 12:56:35Z

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, 2016 at 12:56

Thierry Templier

203k44 gold badges407 silver badges366 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

steky Over a year ago

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

Thierry Templier Over a year ago

Could you provide the content of your response? Specially the Content-Type header. Thanks!

steky Over a year ago

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=');

Thierry Templier Over a year ago

It's the headers you put for your request? The headers for response can be seen within Dev Tools in the Network tab...

steky Over a year ago

yes , they are headers i put for request. Content-Type response is the same : application/json

|

Collectives™ on Stack Overflow

retrieving and displaying json object using *ngFor

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related