2013-02-25 22 views
5

Tôi đang cố gắng để lấy AngularJS với một kết thúc Coldfusion và đang chạy vào một vài rào chắn. Tôi đang sửa đổi ứng dụng "To Do" của họ http://angularjs.org/ với cơ sở dữ liệu Thư viện ảnh nghệ thuật CF. Tôi đang cố gắng liên kết một ColdFusion CFC với một ứng dụng góc sử dụng AJAX.AngularJS và Coldfusion CFCs

Dưới đây là artists.cfc tôi:

<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> 

tôi gọi là CFC sử dụng AngularJS với đoạn mã sau:

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; 
     }); 
} 

Tôi biết rằng tôi nhận được một phản ứng trở lại. Dưới đây là các công cụ nhà phát triển Chuỗi JSON Chrome trả về cho tôi:

{ 
"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"] 
]} 

này không giống như các ký hiệu góc dùng cho thí nghiệm của họ:

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

Ai đó có thể chỉ cho tôi đi đúng hướng để làm thế nào tôi có thể đi về việc này để làm việc đúng cách? Lý tưởng nhất, tôi muốn giữ nguyên CFC để có thể tái sử dụng cho một ứng dụng khác để thao tác JSON sẽ phải được thực hiện ở cuối Javascript.

+0

Câu hỏi của bạn chính xác là gì? BTW, gọi lại thành công của bạn không tham chiếu chính xác dữ liệu phản hồi. Nó phải là 'hàm (response) {$ scope.todos = response.data.DATA; } '. – Stewie

+0

Rõ ràng đã nêu, câu hỏi của tôi sẽ là "Làm cách nào để thay thế thông tin từ hướng dẫn TODO của AngularJS bằng hướng dẫn từ nghệ sĩ.cfc? Tôi đã thử hàm' (response) {$ scope.todos = response.data.DATA;} 'và tôi nhận được' TypeError: Không thể đọc thuộc tính 'DATA' của undefined' – Chester

+0

Lỗi của tôi, tôi đã nhầm lẫn phương thức 'promise.success' rõ ràng (cung cấp gọi lại với các tham số trạng thái và dữ liệu) với' promise.then' phương thức này cung cấp các callback (s) với đối tượng response, trong đó có một thuộc tính data, nhưng trong trường hợp đó, callback của bạn phải là 'function (data) {$ scope.todos = data.DATA;}' cho rằng đáp ứng ajax thực tế của bạn cơ thể thực sự trả về JSON mà bạn đã đăng trong câu trả lời của bạn. – Stewie

Trả lời

5

Theo mặc định, Coldfusion sử dụng ký hiệu JSON khác với cách bạn có thể sử dụng. Các tên cột được lưu trữ trong một mảng, trong khi dữ liệu được lưu trữ trong một mảng khác. Giải pháp chúng tôi thực hiện liên quan đến việc thay đổi CFquery thành một mảng. Sau đó, JSONEncoding mảng đó.

Bạn sẽ cần chức năng này ở đây:

<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> 

Và sau đó trở lại của bạn sẽ trông giống như:

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

Những điều cần nhớ, đó là một đối tượng CFquery chứa các tài sản khác như RecordCount .. và rất có thể, JS chỉ muốn dữ liệu. Tôi không biết nếu có một giải pháp thanh lịch hơn cho điều này, nhưng đây là giải pháp chúng tôi đã hạ cánh khi chúng tôi gặp vấn đề tương tự với JQgrid.

+0

Vâng, điều đó đã thay đổi phản hồi JSON từ CFC thành '{" ROWCOUNT ": 15," COLUMNS ": [" TEXT "," DONE "]," DATA ": {" TEXT ": [" Aiden "," Austin "," Elicia "," Jeff "," Lori "," Maxwell "," Paul "," Raquel "," Viata "," Diane "," Anthony "," Ellery "," Emma "," Taylor Webb " , "Mike"], "XONG": ["Donolan", "Weber", "Kim", "Baclawski", "Johnson", "Wilson", "Trani", "Young", "Trenton", "Demo" , "Kunovic", "Buntel", "Buntel", "Frazier", "Nimer"]}} ', nhưng nó vẫn không giống như cách hướng dẫn có dữ liệu. – Chester

+0

@Chester Bạn cũng vậy. Lời xin lỗi của tôi. Tôi sẽ cập nhật câu trả lời của mình. –

+0

Sau khi suy nghĩ về nó, tôi cũng đã đi đến kết luận tương tự, mặc dù theo một cách khác. Tôi thực sự muốn giữ sạch CFC của bất kỳ sửa đổi JSON nào để CFC có thể được sử dụng lại, nhưng tôi thấy nó sẽ dễ dàng sửa đổi/thêm bất kỳ CFC nào trong tương lai hơn là làm javascript. Điều đó đang được nói, tôi đã sử dụng https://github.com/iknowkungfoo/ArrayCollection và gói toàn bộ truy vấn đến những gì nó được cho là. Cảm ơn bạn đã giúp đỡ. Bây giờ tôi phải tìm ra cách để phản hồi trở lại hiển thị trong quan điểm của tôi. – Chester

1

Để đi cùng với câu trả lời ở trên từ Blaise. QueryToArray Tôi sử dụng xem xét danh sách cột của đối tượng truy vấn. Đây là trường hợp của bí danh cột được giữ nguyên. Nếu không, nó sẽ là tất cả các chữ cái trong JSON

/**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); 
}