Pipe json angular 2

Question

I`m use some custom pipe

@Pipe({name: 'keys'}) class KeyPipe implements PipeTransform { 
transform(value, args:string[]) : any { 
      let keys = [];
      console.log(value);
      for (let key in value) { 
          keys.push(key); 
      }
      console.log(keys);
      return keys; 
} 
}

for parse object json file

"system":
         {
              "memory":
              {
                   "total":12425734566,
                   "used":4725959680,
                  "free":8947874816,
                  "actualfree":4221499392,
                 "actualused":452335104,
                 "swaptotal":4296819712,
                 "swapused":0,
                 "swapfree":4296819712
               },
               "uptime":" 12 days,  4:09",
               "loadaverage":"0.00 0.00 0.00",
              "cpu":
              {
                   "vendor":"GenuineIntel",
                   "family":"6",
                   "model":"Intel(R) Xeon(R) CPU           E5620  @ 2.40GHz",
                   "rate":"2399.971",
                   "numofcores":4
               }

How to add *ngFor for this table and show the "memory" objects, and how to syntax right?

<table>
<thead>
            <tr>
                <th>Общая память</th>
                <th>Общая используемая память</th>
                <th>Свободная память</th>
                <th>Используемая память размера подкачки</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let service_rec of list.system.memory | keys">
                <td>{{ service_rec.total | keys}}</td>
                <td>{{ service_rec.used | keys}}</td>
                <td>{{ service_rec.free | keys}}</td>
                <td>{{ service_rec.actualfree | keys}}</td>
            </tr>
        </tbody>
    </table>

That code doesnt show the data of "memory". How i can solve this problem?

Günter Zöchbauer · Accepted Answer · 2016-07-18 08:34:16Z

1

UPDATE So something I didn't see before is that you're applying the filter to the "*ngFor". I had only noticed the filters being applied to the "< td >" elements. Now things make a little more sense. You actually don't want to apply the filter on the "< td >" elements, that means it's trying to transform the data twice (once on the each object in the Array and then for the properties of the object).

Now that I have a better idea of what you're trying to do, I have made an example plunker. This demonstrates how you can achieve what you're looking for without a pipe and with a pipe.

The syntax looks good with the exception of the Pipe name not matching the usage. You identify the Pipes name as "keys" but when you use the pipe in your html you call it "key".

I can't say that would fix your whole problem though as I'm not sure why you're using a "for" property iterator on the Type number in your transform method. I would log some data to the console inside your transform method to ensure it's running and creating the result you're expecting.

@Pipe({name: 'keys'}) class KeyPipe implements PipeTransform { 
    transform(value, args:string[]) : any { 
          let keys = [];
          console.log(value);
          for (let key in value) { 
              keys.push(key); 
          }
          console.log(keys);
          return keys; 
    } 
}

edited Jul 18, 2016 at 8:34

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

answered Jul 14, 2016 at 14:30

Dan Simon

8346 silver badges7 bronze badges

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

6 Comments

Eduard Arevshatyan Over a year ago

Ive got this log ->

Object {total: 8256172032, used: 4889501696, free: 3366670336, actualfree: 5602824192, actualused: 2653347840…}actualfree: 5602824192actualused: 2653347840free: 3366670336swapfree: 14750576640swaptotal: 14780719104swapused: 30142464total: 8256172032used: 4889501696__proto__: Object monitoring.form.component.ts:25 ["total", "used", "free", "actualfree", "actualused", "swaptotal", "swapused", "swapfree"] monitoring.form.component.ts:21 undefined monitoring.form.component.ts:25 [] monitoring.form.component.ts:21 undefined

, and data doesnt show in table

Dan Simon Over a year ago

Can you edit your original code and update it to reflect where you placed the console.log() lines? Also, please provide what you're trying to achieve with the "for (let key in value)" code. It really doesn't make sense to be running a "for" loop over the Type number.

Eduard Arevshatyan Over a year ago

i update code. i would parse the object of system -> memory {...}

Eduard Arevshatyan Over a year ago

@Günter Zöchbauer thanks a lot for your answer and help! but now i have this error -> ORIGINAL EXCEPTION: TypeError: Cannot read property 'forEach' of undefined

Eduard Arevshatyan Over a year ago

@Günter Zöchbauer and i get json with this ->

@Injectable() export class MonitoringFormService{     private _url = "http://10.46.2.51/monitoring/api/v1/services/list"      constructor(private _http: Http){             }      getServices(){         return this._http.get(this._url)                         .map(res => res.json());     }       }

|

Collectives™ on Stack Overflow

Pipe json angular 2

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related