Using a Third Party API with Wix fetch

Ask the community
, ,
12

Hi Yisrael and Luan,

Thank you for the kind help,

In regards to your comment, Yisrael,

I haven’t been able to have the call as a url, since I cannot figure out how to include the Authorization header inside the call.

I got the sample response from their website in the following “Try it out!” input form.

1127×967 98.1 KB

I did reach out to the software provider and they recommended this Stackoverflow article , as well as the following recommended format for making the call in javascript:

$http.get('https://api2.vcita.com/v2/appointments?updated_since=2013-04-03T00:00:00.000+8:00&updated_until=2017-04-03T00:00:00.000+8:00, { headers: {'Authorization': 'XXXXXXXXXXXXXXXXXXXX'} });

When I log (call, options) as Luan suggested, I get:

{"url":"https://api2.vcita.com/v2/appointments?updated_since=2018-06-05T00:00:00.000+8:00&updated_until=2018-06-13T00:00:00.000+8:00"} {"method":"get","headers":{"Authorization":"XXXXXXXXXXXXXXXXXXX"}}

This is the software providers’ website for this API: http://developers.vcita.com/docs/v2appointments

In regards to your comment, Luan,

I did integrate an options field here in my following new code, however it still gives me “Fetch did not succeed”.

import {fetch} from 'wix-fetch';  

export function box65_click(event, $w){

function formatDate(date) {
 var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

 if (month.length < 2) month = '0' + month;
 if (day.length < 2) day = '0' + day;

 return [year, month, day].join('-');
}

//export function makeCall (updated_since, updated_until) {
var updated_until = formatDate($w("#datePicker6").value);
var updated_since = formatDate($w("#datePicker5").value);
 

const call = {
  url: 'https://api2.vcita.com/v2/appointments'+'?'+'updated_since'+'='+ updated_since +'T00:00:00.000+8:00'+'&'+'updated_until'+'='+ updated_until + 'T00:00:00.000+8:00',
}

const options = {
      method: 'get',
      headers: {
 'Authorization': "24d4bcf9a068f4c0b7669cfa60219626"},
}
 
            console.log(call, options);
 
return fetch(call, options)
.then( (httpResponse) => {
 //let unavStaff = httpResponse.staff_id;
 if (httpResponse.ok) {
 return httpResponse.json();
    }
 else {
 return Promise.reject("Fetch did not succeed");
    }
  } )
  .then( (json) => {
    console.log(json.staff_id);
  } )
  .catch( (err) => {
    console.log(err);
  } );


//.then(response => console.log(response.json.staff_id));
 
 //.then(response => response.json())
 //.then(json => json.staff_id)
 

}

Thanks for your code Luan, I did look into it, however, some values in my code depend on date pickers and it all has to be triggered on an .onClick event in my scenario, thus I couldn’t implement it for this specific function, however I will use it on another project while working with Stripe, Thank you so much!!

Thanks for all of your comments, I am still having issues with this feature, I appreciate very much all of your help and suggestions,

Thanks again!

Sincerely,
Nicolas Garza