Tableau Web Data Connector error

Question

I am creating a Tableau Web Data Connector as per the documentation HERE.

I am running the Simulator and have setup a HTML page (as per tutorial) which calls a Javascript file that runs the Tableau WDC script as below.

(function () {
    var myConnector = tableau.makeConnector();

    myConnector.init = function(initCallback) {
        initCallback();
        tableau.submit();
    };

    myConnector.getSchema = function (schemaCallback) {
        var cols = [
            { id : "date_of_work", alias : "Date of Work", dataType: tableau.dataTypeEnum.date },
            { id : "supervisor", alias : "Supervisor", dataType: tableau.dataTypeEnum.string }
        ];

        var tableInfo = {
            id : "test",
            alias : "test",
            columns : cols
        };

        schemaCallback([tableInfo]);
    };

    myConnector.getData = function (table, doneCallback) {
        $.getJSON("http://myDataCall.php", function(response) { 
            // ERROR HERE!  
            var resp = response.job.job_workflows; // Response
            var parsedResp = JSON.parse(resp); // Parse the response
            var tableData = []; // Temp array

            // Iterate over the JSON object
            for (var i = 0, len = resp.length; i < len; i++) {
                tableData.push({
                    "date_of_work": parsedResp[i]['job_status'],
                    "supervisor": parsedResp[i]['job_workflow_1197927'],

                });
            }

            table.appendRows(tableData);
            doneCallback();
        });
    };

    tableau.registerConnector(myConnector);
})();

When I run the script I get the error: The WDC reported an error: Uncaught SyntaxError: Unexpected token o in JSON at position 1 stack:SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse () at Object.success

The (abbreviated) JSON that is being returned looks as follows:

{
    "employee": {
        "id": 23940,
    },
    "company": {
        "id": 1059,
    },
    "job": {
        "id": 13712707,
        "job_status_logs": [{
            "id": 17330391,
        }],
        "company": {
            "id": 1059,
        },
        "created_by": {
            "id": 23940,
        },
        "job_workflows": [{
            "id": 1087689283,
            "job_id": 13712707,
            "employee_id": null,
            "template_workflow_id": 1251218,
            "name": "Date of work",
            "action": "datepicker",
            "optional": 0,
            "action_values": "",
            "action_value_entered": "2017-10-12",
            "nested_workflow_id": 0,
        }, {
            "id": 1087689284,
            "job_id": 13712707,
            "employee_id": null,
            "template_workflow_id": 1251219,
            "name": "Supervisor",
            "action": "list",
            "optional": 0,
            "action_values": "John Doe",
            "action_value_entered": "John Doe",
            "nested_workflow_id": 0,
        }],
        "job_fields": [{
            "id": 50456098,
        }],
        "job_status_change_messages": [{
            "id": 59957985}],
        "job_assets":[]
    }
}

I am trying to access the job.job_workflows.action_value_entered value but keep getting the error as above.

How can I fix this error?

Answer 1

There are a couple of issues here.

1) The JSON sent back from your server is invalid. Here is the valid version. I recommend using a site like https://jsonformatter.curiousconcept.com/ to validate your JSON.

{
    "employee": {
        "id": 23940
    },
    "company": {
        "id": 1059
    },
    "job": {
        "id": 13712707,
        "job_status_logs": [{
            "id": 17330391
        }],
        "company": {
            "id": 1059
        },
        "created_by": {
            "id": 23940
        },
        "job_workflows": [{
            "id": 1087689283,
            "job_id": 13712707,
            "employee_id": null,
            "template_workflow_id": 1251218,
            "name": "Date of work",
            "action": "datepicker",
            "optional": 0,
            "action_values": "",
            "action_value_entered": "2017-10-12",
            "nested_workflow_id": 0
        }, {
            "id": 1087689284,
            "job_id": 13712707,
            "employee_id": null,
            "template_workflow_id": 1251219,
            "name": "Supervisor",
            "action": "list",
            "optional": 0,
            "action_values": "John Doe",
            "action_value_entered": "John Doe",
            "nested_workflow_id": 0
        }],
        "job_fields": [{
            "id": 50456098
        }],
        "job_status_change_messages": [{
            "id": 59957985}],
        "job_assets":[]
    }
}

2) jQuery's getJson method returns an object, so you don't need to parse it. You can just use the resp variable directly like so:

    var resp = response.job.job_workflows; // Response
    var tableData = []; // Temp array

    // Iterate over the JSON object
    for (var i = 0, len = resp.length; i < len; i++) {
        tableData.push({
            "date_of_work": resp[i]['job_status'],
            "supervisor": resp[i]['job_workflow_1197927'],

        });
    }

    table.appendRows(tableData);
    doneCallback();

Fixing those two issues should unblock you. However, you'll want to think through what data you are sending back. The current values you are sending back do not exist in the JSON (i.e. resp[i]['job_workflow_1197927']).

Instead, you could do something like this: resp[1].job_id, which would give you the job_id of each job_workflow.