How can I use AngularJS and serializeJSON cfquery

Question

I am trying to take a look at AngularJS with the cf backend

I have the following code that pulls out a regular cfquery called getIndex, which pulls out five rows of columns each (firstName, lastName)

var theQuery = <cfoutput>#serializeJSON(getIndex,true)#</cfoutput>; var theData = theQuery.DATA function dataLooper($scope){ $scope.people = theData; console.log($scope.people); } 

in the console log is created

Object {FIRSTNAME = [5], LASTNAME = [5]}

my html looks like

 <div ng-controller="dataLooper"> <div ng-repeat="person in people"> {{person}} - {{person.FIRSTNAME}}<br> </div> </div> 

which produces

  ["Yasteel","Kyleigh","Gary","Nick","Kerry-Leigh"] - ["Si","No","Ho","Ga","Gr"] - 

Obviously, I am missing something because it is not at all what I expected. I assume this is because AngularJS is looking for an Arrray instead of an object. I'm not sure, but I was hoping that serializeJSON would provide me with some kind of useful object without too much manipulation. Can someone point me in the right direction?

Answer 1

@Mark Thanks for the help. My question was specifically about converting CFQUERY into something that ANGULAR can handle. With a little help from Ben Nadel, an article on Angular and an article on converting a query into an array of structures . I finished.

For those CFers who find this, get Ben queryToArray . Here is an example with a query that contains the columns firstName, lastName, age.

 <cfscript> a = createObject('component','angular'); getQuery = a.getQuery(); QueryArray = a.queryToArray(getQuery); </cfscript> <script type="text/javascript"> var theQuery = <cfoutput>#serializeJSON(QueryArray)#</cfoutput>; function dataLooper($scope){ $scope.people = theQuery; } </script> <div ng-controller="dataLooper"> <div ng-repeat="person in people"> {{person.FIRSTNAME}} - {{person.LASTNAME}} - {{person.AGE}}<br> </div> </div> 

Hope this helps someone else trying to learn Angular!

Answer 2

ng-repeat can handle an array or object. For the object, use the syntax "(key, value)".

This will not solve your problem, although if you do not reformat your data like this:

 { 'Yasteel':'Si', 'Kyleigh':'No', ... } 

Then you can do this:

 <div ng-repeat="(first,last) in people"> {{first}} - {{last}} <br> </div>