Search code examples
coldfusionangularjscfquery

how can I use AngularJS and a serializeJSON cfquery


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?


Solution

  • @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!