iterate an indexed object in angular

Question

I have an object in my front and I need to iterate it over an ngFor. The thing is that the response of the backend is an object as follows:

@Component({
  selector: 'docker-logs',
  templateUrl: './docker-logs.component.html',
  styleUrls: ['./docker-logs.component.scss']
})
export class DockerLogsComponent implements OnInit, OnDestroy {
  @Input() deviceId
  dockerlogs: any;

constructor() { this.dockerlogs = Object.keys(this.dockerlogs)}

private getDeviceDockerLogs(): void {
    this.appManagementService.getDeviceDockerLogs(this.deviceId).then(response => {
      this.dockerlogsErrorMessage = null;
      this.dockerlogs = response;
    }).catch(() => {
      this.dockerlogsErrorMessage = "Oops, could not get any device logs.";
    });
  }

}

console.log of the response is as follows

this.dockerlogs = {
0: "[ 2020-03-20 13:12:07 ] Preparing to unpack .../libgdbm3_1.8.3-13.1_amd64.deb ..."
1: "[ 2020-03-20 13:12:07 ] Unpacking libgdbm3:amd64 (1.8.3-13.1) ..."
2: "[ 2020-03-20 13:12:07 ] Selecting previously unselected package sgml-base."
3: "[ 2020-03-20 13:12:07 ] Preparing to unpack .../sgml-base_1.26+nmu4ubuntu1_all.deb ..."
4: "[ 2020-03-20 13:12:07 ] Unpacking sgml-base (1.26+nmu4ubuntu1) ..."
5: "[ 2020-03-20 13:12:07 ] Selecting previously unselected package perl-modules-5.22."
6: "[ 2020-03-20 13:12:07 ] Preparing to unpack .../perl-modules-5.22_5.22.1-9ubuntu0.6_all.deb ..."
7: "[ 2020-03-20 13:12:07 ] Unpacking perl-modules-5.22 (5.22.1-9ubuntu0.6) ..."
8: "[ 2020-03-20 13:12:08 ] Selecting previously unselected package libperl5.22:amd64."
9: "[ 2020-03-20 13:12:08 ] Preparing to unpack .../libperl5.22_5.22.1-9ubuntu0.6_
.
.
.
99: "[ 2020-03-20 13:12:12 ] ready ..."


}

I need to print all this logs inside a div in my component but this.dockerlogs = Object.keys(this.dockerlogs) doesn't seem to work.

my html:


<div class="logs">
    <div class="logWrapper">
      <!-- <p [innerHTML]="dockerlogs"></p> -->
      <div *ngFor="let log of dockerLogs">
        <p>{{log}}</p>
      </div>
    </div>
  </div>

can you at least paste some resembling JSON? And how do you want to use that JSON? — riazosama, Mar 20 '20 at 21:44
That'a the json I obtain as response of my backend. Numbers as keys and the strings are logs from an mqtt server. — novita, Mar 20 '20 at 21:56
https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor — xdeepakv, Mar 20 '20 at 22:05
Are the keys the strings "0", "1", etc? JSON doesn't allow numerical keys. — Clinton Curry, Mar 20 '20 at 22:05

score 0 · Answer 1 · answered Mar 20 '20 at 22:05

What you can do is convert your object into Array using Object.values

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";

  dockerlogs = {
    0: "string",
    1: "string",
    2: "string",
    3: "string",
    4: "string",
    5: "string",
    6: "string",
    7: "string",
    8: "string",
    300: "string"
  };

  constructor() {
    this.dockerlogs = Object.values(this.dockerlogs);
  }

}

And in your HTML file:

<p *ngFor="let v of dockerlogs">
  {{v}}
</p>

ruth · Accepted Answer · 2020-03-21T21:27:46.210

Looking at the object, I am presuming it actually looks like the following

dockerlogs = {
  '0': '[ 2020-03-20 13:12:07 ] Preparing to unpack .../libgdbm3_1.8.3-13.1_amd64.deb ...',
  '1': '[ 2020-03-20 13:12:07 ] Unpacking libgdbm3:amd64 (1.8.3-13.1) ...',
  '2': '[ 2020-03-20 13:12:07 ] Selecting previously unselected package sgml-base.',
  '3': '[ 2020-03-20 13:12:07 ] Preparing to unpack .../sgml-base_1.26+nmu4ubuntu1_all.deb ...',
  '4': '[ 2020-03-20 13:12:07 ] Unpacking sgml-base (1.26+nmu4ubuntu1) ...',
  '5': '[ 2020-03-20 13:12:07 ] Selecting previously unselected package perl-modules-5.22.',
  '6': '[ 2020-03-20 13:12:07 ] Preparing to unpack .../perl-modules-5.22_5.22.1-9ubuntu0.6_all.deb ...',
  '7': '[ 2020-03-20 13:12:07 ] Unpacking perl-modules-5.22 (5.22.1-9ubuntu0.6) ...',
  '8': '[ 2020-03-20 13:12:08 ] Selecting previously unselected package libperl5.22:amd64.',
  '9': '[ 2020-03-20 13:12:08 ] Preparing to unpack .../libperl5.22_5.22.1-9ubuntu0.6_'
}

In that case you could use the keyvalue pipe to print the log values. Try the following

<div *ngFor="let log of dockerlogs | keyvalue">
  {{ log.value }}
</div>

Here log.key and log.value contains the respective keys and values.

Working example: Stackblitz

iterate an indexed object in angular

2 Answers2