Help using the Flarum API in Ionic 3 app

abhishek

can anybody help me to implement the api into Ionic 3 mobile app. I am tryinh this but it was giving no response in my mobile app.

clarkwinkelmann

abhishek I moved your post to a new discussion and deleted your two other posts in the other discussions. Next time please observe our community guidelines:

Don’t post repeatedly about the same topic

Regarding your issue, what code are you using to call the API ? If there is no response, there certainly is an error or status code you can share with us ?

abhishek

clarkwinkelmann i got following reply
{"isScalar": false, "source":{"isScalar": false}, "operator": ()}

I am using this api request for testing
https://discuss.flarum.org/api/discussions?filter[q]=tag:dev

if this will work then i will start using my own api request toimplement in my mobile app

clarkwinkelmann

abhishek what code do you use to make the request ?

What is your "reply" ? It isn't valid JSON, and doesn't look like a javascript object dump either. Is it the console.log() of something ?

abhishek

clarkwinkelmann I am using httprequest for fetching data.
Code is as follow:
this.http.get("https://discuss.flarum.org/api/discussions?filter[q]=tag:dev").map(res => res.json());

Other api request other than flarum are working fine with this method.

anything else we have to use for getting data.
Aslo we need to autheticate use before getting data from api.

clarkwinkelmann

abhishek how did you get the "reply" above, where did you put a breakpoint or console log ? Are you sure you copied the dump of the response and not of the promise object or something like that ? Do you see the request done successfully in the network tab ?

abhishek

clarkwinkelmann Actually i alert the response. If we have to implement api into Ionic 3 the what steps that we have to follow?

clarkwinkelmann

abhishek the only line of code you have shared so far sounds good. We need more details on how you're implementing it and what you receive to troubleshoot it.

What does the network tab say ? Did you actually alert the result via something like .subscribe(data => alert(data)) ? Assuming this is the Angular HTTP client ?

This request doesn't require authentication so it should work. However beware of cross-origin requests. Are you testing in an environment where you manually allowed your app to access discuss.flarum.org ?

abhishek

clarkwinkelmann actually we implemented our own flarum set up and that we want to implement it in our app.
I tested the reply on emulator so there is no any network tab and all. we jsut alert the response with JSON.parse(data);

I just implented this code for fetching the data from api. Just implemented this line of code but no getting reply.

clarkwinkelmann

abhishek I'm sorry but that's not enough information for me to help... Can you log the response HTTP code ? Can you see any header ? What if you test the app on the browser platform instead of the emulator ? Can you check the Apache/Nginx access log files on your Flarum to make sure the request went through ? Can you show the full code you use to alert the empty data ? How did you configure CORS (in your app or on the Flarum server) or did you correctly whitelist the domain (I'm not sure how you allow access to urls in ionic) ?

Give us as many details as you can. Ideally something I can reproduce on my side but I suppose this will not be easy.

If you can access your Flarum directly, then it should be configured correctly and there is never a blank response from the API. If there's an error there should be a JSON object with an error message.

EDIT:

A quick search seems to confirm my suspicion that your "reply" above is the console.log of an observable object, not its value... Can you get the actual response by subscribing to the observable and logging the value from there ?

abhishek

clarkwinkelmann Ok. SO actually in my application i want to show some discussion topics list. For that I want o fetch that discussion topics related to tag from api. For flarum we areusing following link for api
https://qnatest.cardiovisual.com/api/discussions?filter[q]=tag:stroke

After putting this link on browser iside data uwill get nothig as compared to following link
https://discuss.flarum.org/api/discussions?filter[q]=tag:dev

So in my application i am putting following logic:
On a button click, fetch data from api and display it.

So now my questions are

is there any user authentication required for fetching data from api?
Also need to do any setting or activate any plugin s o that data will be get populated in api?
In Ionic, how to fetch the data from flarum api? any example that you can share or any document or anything related to this?

I am new in both Ionic and flarum so the questions that are asked by you, may be not anserable by me?
Also is that will be appreciable if you guide me for this?

Again thanks for the help that you provide me before.

Waiting for your positive reply..

clarkwinkelmann

abhishek nothing special should be required to fetch that data. If guests can see the data, then you can also get it via the API without authentication.

The only thing I can see going wrong here is not using the observable-based http requests correctly. Can you share your full code that fetches the data from the API and uses it or logs it ?

It should be as simple as something like (pseudo code) http.get(discussion api url).map(res => res.json).subscribe(res => { this.discussions = res.data })

It's a bit more complex if you want to handle pagination, but maybe you can find a library for Angular that supports the pagination according to json:api spec (Flarum is using that standard for JSON structure)

I can't think of any Angular/Ionic example that uses the Flarum API sadly.

abhishek

clarkwinkelmann hi code i written is as follows,
on button click
getDiscussion(){
this.httpservice.getDiscussData().subscribe(data => {
alert('response = '+JSON.stringify(JSON.parse(data)));
});
}

getDiscussData(){
var response = this.http.get("https://discuss.flarum.org/api/discussions?filter[q]=tag:dev").map(res => res.json());
alert(JSON.stringify(response));
return response;
}

so this is code that iam wirrten for my app to fetch data from api

clarkwinkelmann

abhishek okay I notice two things:

The alert(JSON.stringify(response)); doesn't alert the response, it alerts the observable, and does so before it's even resolved. So the data alerted is expected, it's the dump of the observable.
The JSON.parse(data) should probably be removed because data was already parsed in the map() call in getDiscussData

Does the alert in getDiscussion get triggered? What does it show?

abhishek

clarkwinkelmann no. alert in getdiscussion is not get triggered.

clarkwinkelmann

abhishek can you try again after replacing JSON.stringify(JSON.parse(data)) with just JSON.stringify(data) ? If you don't get an alert this probably means there's a javascript error happening. Maybe you could also define an error handle in the subscribe call or wrap everything in try/catch blocks so you have a way of seeing the errors.

Also I'm pretty sure you could work on the browser platform, which would allow you to debug the code more easily via Chrome web tools ? Any javascript error would be clearly visible in the Chrome console.

abhishek

clarkwinkelmann hi I follow the things that you mention. But still not get any data.
Actully in browser when i put this url
https://qnatest.cardiovisual.com/api/discussions?filter[q]=tag:treatment

I will not get data. So ois there any setting or anything to get active data from Admin on Flarum.

clarkwinkelmann

abhishek oh okay so your data isn't visible to guests.

You either need to make it accessible to guests, or use authentication with a user allowed to see it. How to pass the correct authentication header is shown here https://discuss.flarum.org/d/9107-using-the-api/3

If you're embedding the user token in the app, make sure it's well locked down and can't be used for anything else, because users can use this token to make any action the user can do via the interface. If your app is publicly downloadable, I'd suggest making the data accessible from guests, or create another PHP script (or a Flarum extension), that will list just this latest data without authentication, by actually doing the authenticated request behind the scene. Or if your app is paid or protected, use a token from the app to authenticate to that script, then let the script relay the data from Flarum with the Flarum auth token.

I hope this explains it.

I'm still not sure what you mean by no data. Can you clarify each time whether no alert appears or whether it appears and confirms you don't get any data ? If there's no modal, you'll need to dig in the debugging tools you have to find which part of the code errors.

clarkwinkelmann

As said before 👇️

clarkwinkelmann How to pass the correct authentication header is shown here https://discuss.flarum.org/d/9107-using-the-api/3

If it's not working, show us how you tried adding the headers.

Please try to be as clear as possible with your description of responses. You probably mean you get a successful response in json containing an empty result list, not an actual blank (completely empty) response ?