ng2-signalR iterate from

Ionic Framework ionic-v3
1

Hi everybody

I have issue with displaying data returned from signalR.
The date I get from console log is:

{"DetectionId":154,"Data1":"somevalue","Data2":"somevalue","Data3":"somevalue","Data4":"somevalue"}

I want to iterate over each object and display it like:

  <ion-item *ngFor="let item of detection">
    <h3> {{ item.DetectionId }} </h3>
    <h3> {{ item.Data1 }} </h3>
  </ion-item>

inside my .ts i have this:

public detection: any[] = [];

  connect_sub() {
    let conx = this._signalR.createConnection();
    let onMessageSent = new BroadcastEventListener('test');
    conx.listen(onMessageSent);

    onMessageSent.subscribe((message: any) => {    // tried [] also dont' go well
      console.log(typeof message); // => its object
      this.detection = JSON.parse(<string>message); 
      console.log("Test", this.detection);
    });

I’ve tried some options, stringify |json etc… but it wont work.
Pls someone helppp me :slight_smile: tnxx

2

Since the message is already an object, there’s no need to use ngFor here.

If your goal is to list all “DataX” fields and if the number of fields in the object is not constant, you can use Object.keys() to obtain the list of fields in the object as an array.

For eg., in your .ts file:

...
this.keys = Object.keys(message);
...

and in the template file:

<ion-item *ngFor="let key of keys">
  <h3>{{ message[key] }}</h3>
</ion-item>
1 Like
3

Thanks hari,

I have used use advice and modified code more, so i got this…

Object.keys(value).forEach(element => {
        console.log("data", element + " = " + value[element]);
// more stuff to do..

thanks again

1 Like