Issue with Angular 6: Textarea displaying value as Object Object

Question

I have data saved in local storage using JSON.stringify, and I want to display it in a textarea.

Here are the relevant code snippets:

{
  "name": "some name"
}

To retrieve the data, I'm using this:

this.mydata = localStorage.getItem('mydata');

The data is stored in localStorage under the key 'mydata'.

When I log this.mydata to the console, it displays as follows:

{
  "name": "some name"
}

Now, to display this data in a textarea, I'm using the following code:

this.con.nativeElement.value = JSON.parse(this.mydata);

However, when displayed in the textarea, it shows as:

[object Object]

What I actually want to see is:

{
    name: 'some name'
}

In my textarea, I've added the json pipe like this:

{{ thecontents | json }}

So theoretically, it should display the object properly.

How can I resolve this issue?

Answer 1

Answer №1

The reason for this issue is that you are trying to assign a JSON object to a text field instead of displaying the string value.

To resolve this, use the Json.stringify() method on your data and then pass the resulting string to your text field.

Answer 2

The reason for this issue is that you are trying to assign a JSON object to a text field instead of displaying the string value.

To resolve this, use the Json.stringify() method on your data and then pass the resulting string to your text field.

Answer 3

To properly handle the data,

const data = JSON.parse(localStorage.getItem('data'));

After parsing,

{{ data | json }}

Answer 4

To properly handle the data,

const data = JSON.parse(localStorage.getItem('data'));

After parsing,

{{ data | json }}