Angular seeing JSON as string and not object

Question

I am returning JSON from restful API

getUsers() {
    return this.http.get('https://myAPI.net/api/TAFGetAllUsers/0')
  }

which is called in

users: object;
ngOnInit() {
    this.data.getUsers().subscribe(data => {
      this.users = data
      console.log(this.users)
    })
  }

However, the console output is plain JSON text:

{   "Users": [
    {
      "UserId": "4B4D1C12-48FD-4C1D-91F7-03C18FEC8B86",
      "UserTypeId": 1,
      "Name": "Tommy",
      "EmailAddress": "[email protected]",
      "DateCreated": "2019-03-22T09:28:04.553"
    },
    {
      "UserId": "232D7596-3DD8-40A1-B4B0-15A54A6A102A",
      "UserTypeId": 3,
      "Name": "Alexis",
      "CompanyName": "Sony",
      "EmailAddress": "[email protected]",
      "DateCreated": "2019-03-20T11:53:53.360"
    },
    {
      "UserId": "1BB22695-1B4D-4E42-8A95-16D1E9B1EF59",
      "UserTypeId": 3,
      "Name": "Richard",
      "CompanyName": "Microsoft",
      "EmailAddress": "[email protected]",
      "DateCreated": "2019-03-20T13:57:22.183"
    }   ] }

It isn't seen as an object. If I do

data[0]

it just returns '['

Also if I do

data.Users

it returns "undefined".

I'm unable to directly do

 JSON.parse(data)

as it sees data as an object, giving an error of "Argument of type 'Object' is not assignable to parameter of type 'string'"

I've tried converting the data object to string then parse to JSON

 this.rawUsers = JSON.stringify(data);

 this.users = JSON.parse(this.rawUsers);

But this outputs the same as the default data value, acting like a string.

what version of Angular do you use (Http or HttpClient for request)? — Vadim
– Vadim, Commented Sep 25, 2019 at 11:07
@BahadorRaghibizadeh Doing data.Users is always undefined as it doesn't seem to recognize data as a JSON object. — Vereonix
– Vereonix, Commented Sep 25, 2019 at 11:10
What are the HTTP response headers? And specifically Content-Type? — mbojko
– mbojko, Commented Sep 25, 2019 at 11:40

StepUp · Accepted Answer · 2019-09-25 11:20:46Z

2

You have the following structure of object:

{ "Users": [ ] }

So you should write like that to get an array of your users:

this.data.getUsers().subscribe(data => {
  if (data && data.Users) {
      this.users = data.Users;
      console.log(this.users);
  } else {
      console.log(data);
  }

})

UPDATE:

This line of code throws an error this.rawUsers = JSON.stringify(data); because your data is already json object. Because

JSON is an assumed default and no longer needs to be explicitly parsed

See Difference between HTTP and HTTPClient in angular 4?

edited Sep 25, 2019 at 11:20

answered Sep 25, 2019 at 10:53

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

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

3 Comments

Vereonix Over a year ago

Doing data.Users is always undefined as it doesn't seem to recognize data as a JSON object.

Vereonix Over a year ago

yeah, stringify was a throwing stuff at the wall atempt to get it working, your suggested solution still displays the data as a string and doing ".Users" is always seen as undefined

StepUp Over a year ago

@Vereonix do you mean that your code always gets into else statement? else { console.log(data); }?

mbojko · Accepted Answer · 2019-09-25 11:43:55Z

1

I'm unable to directly do JSON.parse(data) as it sees data as an object, giving an error of "Argument of type 'Object' is not assignable to parameter of type 'string'"

That can be fixed with type assertion:

JSON.parse(data as string)

and if that still throws an error,

JSON.parse(data as any as string)

(Not the most elegant workaround, but should work).

answered Sep 25, 2019 at 11:43

mbojko

14.8k2 gold badges21 silver badges28 bronze badges

2 Comments

mbojko Over a year ago

You're welcome. But I'd still look at the response headers, something must be causing Angular interpreting the response as a text string, and I suspect it's the headers.

Vereonix Over a year ago

I tried adding "{headers: {'Content-Type':'application/json'}}" to the http.get() though this results in the angular app in browser only displaying "Cannot GET /" and a 404 error in console

Shafeeq Mohammed · Accepted Answer · 2019-09-25 11:38:47Z

0

use this:

this.users = data.Users;

Stackbliz Example

edited Sep 25, 2019 at 11:38

answered Sep 25, 2019 at 11:32

Shafeeq Mohammed

1,3081 gold badge18 silver badges28 bronze badges

Comments

rafi muhammad · Accepted Answer · 2019-09-25 11:17:44Z

-1

You can use like below:

JSON.parse(JSON.stringify(data));

Hope this will help you.

answered Sep 25, 2019 at 11:17

rafi muhammad

1922 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angular seeing JSON as string and not object

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related