AngularJS und ColdFusion CFCs

Question

Ich versuche AngularJS mit einem ColdFusion-Backend aufzunehmen und stoße auf einige Hindernisse. Ich ändere ihre "To Do" App http://angularjs.org/ mit der CF Art Gallery Datenbank. Ich versuche, einen ColdFusion CFC über AJAX mit einer Angular-App zu verknüpfen.

Unten ist mein artists.cfc:

<cfcomponent> 

<cffunction name="getArtists" access="remote" > 
    <cfargument name="firstName" default=""> 
    <cfargument name="lastName" default=""> 

    <cfquery name="getArtists_sql" datasource="cfartgallery"> 
     SELECT 
      firstname as text, 
      lastname as done 
     FROM artists 
     WHERE 0=0 
    <cfif firstName neq ""> 
     AND ucase(firstname) like ucase('%#FIRSTNAME#%') 
    </cfif> 
    <cfif lastName neq ""> 
     OR ucase(lastname) like ucase('%#LASTNAME#%')  
    </cfif> 
    </cfquery> 

    <cfreturn getArtists_sql> 
</cffunction> 

</cfcomponent> 

Ich nenne die CFC AngularJS mit dem folgenden Code:

function TodoCtrl($scope, $http) { 
    $http.get('cfc/artists.cfc?method=getArtists&returnformat=json'). 
     success(function (response) { 
      $scope.todos = data.DATA; 
    }). 
     error(function (data) { 
      $scope.todos = data; 
     }); 
} 

Ich weiß, dass ich eine Antwort bekommen. Unten ist die JSON-String Chrome-Entwickler-Tools für mich Returns:

{ 
"COLUMNS": 
    ["TEXT","DONE"], 
"DATA":[ 
    ["Aiden","Donolan"], 
    ["Austin","Weber"], 
    ["Elicia","Kim"], 
    ["Jeff","Baclawski"], 
    ["Lori","Johnson"], 
    ["Maxwell","Wilson"], 
    ["Paul","Trani"], 
    ["Raquel","Young"], 
    ["Viata","Trenton"], 
    ["Diane","Demo"], 
    ["Anthony","Kunovic"], 
    ["Ellery","Buntel"], 
    ["Emma","Buntel"], 
    ["Taylor Webb","Frazier"], 
    ["Mike","Nimer"] 
]} 

Das ist nicht wie die Notation in ihrer Demo verwendet Angular sieht:

[ 
{text:'learn angular', done:true}, 
{text:'build an angular app', done:false} 
] 

jemand mich in die richtige Richtung zeigen kann, wie auf Wie kann ich dafür sorgen, dass dies richtig funktioniert? Idealerweise möchte ich den CFC intakt lassen, damit er für eine andere Anwendung wiederverwendet werden kann, so dass die JSON-Manipulation im Javascript-Ende erfolgen müsste.

Answer 1

Standardmäßig verwendet Coldfusion eine andere JSON-Notation als Sie möglicherweise gewohnt sind. Die Spaltennamen werden in einem Array gespeichert, während die Daten in einem anderen gespeichert werden. Die von uns implementierte Lösung beinhaltete die Änderung der CFquery in ein Array. Dann JSONEnoding dieses Array.

Sie diese Funktion hier brauchen:

<cffunction name="QueryToArray" access="public" returntype="array" output="false"hint="This turns a query into an array of structures."> 
    <cfargument name="Data" type="query" required="yes" /> 

    <cfscript> 
     // Define the local scope. 
     var LOCAL = StructNew(); 

     // Get the column names as an array. 
     LOCAL.Columns = ListToArray(ARGUMENTS.Data.ColumnList); 

     // Create an array that will hold the query equivalent. 
     LOCAL.QueryArray = ArrayNew(1); 

     // Loop over the query. 
     for (LOCAL.RowIndex = 1 ; LOCAL.RowIndex LTE ARGUMENTS.Data.RecordCount ; LOCAL.RowIndex = (LOCAL.RowIndex + 1)){ 

     // Create a row structure. 
     LOCAL.Row = StructNew(); 

     // Loop over the columns in this row. 
     for (LOCAL.ColumnIndex = 1 ; LOCAL.ColumnIndex LTE ArrayLen(LOCAL.Columns) ; LOCAL.ColumnIndex = (LOCAL.ColumnIndex + 1)){ 

     // Get a reference to the query column. 
     LOCAL.ColumnName = LOCAL.Columns[ LOCAL.ColumnIndex ]; 

     // Store the query cell value into the struct by key. 
     LOCAL.Row[ LOCAL.ColumnName ] = ARGUMENTS.Data[ LOCAL.ColumnName ][ LOCAL.RowIndex ]; 

     } 

     // Add the structure to the query array. 
     ArrayAppend(LOCAL.QueryArray, LOCAL.Row); 

     } 

     // Return the array equivalent. 
     return(LOCAL.QueryArray); 

    </cfscript> 
</cffunction> 

Und dann wird Ihre Rückkehr wie folgt aussehen:

<cfreturn SerializeJson(QueryToArray(getArtists_SQL),true)> 

Die Sache, sich daran zu erinnern ist, dass ein CFQUERY Objekt andere Eigenschaften wie Record enthält .. .und höchstwahrscheinlich will das JS nur die Daten. Ich weiß nicht, ob es eine elegantere Lösung dafür gibt, aber das ist die Lösung, auf die wir stießen, als wir ein ähnliches Problem mit JQgrid hatten.

Answer 2

Um mit der obigen Antwort von Blaise zu gehen. Das QueryToArray, das ich verwende, betrachtet die Spaltenliste des Query-Objekts. Dies ist so der Fall der Spalte Aliase bleibt erhalten. Sonst wird es alle Kappen in Ihrem JSON sein

/**queryToArray 
* utility method to keep the code dry. 
* @hint does exactly what the name says, take a query, makes it an array of stucts 
* @hint columnLabels pass in a list of columnLabels to just return those columns 
*/ 
public array function queryToArray(required query data, any columnLabels=false){ 
    var columns = listToArray(arguments.data.columnList); 
    if(arguments.columnLabels != false){ 
      columns = listToArray(arguments.columnLabels); 
    } 

    var queryArray = arrayNew(1); 

    for(i=1; i <= arguments.data.RecordCount; i++){ 

      row = StructNew(); 
      for (j=1; j <= ArrayLen(columns); j++){ 
       columnName = columns[j]; 
     row[columnName] = arguments.data[columnName][i]; 
      } 
      arrayAppend(queryArray, row); 
    } 
    return(queryArray); 
}