How to print angular object in angular 4

Question

How to print json value, I am very basic like angular, please some one help me.

test.html

{{ projects }}
<li *ngFor="let obj of projects">{{obj | json }}</li>

services.ts

getProjects(): Promise<Addtimesheet[]> {
    return this.http.get("http://192.168.1.90/EMS/api/TimeSheetAPI/getProjects")
      .toPromise()
      .then(this.extractData)
      .catch(this.handleError);
  }
  private extractData(res: Response) {
    let body = res.json();
    console.log("Sdfsdfsdfsd sss");
    console.log(body);
    return body;
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }

component.ts

import { Component, OnInit } from '@angular/core';
import { Addtimesheet } from './addtimesheet';

import { TimesheetService } from './timesheet.service';

import { Projects } from './projects';

@Component({
  selector: 'app-timesheet',
  templateUrl: './timesheet.component.html',
  styleUrls: ['./timesheet.component.css'],
  providers: [TimesheetService]
})
export class TimesheetComponent implements OnInit {

  timesheet = {};
  today: any;

  private projects: Projects[] = [];
  private errorMessage: any = '';

  constructor(private timesheetService: TimesheetService) { 
  }

  ngOnInit() {
    this.timesheetService.getProjects()
    .then(projects => this.projects = projects)
    console.log(this.timesheetService.getProjects());
  }
}

json value

[
    "AESEMS",
    "ChainDrive",
    "CICAND",
    "CICAPI",
    "CICiOS",
    "CICWeb",
    "KC_APPTV",
    "KCMagento",
    "RDLSWeb",
    "Riddles",
    "TB",
    "TBAND",
    "TBiOS",
    "TestProject"
]

I tried, ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Showing kind of error.

Maybe the backend is unexpectedly not sending a promise: In your service, extractData method, what does Array.isArray(body) say? Also, maybe your client is messing with you. Are you using HttpClient or Http in your service? If HttpClient, it should already give you JSON (although it doesn't look like it in your code). — Zlatko
– Zlatko, Commented Dec 29, 2017 at 12:12
really sounds to me that you are not getting an array. Please check the response tab in dev tools and copy paste that to your question :) — AVJT82
– AVJT82, Commented Dec 30, 2017 at 12:37

Brugolo · Accepted Answer · 2019-03-15 08:56:31Z

38

To print JSON:

<pre> 
  <code>
     {{ obj | json }}
  </code>
</pre>

Or to print it out to console:

console.log(JSON.stringify(obj));

edited Mar 15, 2019 at 8:56

Brugolo

5,1533 gold badges25 silver badges14 bronze badges

answered Dec 29, 2017 at 10:59

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

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

3 Comments

Sastha Over a year ago

showing same error. ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Michael Kang Over a year ago

doesn't seem like a JSON obj... can you output to console to see what type of object it is?

Sastha Over a year ago

This value [ "AESEMS", "ChainDrive", "CICAND", "CICAPI", "CICiOS", "CICWeb", "KC_APPTV", "KCMagento", "RDLSWeb", "Riddles", "TB", "TBAND", "TBiOS", "TestProject" ]

Ajay · Accepted Answer · 2017-12-29 13:28:05Z

0

Considering

projects = [ "AESEMS", "ChainDrive", "CICAND", "CICAPI", "CICiOS", "CICWeb", "KC_APPTV", "KCMagento", "RDLSWeb", "Riddles", "TB", "TBAND", "TBiOS", "TestProject" ]

To output the JSON array as it is

[ {{projects}} ]

To output value one after another

<ul>
  <li *ngFor="let project of projects"> 
     {{project}}
  </li>
</ul>

I hope it helps.

answered Dec 29, 2017 at 13:28

Ajay

5,0013 gold badges28 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to print angular object in angular 4

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related