6

I get from a webserver the following JSON String.

[
{"name":"Joe Lincoln","age":"42","grade":"9","active":"1"},
{"name":"Jack Smith","age":"38","grade":"8","active":"1"},
{"name":"Peter Smith","age":"42","grade":"9","active":"0"},
{"name":"Eva Lorens","age":"42","grade":"8","active":"1"},
]

I want public the JSON in HTML, I tried the following but the fields get not be filled, I also get No Exception, so its very difficult for me to find out why its not working.

TS

  this.servletService.webserviceCall('MemberUnit', 'getMembers',  params).then((obs)=>{
      obs.subscribe(
          (data) => {
            this.members =  JSON.parse(data);
          }); 
    })

HTML

 <ion-item *ngFor="let member of members">
 <ion-avatar item-left>
       <svg width="75px" height="75px" >
   <text x="50%" y="50%" text-anchor="middle" stroke="#2980b9" stroke-width="2px" dy=".1em">{{member.grade }}</text>
      </svg>
      </ion-avatar>
       <h2>{{member.name}}</h2>
      <h3>{{member.age}}</h3>
    </ion-item>
Sandruna
  • 217
  • 2
  • 3
  • 9
  • *"Iterate a Json Object with ngFor"* You wouldn't. First you'd parse the JSON (a string) into an object (no longer JSON). Then you might iterate that object's properties. – T.J. Crowder Feb 16 '17 at 15:51
  • Maybe im wrong with the title, but the description should be clear what I want reach. – Sandruna Feb 16 '17 at 15:53
  • I posted an answer based on a guess, but I also think it's entirely unclear what the question is about or what the problem is. Your code uses `*ngFor with an array, but you write about usimg it with an object. – Günter Zöchbauer Feb 17 '17 at 04:04
  • You can Use the JavaScript Object in the template if you pass it like Object=Object in the component, see my answer here: https://stackoverflow.com/a/45880507/3853300 – Sheki Apr 28 '19 at 01:07

1 Answers1

5

You can get the keys from an object using Object.keys (requires polyfill in IE AFAIK)

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'keys' })
export class KeysPipe implements PipeTransform {
  transform(value): any {
    if(!value) return null;
    return Object.keys(value);
  }
}

<div *ngFor="let key of member | keys">{{member[key]}}</div>

For Angular 6 see How to iterate object keys using *ngFor

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • I saw this structure a few times. But I rarely understand it. Would be nice, when you can be more specific. Where is my JSON Object used in this Pipe? Have I declare a seperate class for it? When yes, how I can use it in my specific class? – Sandruna Feb 16 '17 at 15:57
  • Ups, forgot to use the pipe (`| keys`). Each member would be passed to `transform` and the returned keys would be used by `*ngFor` and then by `member[key]` to get the value for a key. – Günter Zöchbauer Feb 16 '17 at 16:00
  • So i get the value later with `member[key].name` for example? – Sandruna Feb 16 '17 at 16:02
  • No, not with `key.name` with `member[key]` (`key` would become `name`, `age`, `grade`, `active`) – Günter Zöchbauer Feb 16 '17 at 16:03
  • The Angular team has a different opinion. It was a deliberate decision not to include that. – Günter Zöchbauer Apr 29 '17 at 20:01