how to fetch data from an API and render experience which contain response of the API

Hi,

I have an use case in which i need to fetch data from an API and render experience which contain response of the API

For accomplishing above scenario i am using usign DTM and adobe target.

1. i have created a data element using custom script which contain XMLHttpRequest
2. i have created a page load rule which triggers on dom ready from where i am passing value as a mbox global parameter to adobe target
3. i am using mbox global parmeter in adobe target and rendering experience.

After page load everything works fine in console but i'm getting response as empty string in adobe experience cloud debugger.

Can any one let me know where i am going wrong?

Below is the custom script code for data element.

    var request = new XMLHttpRequest();

    request.onreadystatechange = function() {

        if (this.readyState == 4 && this.status == 200) {

               console.log(this.responseText);

               var response = JSON.parse(this.responseText);

               return response.id; //the data element will return id of response

        }

    };

    request.open('GET', 'https://examplev1/query?v=20160910&query=hi&lang=en-us&sessionId=session123', true);

    request.setRequestHeader("Content-type", "application/json");

    request.send();