Anyone have a working javascript/jquery example?

Hey fellow developers!

I was wondering if anyone managed to get a jQuery example for an API call working? I have a few app ideas I’d like to build, but I can’t seem to get a call to the Halo API working no matter what I do. It’s strange to me that there’s a jQuery example on the API documentation, if the example code doesn’t work.

I know there are Node, PHP, and other examples working, but I’d like my app to be usable in the browser. If anyone has any code snippets, a repo, or github gist I could see, I’d really appreciate it!

The API doesn’t support CORS (receiving requests from other domains) from what I’ve read. Take a look at https://www.halowaypoint.com/en-us/forums/01b3ca58f06c4bd4ad074d8794d2cf86/topics/api-support-javascript-web-app-w-o-server/31725b5c-c5a3-4180-a3ba-8672f9c38c1b/posts. Not sure if they plan to change this, but it would be logical since they provide sample javascript code.

I was encountering this issue as well. A possible workaround is to write a PHP script and use CURL to make the call.
This also allows you to keep your API key hidden :wink:

> $curl = curl_init(<em>API_ENDPOINT</em>);
>
> curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
> curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
> curl_setopt($curl, CURLOPT_ENCODING, “”);
> curl_setopt($curl, CURLOPT_HTTPHEADER, array(
> ‘Ocp-Apim-Subscription-Key: <em>YOUR_API_KEY</em>’
> ));
>
> $response = curl_exec($curl);
> if ($response === FALSE) {
> echo "cURL Error: " . curl_error($curl);
> die();
> }
> curl_close($curl);
> die($response);

And then call it

> $.ajax({
> url: “api.php”,
> type: “GET”,
> data:{
> url: <em>API_ENDPOINT</em>
> },
> dataType: “json”
> })
> .done(function(response) {
> // Handle Success
> })
> .fail(function(data) {
> // Handle Error
> });

this post helped me gain access to the api. had to create a php file and put it on my webserver and call that file from JS. one thing to note, in the example above, you need to add <?php ?> to the top and bottom of the code, as well as quotes around the api_endpoint references.

> <?php
> $curl = curl_init("<em>API_ENDPOINT"</em>);
> curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
> curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
> curl_setopt($curl, CURLOPT_ENCODING, “”);
> curl_setopt($curl, CURLOPT_HTTPHEADER, array(
> "Ocp-Apim-Subscription-Key: <em>YOUR_API_KEY"//just changed this to double quotes so it was easier to see</em>
> ));$response = curl_exec($curl);
> if ($response === FALSE) {
> echo "cURL Error: " . curl_error($curl);
> die();
> }
> curl_close($curl);
> die($response);
> ?>

Hi, Im trying out their sample js code and doesn’t seem like this has been addressed yet.

I “think” Im doing this right. I replaced the Ocp-Apim-Subscription-Key with my primary subscription key. Im then trying to do a get on a user’s emblem image.

https://www.haloapi.com/profile/h5/profiles/Major-Nelson/emblem

however the following error displays in the console. I opened up their html/js sample code and change the params first.

> Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access. The response had HTTP status code 404.

Anyone else have the js version working? Are there any suggestions that dont require using another programming language to make a call =) as it would just require another step. Hoping to have this fixed and it looks like it should be supported (according to their docs). Thanks guys!

> 2606994427156164;5:
> Hi, Im trying out their sample js code and doesn’t seem like this has been addressed yet.
>
> I “think” Im doing this right. I replaced the Ocp-Apim-Subscription-Key with my primary subscription key. Im then trying to do a get on a user’s emblem image.
>
> https://www.haloapi.com/profile/h5/profiles/Major-Nelson/emblem
>
> however the following error displays in the console. I opened up their html/js sample code and change the params first.
>
>
> > Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access. The response had HTTP status code 404.
>
>
> Anyone else have the js version working? Are there any suggestions that dont require using another programming language to make a call =) as it would just require another step. Hoping to have this fixed and it looks like it should be supported (according to their docs). Thanks guys!

not fixed yet, gotta use the php code above.

> 2533274813535985;3:
> I was encountering this issue as well. A possible workaround is to write a PHP script and use CURL to make the call.
> This also allows you to keep your API key hidden :wink:
>
>
> > $curl = curl_init(<em>API_ENDPOINT</em>);
> >
> > curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
> > curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
> > curl_setopt($curl, CURLOPT_ENCODING, “”);
> > curl_setopt($curl, CURLOPT_HTTPHEADER, array(
> > ‘Ocp-Apim-Subscription-Key: <em>YOUR_API_KEY</em>’
> > ));
> >
> > $response = curl_exec($curl);
> > if ($response === FALSE) {
> > echo "cURL Error: " . curl_error($curl);
> > die();
> > }
> > curl_close($curl);
> > die($response);
>
>
> And then call it
>
>
> > $.ajax({
> > url: “api.php”,
> > type: “GET”,
> > data:{
> > url: <em>API_ENDPOINT</em>
> > },
> > dataType: “json”
> > })
> > .done(function(response) {
> > // Handle Success
> > })
> > .fail(function(data) {
> > // Handle Error
> > });

