Getting and displaying data using an API

Ionic Framework ionic-v3
1

Hi,
I have an API where i get data and load unto my ionic app. I have gotten the data in json format and am having troubles displaying, I have tried the *ngFor and yet can’t get it right.
The data is in the format

{status: “success”, data: {0: {}, rides: [,…], message: “I got here successfully”}}

it’s an array.
Then the ts is;

this.service.load().then( results => {
this.rides = results.data

})

and HTML

{{ ride.origin }}

for instance

from *ngFor=“let ride of rides” in ion-item

I don’t know where am getting it wrong.

2

you need to convert it to an object to iterate over it

this.rides = JSON.parse(results.data)
3

Thanks when I do that I get this error: Uncaught (in promise): SyntaxError: Unexpected token o in JSON at position 1.
How do I handle this?

4

what does the json data look like?

5

This is the json data i return from the server

6

{status: “success”, data: {0: {}, rides: [,…], message: “I got here successfully”}}

7

yep… bad json

json is text and each element needs quotes, all names, and all text… sometimes number and booleans can be without quotes

this would be valid json

{
	"status": "success",
	"data": {
		"0": {},
		"rides": [],
		"message": "I got here successfully"
	}
}

I use this site to validate json documents
https://codebeautify.org/jsonvalidator

8

OK, so how do convert it to the right format?
More so, this section “0”: {}, is completely not need. How do I remove it completely?

9

typically you have to fix the server side to send it correctly… else you have a mess…

usually its easier to ignore stuff you don’t need right now, than to try to edit it out each time…
or again, fix the server side to not send it

10

Am not sending that from the server, The only thing i return is The array and the message to make sure it returns data. the 0 : { }, is completely strange.
There is another request I make to the server and it returns an object alongside that. It’s really getting me frustrated

11

the http request returns a structure

{
“status”: "http_request_status ",
“data”: {data from the server response }
}

I would look at the results object structure,

console.log(“results=”+JSON.stringify(results));

12

When I stringify the results, I can pass it to my console but it’s in the same format. I want to get a particular object like rides and display that data in my front end.

13

yes, I was just using stringify to teach you how the structure looks.
you need to convert it to an object… the ngModel and ngIf stuff works on objects, not strings.

but you have to get it into a valid json format to use the json library, or you have to write code to parse it yourself (don’t do that!)

14

From the last response you gave, The results are now in this format. I want to map out only thr rides section of it. How do i go about that?

Previously what i do is
this.rides = results.rides
and this maps it out. In this case, it doesn’t work

15

ok, rides is an empty array, so there is nothing to display

what would one of the ride entries look like?

but the code would be

an example from my app

<ion-row  *ngFor="let tag of data.Tags">
...
</ion-row>

you could do the same if u parsed the whole data object

this.data= JSON.parse(results.data)

<ion-row  *ngFor="let ride of data.rides>
...
</ion-row>
16

The rides array looks like this.

{id: 2, user_id: 1, uniqid: "id", origin: "Somewhere", destination: "Somewhere", price: "amount",…}
17

This error SyntaxError: Unexpected end of JSON input persist

18

yep same problem, no quotes

{
"id": 2, 
"user_id": 1, 
"uniqid": "id", 
"origin": "Somewhere", 
"destination": "Somewhere", 
"price": amount 12.34 (for example)
...
}
1 Like
19

Now am frustrated the more. Don’t know where to start again.

20

Need to fix the server again. What is it written in? JavaScript?

1 Like