how can I use AngularJS and a serializeJSON cfquery

Question

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

I have the following code that pulls a regular cfquery called getIndex which pulls 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);
        }

the console log produces

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 as this isn't what I expected at all. I am guessing that it is because AngularJS is looking for an Arrray instead of an object. I am not sure but I was hoping that serializeJSON would give me some type of usable object without a lot of extra manipulation. Can someone point me in the right direction?

Wolfgram

Answer 1

@Mark Thanks for the help. My question was specifically about converting a CFQUERY to something ANGULAR could deal with. With a little help from Ben Nadel's article about Angular and an article about converting a query to an array of structs. I got it completed.

For those CFers that will find this go get Ben's 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>

I hope this helps someone else who is trying to learn Angular!

Wolfgram

Ben Nadel has more up-to-date information on this topic and has written a JsonSerializer.cfc. It is here: bennadel.com/blog/… . Also the code is available (and maintained) from github: github.com/bennadel/JsonSerializer.cfc – Rogation

Answer 2

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

This won't solve your problem though, unless you reformat your data like so:

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

Then you can do this:

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

Topdrawer

I guess I can see how this would work if the query only returned 2 columns but I am unsure how to do it if the query returns (firstName, lastName, address, city, state, zip, etc...) Serialized CFQUERY is returning an object containing COLUMNS and DATA. But those are both arrays of arrays. Since there is no loop counter that I can see in Angular I am not sure how to get down into these arrays. Feeling pretty dumb today – Wolfgram

You'll probably need to write your own directive, that understands the structure of the data. – Topdrawer