Read JSON from JavaScript in out put parameter?

I am calling API by JavaScript like see below


"
var request = new XMLHttpRequest()

request.open('GET', 'https://calendarific.com/api/v2/holidays?&api_key=563af....&country=IN&year=2019' true)
request.send()

request.onload = function() {
  // Begin accessing JSON data here
  var data = JSON.parse(this.response)

  if (request.status >= 200 && request.status < 400) {
 
  } else {   console.log('error')  }
}

How I can get json or string data in JavaScript output parameter?

I am always getting blank string in output parameter like

$parameter.Holidays = this.response;

Even this.response has json string, means getting result in response.

Kindly provide solution How I can read response in JavaScript out parameter?

Thanks


Hi Meer,

I think the problem is that the request.onload() is an asynchronic call, and the this.response is only available inside the anonymous function that's called on the request.onload(). Unfortunately I'm no JavaScript expert, nor a Mobile expert, so I'm not sure how this should be handled in the intended way.

@Meer, assuming you're using that JS snippet inside a JSNode, I'd like to point you to the following documentation https://success.outsystems.com/Documentation/11/Extensibility_and_Integration/JavaScript/Extend_Your_Mobile_App_Using_JavaScript/Defining_Asynchronous_JavaScript_Code


Which, in short, means that within the callback from your XHR onload, you would end up with something like the following: 

request.onload = function() {
    // Begin accessing JSON data here
    var data = JSON.parse(this.response)

    if (request.status >= 200 && request.status < 400) {
    $parameter.Holidays = this.response;
    } else {
        console.log('error');
    }

    $resolve(); // We need to call $resolve() in order to complete the asynchronous computation going on on this JSNode.
}


Hope this helps!


Cheers,

João Gonçalves

Kilian Hekhuis wrote:

Hi Meer,

I think the problem is that the request.onload() is an asynchronic call, and the this.response is only available inside the anonymous function that's called on the request.onload(). Unfortunately I'm no JavaScript expert, nor a Mobile expert, so I'm not sure how this should be handled in the intended way.

Ok great, I understood and satisfy with your comment if that is asynchronous.

Can you please let me know how I can pass data that I getting asynchronously to the input parameter of client action? so that I can call client action in load function and get the data.

OR

I was tried the same by REST API Outsystems

Working like: (without body)
https://calendarific.com/api/v2/holidays?&api_key=563afd670321687d49871c251225ee50b2b...&country=IN&year=2019

But not working
URL: https://calendarific.com/api/v2/holidays
Body:

{

    "api_key":"livekey",

    "country":"IN",
    "year":2019

}

Here showing error "Missing or invalid API key"

Can you please show the way how I can pass input parameter to REST API way and get the result.

 Thanks

João Gonçalves wrote:

@Meer, assuming you're using that JS snippet inside a JSNode, I'd like to point you to the following documentation https://success.outsystems.com/Documentation/11/Extensibility_and_Integration/JavaScript/Extend_Your_Mobile_App_Using_JavaScript/Defining_Asynchronous_JavaScript_Code


Which, in short, means that within the callback from your XHR onload, you would end up with something like the following: 

request.onload = function() {
    // Begin accessing JSON data here
    var data = JSON.parse(this.response)

    if (request.status >= 200 && request.status < 400) {
    $parameter.Holidays = this.response;
    } else {
        console.log('error');
    }

    $resolve(); // We need to call $resolve() in order to complete the asynchronous computation going on on this JSNode.
}


Hope this helps!


Cheers,

João Gonçalves

Hi Joao,
Greetings!

Now I have called the JS like below

var request = new XMLHttpRequest()
request.open('GET', 'https://calendarific.com/api/v2/holidays?&api_key=563afd670321687d49871c251225......&country=IN&year='+$parameters.Year, true)
request.send()

request.onload = function() {
 
  var data = JSON.parse(this.response)

  if (request.status >= 200 && request.status < 400) {
     
     $parameters.Holidays = this.response;
     $resolve();
     
  } else {
    console.log('error')
    $resolve();
  }
 
}

Even the result is getting same i.e. getting blank string in parameters.Holidays.

Solution

Meer Imtiyaz wrote:

What about the content of the response itself? Try to console.log both this.response and this.responseText within onload callback.


Nonetheless, the best way to integrate with a REST service is by using the proper means within the OutSystems platform instead of consuming those endpoints manually with XHR in JSNodes.

See: https://success.outsystems.com/Documentation/11/Extensibility_and_Integration/REST/Consume_REST_APIs

Solution

João Gonçalves wrote:

Meer Imtiyaz wrote:

What about the content of the response itself? Try to console.log both this.response and this.responseText within onload callback.


Nonetheless, the best way to integrate with a REST service is by using the proper means within the OutSystems platform instead of consuming those endpoints manually with XHR in JSNodes.

See: https://success.outsystems.com/Documentation/11/Extensibility_and_Integration/REST/Consume_REST_APIs

Hi Joao,

Thanks for your reply.

What about the content of the response itself? Try to console.log both this.response and this.responseText within onload callback.

I have check  response with log and alert popup so it has JSON data.

Nonetheless, the best way to integrate with a REST service is by using the proper means within the OutSystems platform instead of consuming those endpoints manually with XHR in JSNodes.

I have used the this way also but body request not accepting the there show "Missing or invalid API".


But I have got the result like wise I added one input parameter at the end of URL and passing this value from where API calling 

https://calendarific.com/api/v2/holidays?&api_key=563afd670321687d49871c251225ee50b2b0ca8f&country=IN&year={Year}



Thanks for all support to resolve my query.

Hi Meer,

Could you mark Joao's answer as Solution? Thanks.