# How to read \[object object\] using angular-2

**URL:** <https://forum.ionicframework.com/t/how-to-read-object-object-using-angular-2/92833>\
**Category:** ionic-v3\
**Created:** [June 2, 2017, 5:38pm UTC](https://forum.ionicframework.com/t/how-to-read-object-object-using-angular-2/92833 "2017-06-02T17:38:33Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![el0zahaby](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/el0zahaby/32/110190_2.png) [@el0zahaby](https://forum.ionicframework.com/u/el0zahaby)\
**Post date:** [June 2, 2017, 5:38pm UTC](https://forum.ionicframework.com/t/how-to-read-object-object-using-angular-2/92833/1 "2017-06-02T17:38:33Z")

</div>

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

This is the **json** file:

```auto

[
  {
    "product": "URL shortener",
    "version": "m1",
    "error": "false",
    "time": "false",
    "domin": "https://goo.gl/",
    "code": "SLnH/",
    "shortUrl": "https://goo.gl/SLnH",
    "longUrl": "test"
  }
]

```

in **home.html** :

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

```

But unfortunately this result:

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/4/f/4f69161cb6dd27bd761e1ae0f76070d3f79776e3.png)

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

* * *

##updata:  
**home.ts:**

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

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers:[HttpProvider]
})
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>`
    });

    this.getdata();
  }

  getdata(){
    this.loading.present();
    this.httpProvider.getJsonData().subscribe(
      result => {
        this.jsonData=result; 
        console.log("Success : "+this.jsonData); 
      },
      err =>{
        console.error("Error : "+err);
      } ,
      () => {
        this.loading.dismiss();
        console.log('getData completed');
      }
    );
  }

}

```

---

<div class="post-metadata">

**Author:** ![lucasbasquerotto](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/lucasbasquerotto/32/101719_2.png) [@lucasbasquerotto](https://forum.ionicframework.com/u/lucasbasquerotto)\
**Post date:** [June 2, 2017, 5:59pm UTC](https://forum.ionicframework.com/t/how-to-read-object-object-using-angular-2/92833/2 "2017-06-02T17:59:01Z")

</div>

@el0zahaby It’s calling the `toString()` method of the object and printing `[object object]`. Try to use the [Angular2 json pipe](https://angular.io/docs/ts/latest/api/common/index/JsonPipe-pipe.html) to display the contents:

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

---

<div class="post-metadata">

**Author:** ![el0zahaby](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/el0zahaby/32/110190_2.png) [@el0zahaby](https://forum.ionicframework.com/u/el0zahaby)\
**Post date:** [June 2, 2017, 6:09pm UTC](https://forum.ionicframework.com/t/how-to-read-object-object-using-angular-2/92833/3 "2017-06-02T18:09:32Z")

</div>

> [@lucasbasquerotto](#):
>
> {{ item | json }}

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:

```auto
  <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> 
    </ion-item>

```

But I do not know how !

---

<div class="post-metadata">

**Author:** ![lucasbasquerotto](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/lucasbasquerotto/32/101719_2.png) [@lucasbasquerotto](https://forum.ionicframework.com/u/lucasbasquerotto)\
**Post date:** [June 2, 2017, 6:20pm UTC](https://forum.ionicframework.com/t/how-to-read-object-object-using-angular-2/92833/4 "2017-06-02T18:20:33Z")

</div>

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

```auto
@Component(...)
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:

_my.service.ts:_

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

```

_my.component.ts:_

```auto
private retrieveJson() {
	this.myService.myServiceMethod().subscribe(
		jsonObject => this.jsonObject = jsonObject
	);
}

```

## Update

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)

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [June 2, 2017, 7:54pm UTC](https://forum.ionicframework.com/t/how-to-read-object-object-using-angular-2/92833/5 "2017-06-02T19:54:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![el0zahaby](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/el0zahaby/32/110190_2.png) [@el0zahaby](https://forum.ionicframework.com/u/el0zahaby)\
**Post date:** [June 2, 2017, 8:17pm UTC](https://forum.ionicframework.com/t/how-to-read-object-object-using-angular-2/92833/6 "2017-06-02T20:17:00Z")

</div>

> [@rapropos](#):
>
> Please post your `HttpProvider`.

HttpProvider is : **http-provider.ts**

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

/*
  Generated class for the HttpProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/

@Injectable()
export class HttpProvider {

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

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

}
 

```

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [June 2, 2017, 8:19pm UTC](https://forum.ionicframework.com/t/how-to-read-object-object-using-angular-2/92833/7 "2017-06-02T20:19:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![el0zahaby](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/el0zahaby/32/110190_2.png) [@el0zahaby](https://forum.ionicframework.com/u/el0zahaby)\
**Post date:** [June 2, 2017, 8:29pm UTC](https://forum.ionicframework.com/t/how-to-read-object-object-using-angular-2/92833/8 "2017-06-02T20:29:42Z")

</div>

> [@rapropos](#):
>
> Then your proposed \<p\>{{item.product}}\</p\> should work.

The solution has been solved 🙂 Thanks a lot  
**html code:**

```auto

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

```

---

<div class="post-metadata">

**Author:** ![StarkN](https://avatars.discourse-cdn.com/v4/letter/s/4da419/32.png) [@StarkN](https://forum.ionicframework.com/u/StarkN)\
**Post date:** [August 13, 2019, 5:02am UTC](https://forum.ionicframework.com/t/how-to-read-object-object-using-angular-2/92833/9 "2019-08-13T05:02:51Z")

</div>

Like problème in Ionic 4 and the last method dont work in Ionic 4  
Helps me please

---

<div class="post-metadata">

**Author:** ![AbdulAzeez](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AbdulAzeez](https://forum.ionicframework.com/u/AbdulAzeez)\
**Post date:** [September 14, 2019, 8:47pm UTC](https://forum.ionicframework.com/t/how-to-read-object-object-using-angular-2/92833/10 "2019-09-14T20:47:34Z")

</div>

```auto
getQuestions(category) {
		return this.http
			.get(this.url + '&category=' + category + '&type=multiple')
			.pipe(catchError(this.errorHandler));
	}

Your service

Html: 

```

### {{ question.results[0].question | json }}
``` ```

components.ts

```auto
ionViewWillEnter() {
		this.quizService.getQuestions(this.category).subscribe(
			data => {
				this.question = data;
				console.log(this.question);
			},
			err => {
				console.log(err.message);
			}
		);
	}

```