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": "email1@pie.co.uk",
      "DateCreated": "2019-03-22T09:28:04.553"
    },
    {
      "UserId": "232D7596-3DD8-40A1-B4B0-15A54A6A102A",
      "UserTypeId": 3,
      "Name": "Alexis",
      "CompanyName": "Sony",
      "EmailAddress": "ds3@sony.com",
      "DateCreated": "2019-03-20T11:53:53.360"
    },
    {
      "UserId": "1BB22695-1B4D-4E42-8A95-16D1E9B1EF59",
      "UserTypeId": 3,
      "Name": "Richard",
      "CompanyName": "Microsoft",
      "EmailAddress": "email2@bob.com",
      "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)? — Vadi, Sep 25 '19 at 11:07
@BahadorRaghibizadeh Doing data.Users is always undefined as it doesn't seem to recognize data as a JSON object. — Vereonix, Sep 25 '19 at 11:10
What are the HTTP response headers? And specifically `Content-Type`? — mbojko, Sep 25 '19 at 11:40

StepUp · Answer 1 · 2019-09-25T11:20:46.437

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 '19 at 11:20

answered Sep 25 '19 at 10:53

StepUp

36,391
15
88
148

Doing data.Users is always undefined as it doesn't seem to recognize data as a JSON object. – Vereonix Sep 25 '19 at 11:09
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 – Vereonix Sep 25 '19 at 11:20
@Vereonix do you mean that your code always gets into `else` statement? `else { console.log(data); }`? – StepUp Sep 25 '19 at 11:23

score 1 · Accepted Answer · answered Sep 25 '19 at 11:43

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 '19 at 11:43

mbojko

13,503
1
16
26

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. – mbojko Sep 25 '19 at 11:54
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 – Vereonix Sep 25 '19 at 12:41

Shafeeq Mohammed · Answer 3 · 2019-09-25T11:38:47.393

0

use this:

this.users = data.Users;

Stackbliz Example

edited Sep 25 '19 at 11:38

answered Sep 25 '19 at 11:32

Shafeeq Mohammed

1,193
17
25

score -1 · Answer 4 · answered Sep 25 '19 at 11:17

-1

You can use like below:

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

Hope this will help you.

answered Sep 25 '19 at 11:17

rafi muhammad

194
2
11

Angular seeing JSON as string and not object

4 Answers4