Uncaught TypeError: Cannpt read property 'columnHeaders' of undefined

See more:

Javascript

Ajax

JSON

Hi All,

I have a question regarding AJAX and JavaScript.

I'm using an AJAX function that is in the below to generate a JSON object using an JSON Web service.

***AJAX Function***

function setJsonSer() {
                             var strWsUrl = 'https://www.googleapis.com/analytics/v3/data/ga?
 ids=ga%3A76546294&dimensions='+ 'ga%3Asource&metrics=ga%3Ausers&sort=-ga%3Ausers&start-
 date='+retStartDate()+'&end-date='+retEndDate()+'&max-results=10';

  formData = {
                 'Email': 'clientlink@client.com',
                 'Password': 'password',
                 'URL': strWsUrl

             };
                  $.ajax({
                 url: "/APIWebService.asmx/AnalyticsDataShowWithPost",
                 type: 'POST',
                 data: formData,

                 complete: function(data) {
                           var responseText = data.responseText;
                           var responseJson = JSON.parse(responseText.match(/[{].*.[}]/));

                         /*01*/  console.log("'responseJson' is " + typeof responseJson );


         alert(JSON.stringify(responseJson)); //or just `responseJson` if you skip
 `JSON.parse`*/

            /*04*/ Load(JSON.stringify(responseJson));

                 }
             });
         }

So that JSON object will be passed to another JavaScript Function. It's in the below.

***JavaScript Function***

function Load(responseJson){


setJsonSer();
//----------------------------------------------- Rohan
var labels = new Array();
    var values = new Array();
    var catogories = new Array();
    var arrayOfArray = new Array();
    var rowData = responseJson;

/*02*/console.log("'RowData' is " + typeof rowData );

    var inData = responseJson;

    /*03*/console.log("'inData' is " + typeof rowData );

    var count = 0;

    /*05*/var headers = new Array();

    for (var i = 0; i < inData.columnHeaders.length; i++) {
        headers[i] = inData.columnHeaders[i].name;
    }


    var dates = new Array();
    var pageViews = new Array();
    var uniqueViews = new Array();

   for (var key in inData.rows) {

        pageViews[key] = parseInt(inData.rows[key][1]);
        uniqueViews[key] = parseInt(inData.rows[key][2]);

    }

    $('#container_2').highcharts({
        chart: {
            type: 'areaspline', zoomType: 'x'
        },
        title: {
            text: 'Pageviews and Bounces'
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 150,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        xAxis: {
            categories: dates,
            type: 'datetime',
            dateTimeLabelFormats: {
                month: '%d %b',
            },
            tickInterval: 10,
            plotBands: [{ // visualize the weekend

                color: 'rgba(68, 170, 213, .2)'
            }]
        },
        yAxis: {
            title: {
                text: 'Visits'
            }
        },
        tooltip: {
            shared: true,
            valueSuffix: ' '
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            areaspline: {
                fillOpacity: 0.5
            }
        },
        series: [{
            name: 'Page Views',
            data: pageViews
        }, {
            name: 'Bounces',
            data: uniqueViews
        }]
    });

}

In the /*05*/ I got an error saying "Uncaught TypeError: Cannpt read property 'columnHeaders' of undefined". So what I have done wrong to have such an error. Could you please someone help me to solve this matter?

Thanks and regards,
Chiranthaka