javascriptajaxcoldfusioncfc

How to ouput CFC query with 2 columns


I am making an ajax call to a CFC that returns 2 columns of data.

AJAX CALL:

<script>
        function  getPSAstatus() {
            //populate psa
        $.ajax({
        
            dataType: 'json',
            data:  {
                        customer_id: $('#customer_id').val()
                    },
            url: "cfcs/past_customers.cfc?method=getpsaID&returnformat=json",
            beforeSend: function(){
                $('.loader').show();
            },
            complete: function(){
                 $('.loader').hide(3000);
            },
            failed: function(){
                $console.log("PSA Package failed");
            },
            success: function(data) {
              console.log(data);
                if (data != '') {
                  $("#psa_Status_DIV").css("display", "block");
                  $("#psaID").text(data.id);
                  $("#psaName").text(data.psa_package);

              }
                else {
                  $("#psa_Status_DIV").css("display", "none");
                  $("#psaID").text(data.id);
                  $("#psaName").text(data.psa_package);
                }
              }
        });
        }
        
    </script>

CFC:

    <!--- localize function variables --->
    <cfset var psaData = "">
    
    <cfquery name="psaData" datasource="#datasource#">
        SELECT id, psa_package
        FROM   psa_agreements
        <!--- adjust cfsqltype if needed --->
        WHERE customer_id = <cfqueryparam value="#ARGUMENTS.customer_id#" cfsqltype="cf_sql_varchar">
    </cfquery>
        
        
        <cfreturn psaData>
</cffunction>

My output is returning data as I can it in the console. But how do I output that data to my HTML? What I have above doesn't seem to do anything.

   {
    "COLUMNS": [
        "id",
        "psa_package"
    ],
    "DATA": [
        [
            64,
            "Bronze Protection Package"
        ]
    ]
}

Solution

  • Try this in you're success function:

    success: function(data) {
              console.log(data);
              $("#psa_Status_DIV").css("display", "block");
              $("#psaID").text(data.DATA[0][0]);
              $("#psaName").text(data.DATA[0][1]);
        });