How to print JSON Object or Convert it to an Array

Ionic Framework ionic-v3
1

I am getting the following JSON from the restful provider I built to talk to my API server. Im usign Ionic 3…
{
“OCIReturn”: {
“@attributes”: {
“protocol”: “OCI”
},
“sessionId”: “9c94be6c9c3f5b99f01f04df09941659”,
“command”: {
“@attributes”: {
“echo”: “”
},
“defaultDomain”: “clt01.acndigital.net”,
“userLimit”: “4”,
“userCount”: “1”,
“groupName”: “ACN NetEng”,
“callingLineIdName”: “ACN Provisioning”,
“timeZone”: “America/New_York”,
“timeZoneDisplayName”: “(GMT-05:00) (US) Eastern Time”
}
}
}

ngFor cant iterate over it because its an Object.

image
image.png1374×420 92.6 KB

However when I print the different values to the console.log using standard iterative fashion it works. Why in the consle.log but not in the HTML? Whats the best way to deal with this?

users: Users = ;

constructor(public navCtrl: NavController, public restProvider: BwrestProvider) {
this.getUsers();
}

getUsers() {
this.restProvider.getUsers()
.then(data => {
this.users = (data);
console.log(this.users.OCIReturn.command.defaultDomain);
console.log(typeof data);

  });
}

}
image

notice the clt01.acndigital.net in the console.log.

getUsers() {
this.restProvider.getUsers()
.then(data => {
this.users = (data);
console.log(this.users.OCIReturn.command);
console.log(typeof data);

  });
}

}

image

why can I print out the Properties in the normal fashion inside the console.log statement but when I try to do so in HTML it doesn’t work. I assume I have to convert the Object to an Array but cant get that working correctly.

2

have you tried JSON.stringify()

1 Like
3

Yes I tried that as one of my first guesses but did not get the expected results.

Produced this error:

core.es5.js:1020 ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘command’ of undefined
TypeError: Cannot read property ‘command’ of undefined

from this code:

getUsers() {
this.restProvider.getUsers()
.then(data => {
this.users = JSON.stringify(data);
console.log(this.users.OCIReturn.command);
console.log(typeof data);

  });
}

the return is valid JSON when i validate with JSON Lint validator.

4

try this.

getUsers() {
this.restProvider.getUsers()
.then(data => {
this.users = JSON.parse(<string>data);
console.log(this.users.OCIReturn.command);
console.log(typeof data);
  });
}

and in html file if you want to see the json

<pre>{{ users | json}}</pre>
5

I get this…
Uncaught (in promise): SyntaxError: Unexpected token o in JSON at position 1 SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse () at http://localhost:8100/build/main.js:107:32 at t.invoke

Im thinking I might have to go back to my provider code and make a change there and not just in my about.ts? Here is my provider code.
constructor(public http: HttpClient) {
console.log(‘Hello RestProvider Provider’);
}

getUsers() {
return new Promise(resolve => {
this.http.get(this.apiUrl, {
headers: new HttpHeaders().set(‘X-DreamFactory-Api-Key’, ‘ABCDEFG…’),

  }).subscribe(data => {
    resolve(data);
  }, err => {
    console.log(err);
  });
});

}

6

I Just wanted to add this here, this thread was one of the dozen tabs i had open when troubleshooting a similar problem.

So I’ve compiled some notes in an answer over on Stack Exchange that might help others

7

Thanks for the reply,

I tried using JSON Stringify as well as the Pipe and it did not work for me. My issue seems to be that I have nested arrays inside my object and I still can not get into the @attributes data.
Notice in the Console when I print

image
image.png2716×776 176 KB

Notice the console log confirm its an object and then also noticed how there is an OCIReturn=>@attributes as well as command=>@attributes. I need the data inside command=>@attribute so ngFor can iterate over it.

However if I return data.OCIReturn as opposed to just data i get the error "can not stat ‘command’…

I think I may
have to go back to HTTPInterceptors ???

8

I can’t see any array into “command” attribute to iterate with a ngFor. Is it posible that you want get and print all attributes inside “command” attribute like a list?

Because if you want to do that. You can try getting all keys inside “command” attribute by using Object.keys(obj). It returns an Array with all keys inside an object. The you can use those keys to iterate and do anything that you want.

Anyway, your problem seems to be lack knowledge instead an Ionic’s issue.

9

I’m with a similar problem, could you solve it ?.
regards