Ajax call to ColdFusion component not returning data

Question

I am trying to make an Ajax call with jQuery to my ColdFusion component within QueryData.cfc

Here is the QueryData.cfc code:

<cfcomponent name="querydata" access="remote" hint="getting data from SQL database">
    <cffunction name="QueryData_Pt" access="remote" output="false" returntype="any" returnformat="JSON">
        <cfquery NAME="GrabData_Pt" DATASOURCE="#Application.PrimaryDataSource#" cachedWithin = "#CreateTimeSpan(0,0,1,0)#">
            //code;
        </cfquery>
        <cfloop query="GrabData_Pt">
            <cfset Pd_data=serializeJSON(GrabData_Pt)>
        </cfloop>
        <cfreturn GrabData_Pt>
    </cffunction>
    <cffunction name="QueryData_Pd" access="remote" returntype="any" returnformat="JSON">
        <cfquery NAME="GrabData_Pd" DATASOURCE="#Application.PrimaryDataSource#" cachedWithin = "#CreateTimeSpan(0,0,1,0)#">
            //code
        </cfquery>
        <cfloop query="GrabData_Pd">
            <cfset Pd_data=serializeJSON(GrabData_Pd)>
        </cfloop>
        <cfreturn GrabData_Pd>
    </cffunction>
    <cffunction name="QueryData_Rh" returntype="any" access="remote" returnformat="JSON">
        <cfquery NAME="GrabData_Rh" DATASOURCE="#Application.PrimaryDataSource#" cachedWithin = "#CreateTimeSpan(0,0,1,0)#">
            //somecode
        </cfquery>
        <cfloop query="GrabData_Rh">
            <cfset Rh_data=serializeJSON(GrabData_Rh)>
        </cfloop>
        <cfreturn Rh_data>
    </cffunction>
</cfcomponent>

The problem I am having is that nothing is being returned. I've dumped the component data and the query is working as expected so it's not that, but for some reason the data is flowing to my .cfm file. I'm sure something is wrong with the jQuery so here is that code now:

var pt_var;
var pd_var;
var rh_var;
var pt_array = [];
var pd_array = [];
var rh_array = [];

$(function() {
    getdatafromquery();

    function getdatafromquery() {
      $.ajax({
        type: 'POST',
        contentType: "application/json; charset=utf-8", // this
        dataType: "json",
        url: 'QueryData.cfc',
        data: {
          method: 'QueryData_Pt'
        }
      }).done(function(pt_data) {
        pt_var = pt_data;

      });
    }

I then use that data and plot it using highcharts. I can see that nothing is being passed via the Google Chrome DevTools. Hopefully it's clear what I am doing wrong. I'm new to jQuery and Ajax and ColdFusion so this is a huge learning curve for me haha. Any and all help is really appreciated!

EDIT:

Turns out I wasn't serializing into json. However, now that it's being passed it's passing each cell as an individual array. Here's an example:

DATA
:
Array(79)
0:[498]
1:[494]
2:[496]
3:[494]
4:[498]
5:[495]

Answer 1

Its the way your query is outputting here is what i do; I defined a query so that you can see how its called in the loop:

    <cffunction name="QueryData_Pt" access="remote" output="false" returntype="any" returnformat="JSON">
   <cfset retVal = ArrayNew(1)>

       <cfquery NAME="results" DATASOURCE="#Application.PrimaryDataSource#" cachedWithin = "#CreateTimeSpan(0,0,1,0)#">
        SELECT DEPARTMENTNAME,DEPTID,EMPLID,WORKPHONE,FULL_NAME,EMAIL_ADDRESS,LOCATION
    </cfquery>

      <cfloop query="results">
       <cfset temp = {} />
       <cfset temp['DEPARTMENTNAME']=DEPARTMENTNAME />
        <cfset temp['DEPARTMENTID']=DEPTID />
        <cfset temp['EMPLID']=EMPLID />
        <cfset temp['WORKPHONE']=WORKPHONE />
        <cfset temp['FULL_NAME']=FULL_NAME />
        <cfset temp['EMAIL_ADDRESS']=EMAIL_ADDRESS />
        <cfset temp['LOCATION']=LOCATION />
    <cfset ArrayAppend(retval, temp)>
    </cfloop>

    <cfset result = {} />
    <cfset result['items'] = retVal />
    <cfreturn result>
</cffunction>

In the ajax I call the cfc and in the success I create a var x=items.data so I can call the data in this way x[0].DEPARTMENTNAME or if in a for loop for (var i = 0; i < x.length; i++) x[i].DEPARTMENTNAME.