Getting 3rd party data and showing in catalog variable

[imkhan]

Hi everyone,

Can someone please help me with where the issue is while parsing the variable data? we need to show data in variable

Created a script include from which to get third-party data and show it in the catalog variable.

{"result":{"catalog_item":"3a25637b47701100ba13a5554ee490a0","variable_name":"locationdata","choices":[{"label":"mumbai","value":"3"},{"label":"delhi","value":"2"},{"label":"Passing","value":"1"}]}}

script include:

var CatalogDataFetcher = Class.create();

CatalogDataFetcher.prototype = Object.extendsObject(AbstractAjaxProcessor, {

    getThirdPartyData: function() {

        try {

            var restMessage = new sn_ws.RESTMessageV2('catlog varaible data get', 'get the catalog varaible data');

            var response = restMessage.execute();

            var httpStatus = response.getStatusCode();

            var responseBody = response.getBody();

            if (httpStatus == 200 ) {

                  // Parse the response (assuming JSON)

                var data = JSON.parse(responseBody);

                return data; // Return the data to the client script

            } else {

                gs.error('Failed to fetch data from API. Status: ' + httpStatus);

                return null;

            }

        } catch (ex) {

            gs.error('Error in FetchDataFromThirdParty: ' + ex.getMessage());

            return null;

        }

    },

    type: 'CatalogDataFetcher'

});

client script:

function onLoad() {

    var ga = new GlideAjax('CatalogDataFetcher');

    ga.addParam('sysparm_name', 'getThirdPartyData');

    ga.getXMLAnswer(ajaxResponse);

    // Function to process the response

    function ajaxResponse(response) {

            alert('API Response: ' + response);

            // Parse the JSON response 

            var data = JSON.parse(response);

            alert('Parsed Data: ' + JSON.stringify(data));

            // Check if data 

            if (data && data.length > 0) {

                alert('Data is valid and not empty');

                var options = '';

                for (var i = 0; i < data.length; i++) {

                    // Customize this based on your API response structure

                    options += '<option value="' + data[i].value + '">' + data[i].label + '</option>';

                }

                alert('Options: ' + options);

                // Populate the variable 

                g_form.setOptions('locationdata', options);

                alert('Dropdown populated successfully');

            }

        }

    }

------

Result:

API Response: [object Object]

[Kieran Anson]

Please use JSON.parse(data),

Also share the payload (with redacted values if needed) so we can confirm you are correctly trying to access values. 

[imkhan]

Hi Kieran,

The Error throwing on alert.

Error in cache: Cannot read properties of undefined (reading 'length')

Response: 

parse data:"{\"data\":[{\"Topic\":4,\"Name\":\"A & E\",{\"Topic\":1,\"Name\":\"Eco\",{\"Topic\":3,\"Name\":\"I& B\",{\"Topic\":5,\"Name\":\"Le\"}],\"message\":\"Success\"}"

Before the for loop is working and getting data, the for loop is not able to check and proceed to parse data that is coming.

  for (var i = 0; i < JData.data.length; i++) 

[Kieran Anson]

Hi,

So your response doesn't have the fields you want. Using your example data, your code would look closer to the following:

 function ajaxResponse(response) {

     console.log('debugging API response');
     console.group();
     console.log('response from ajax call is ' + response);
     var responseObj = JSON.parse(response);
         console.log('Parsed response obj');
     console.log(responseObj);
     console.log("does obj have a data key? " + responseObj.hasOwnProperty('data'));

     if (!responseObj || !responseObj.hasOwnProperty('data') || !Array.isArray(responseObj.data)) {
         console.error('data not available in obj')
         console.error(responseObj)
         console.groupEnd();
         return
     }

     var dataLength = responseObj.data.length;

     g_form.clearOptions('locationdata');
     console.log('Cleared locationdata options');
     for (var i = 0; i < dataLength; i++) {
         console.group();
         console.log('Topic is ' + responseObj.data[i].Topic);
         console.log('Name is ' + responseObj.data[i].Name);
         g_form.addOption('locationdata', responseObj.data[i].Topic, responseObj.data[i].Name, i);
         console.groupEnd();
     }

     console.groupEnd();
 }

Use your browsers dev tools to see the logs

[imkhan]

Hi Kieran,

I added logs and troubleshooting and can see the "data not available in obj" on console, which is not holding data, but before and after that can see the data in json.

After line console.error('data not available in obj') the console.error(responseObj) showing correct responseObj.

One more error " *** WARNING *** GlideAjax.getXMLWait - synchronous function - processor: AjaxClientHelper".

[Kieran Anson]

Hi,

That is because the response from your Ajax call is different to what you provided in your post.

function ajaxResponse(response) {

     console.log('debugging API response');
     console.group();
     console.log('response from ajax call is ' + response);
     var responseObj = JSON.parse(response);
         console.log('Parsed response obj');
     console.log(responseObj);
     console.log("does obj have a result key? " + responseObj.hasOwnProperty('result'));

     if (!responseObj || !responseObj.hasOwnProperty('result') || !Array.isArray(responseObj.result)) {
         console.error('result not available in obj')
         console.error(responseObj)
         console.groupEnd();
         return
     }

     var dataLength = responseObj.result.choices.length;

     g_form.clearOptions('locationdata');
     console.log('Cleared locationdata options');
     for (var i = 0; i < dataLength; i++) {
         console.group();
         console.log('Topic is ' + responseObj.result.choices[i].Topic);
         console.log('Name is ' + responseObj.result.choices[i].Name);
         g_form.addOption('locationdata', responseObj.data[i].Topic, responseObj.data[i].Name, i);
         console.groupEnd();
     }

     console.groupEnd();
 }