I don’t understand how this works.

I have been trying all morning to make a successful API call using this method and it isn’t working- I have a few questions:

What is my API_ENDPOINT?
How do I include the information from the .php file into my javascript file?

I build my hackathon entry in Meteor, a full stack javascript platform. The full source code is available here: GitHub - rshurts/halo5-arena-analytics: Halo 5 API Hackathon Meteor application

Unfortunately, you need to make the API calls from the server and can’t just do client-side/browser calls. So you’re going to need some sort of backend to accomplish that. If you are interested in Meteor and going JS all the way through, feel free to crib some of the work I’ve done. I will warn you though, this was made in true hackathon fashion, I don’t do a very good job of error handling or logging. I should do a better job informing the user when something is happening behind the scenes and they have to wait. And there aren’t any tests.

> 2533274792439677;8:
> I build my hackathon entry in Meteor, a full stack javascript platform. The full source code is available here: GitHub - rshurts/halo5-arena-analytics: Halo 5 API Hackathon Meteor application
>
> Unfortunately, you need to make the API calls from the server and can’t just do client-side/browser calls. So you’re going to need some sort of backend to accomplish that. If you are interested in Meteor and going JS all the way through, feel free to crib some of the work I’ve done. I will warn you though, this was made in true hackathon fashion, I don’t do a very good job of error handling or logging. I should do a better job informing the user when something is happening behind the scenes and they have to wait. And there aren’t any tests.

First off- thanks for responding! I appreciate you taking the time to link me your repo.

I don’t have experience with Meteor but you’ve inspired me to check it out- I’m downloading it now. I ran this problem past one my instructors and he mentioned that you can make API calls on the backend. I never knew you could do that I’ve been learning JavaScript for less than a year -_- still noob’n it up. With this new knowledge and your help I’m using Express and Meteor today see if I can get something working and report back my progress.

Thanks again!

> 2533274822582749;7:
> What is my API_ENDPOINT?

API_ENDPOINT would be the endpoint of the api that you wish to query, such as:
https://www.haloapi.com/stats/h5/players/mattster092/matches

When you make an ajax call (the javascript portion of the code), the data parameter will get passed to the page you are posting to (in this case, api.php).
On the PHP side, you would retrieve this by:

> $apiUrl = isset($_REQUEST[“url”]) ? $_REQUEST[“url”] : null;
> $curl = curl_init($apiUrl);
> …

This will then return the API response to javascript in the ajax response.

> 2533274822582749;7:
> How do I include the information from the .php file into my javascript file?

In the chunk of code handling success, the response would be a json object. If you add “console.log(success);”, you should be able to inspect the response in the dev tools of your browser.

Hope that helps!

> 2533274813535985;10:
> > 2533274822582749;7:
> > What is my API_ENDPOINT?
>
>
> API_ENDPOINT would be the endpoint of the api that you wish to query, such as:
> https://www.haloapi.com/stats/h5/players/mattster092/matches
>
> When you make an ajax call (the javascript portion of the code), the data parameter will get passed to the page you are posting to (in this case, api.php).
> On the PHP side, you would retrieve this by:
>
>
> > $apiUrl = isset($_REQUEST[“url”]) ? $_REQUEST[“url”] : null;
> > $curl = curl_init($apiUrl);
> > …
>
>
> This will then return the API response to javascript in the ajax response.
>
>
>
>
> > 2533274822582749;7:
> > How do I include the information from the .php file into my javascript file?
>
>
> In the chunk of code handling success, the response would be a json object. If you add “console.log(success);”, you should be able to inspect the response in the dev tools of your browser.
>
> Hope that helps!

Thanks a lot for the clarification on all those points! I appreciate you taking the time to respond to my post. hysterio’s response (consider this the update of my progress) got me thinking- although I didn’t use Meteor I was able to get an API call working using Express. You may or may not be aware that using JavaScript you can’t ping the Halo API from the browser. If you’re interested here is my GitHub repository: GitHub - m00se333/haloApp: Halo App made using a lot of stuff

So what it does it it takes input from the index.html file, a player’s gamertag, and sends a POST request to my app.js file. From there the gamer tag becomes inserted as a query in a GET request to the Halo API and it gets a response! However, the only drawback is that the response comes back in the console, and I want to be able to access the response object to populate HTML in my index.html.

I must admit that I am not well versed in Node or Express and I’m at a loss as how I take the response and turn it into a object I can give back to my index.html file.

If you take a look and want to offer some feedback I’d be super stoked!

Thanks.