Expand my Community achievements bar.

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

Avatar

Level 3

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();

1 Reply

Avatar

Community Advisor

I am not sure what the question is. Is your XHR call for Adobe Target? If you are already in the web layer, you should go get a copy of at.js in order for those calls to be structured properly.

at.js functions