How to read [object object] using angular-2


I was trying to read the json file in my application, but it only shows me: “[object object]”

This is the json file:

    "product": "URL shortener",
    "version": "m1",
    "error": "false",
    "time": "false",
    "domin": "",
    "code": "SLnH/",
    "shortUrl": "",
    "longUrl": "test"

in home.html:

  <ion-list  >
    <ion-item text-wrap *ngFor="let item of jsonData">
      <p>{{item}} </p> 

But unfortunately this result:

All I want is: to show the information in the json file


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

import { NavController, LoadingController } from 'ionic-angular';
import {HttpProvider} from '../../providers/http-provider';

  selector: 'page-home',
  templateUrl: 'home.html',
export class HomePage {

  jsonData: any;
  loading: any;

  constructor(public navCtrl: NavController, private httpProvider:HttpProvider,public loadingCtrl: LoadingController) {

    this.loading = this.loadingCtrl.create({
      content: `
      <ion-spinner ></ion-spinner>`


      result => {
        console.log("Success : "+this.jsonData); 
      err =>{
        console.error("Error : "+err);
      } ,
      () => {
        console.log('getData completed');


Ionic List from Object

@el0zahaby It’s calling the toString() method of the object and printing [object object]. Try to use the Angular2 json pipe to display the contents:

<p>{{ item | json }}</p>


But the json file will be plain text, and I will not be able to read it in a list!

I mean I want to read it as follows:

  <ion-list  >
    <ion-item text-wrap *ngFor="let item of jsonData"  >
      <p  >{{ item.product }} </p> 
      <p  >{{ item.version }} </p> 
      <p  >{{ item.error }} </p> 
      <p  >{{ etc.. }} </p> 

But I do not know how !


@el0zahaby You must convert from json string to a javascript object first:

export class MyPage {

	public jsonObject: any;

	private retrieveJson() {
		let jsonData: string = this.myService.getJsonString();
		this.jsonObject = JSON.parse(jsonData);

and then:

<ion-item text-wrap *ngFor="let item of jsonObject" >

A better approach is convert to an object in the service itself. If you are doing an http request you can do something like:


public myServiceMethod(): Observable<MyObject> {
	return this.http.get('[url]').map(
		res => res.json() // Transform the JSON string in an object


private retrieveJson() {
		jsonObject => this.jsonObject = jsonObject


Now that I’ve seen you updated code, I don’t know what your method httpProvider.getJsonData() does, but I think that you should do what I explained above about the http call (converting the string to an object)


Please post your HttpProvider.

You have one very serious problem with your code, and a couple of things that you really should fix as well.

  • Don’t use any. Define interfaces and use them.
  • Get rid of the providers on your components. They cause needless instantiation of multiple providers.

Now for the big one: never store loading indicators in object properties. Always make them lexically scoped. This guards against bugs like the one you have here. Call getdata() twice, and your app will crash.


HttpProvider is :http-provider.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

  Generated class for the HttpProvider provider.

  for more info on providers and Angular 2 DI.

export class HttpProvider {

  constructor(public http: Http) {
    console.log('Hello HttpProvider Provider');

    return this.http.get('http://URL_TO_JSON_FILE').map(res => res.json());



Then your proposed <p>{{item.product}}</p> should work.


The solution has been solved :slight_smile: Thanks a lot
html code:

<ion-content padding>
  <ion-list *ngFor="let item of jsonData"  >
    <ion-item text-wrap  >
      <p>{{ item.product}}</p> 
    <ion-item text-wrap  >
      <p>{{ item.error}}</p> 
    <ion-item text-wrap  >
      <p>{{ item.etc}}</p>