In this example, the result from a speech recognition is returned and it would be nice if the results were formatted in a nice table. Because the speech recognition grammar supports multiple words and phases, the result is not the same every time, making building an static HTML table impossible. When building a table to house object, with an variable number of elements, ng-repeat is a powerful tool from Google’s Angularjs that can help.

Angularjs

In the code sample below, $scope.results is a speech recognition results object that contains the hypothesis, confidence scores for each word in the hypothesis, and some result tokens that are representative of the result. In this case, the result is a military grid location in MGRS format. A horizontal table, with the scores aligned with the words is needed to display the word scores, and a vertical table is more appropriate for the token pairs.

 $scope.results = {  
           "nbest": [{  
               "hypothesis": "one seven charlie romeo romeo one two three four five six",  
               "wordScores": {  
                 "score": [  
                   0.219999999,  
                   0.310000002,  
                   0.219999999,  
                   0.600000024,  
                   0.340000004,  
                   0.560000002,  
                   0.5,  
                   0.670000017,  
                   0.860000014,  
                   0.839999974,  
                   0.579999983  
                 ],  
                 "word": [  
                   "one",  
                   "seven",  
                   "charlie",  
                   "romeo",  
                   "romeo",  
                   "one",  
                   "two",  
                   "three",  
                   "four",  
                   "five",  
                   "six"  
                 ]  
               }  
             }],  
           "nlu-sisr": [{  
               "id": 0,  
               "interp": {  
                 "MGR": "17CRR123456",  
                 "MGRSAccuracy": "100m",  
                 "MGRSEasting": "123",  
                 "MGRSGridZone": "17C",  
                 "MGRSNorthing": "456",  
                 "MGRSNumerical": "123456",  
                 "MGRSSQID": "RR"  
               },  
               "time": 0.0122458935  
             }],  
         };  

The javaScript for the word score table. Angularjs evaluates the expression inside of {{‘expression’}}, replacing {{key}} and {{val}} with the token and it’s associated value, and ng-repeat loops through the object.

 <div class="row">  
   <div class="span8">  
     <!--create token:value table-->  
     <table border="1">  
       <tr>  
         <th colspan='2'>Tokens</th>  
       </tr>  
       <tr>  
         <th>Token</th>  
         <th>Value</th>  
       </tr>  
       <tr ng-repeat="(key,val) in results['nlu-sisr'][0].interp">  
         <td>{{key}}</td>  
         <td>{{val}}</td>  
       </tr>  
     </table>  
   </div>  
 </div>  

Makes a table that looks like this…

Tokens
Token Value
MGRS 17CRR123456
MGRSAccuracy 100m
MGRSEasting 123
MGRSGridZone 17C
MGRSNorthing 456
MGRSNumerical 123456
MGRSSQID RR

 

Going horizontal for the word confidence scores …

 <div class="row">  
   <div class="span8">  
     <table border="1">  
       <tr>  
         <th colspan="18">Word Confidence Scores</th>  
       </tr>  
       <tr>  
         <td ng-repeat="word in results.nbest[0].wordScores.word">{{word}}</td>  
       </tr>  
       <tr>  
         <td ng-repeat="score in results.nbest[0].wordScores.score">{{score.toFixed(2)}}</td>  
       </tr>  
     </table>  
   </div>  
 </div>  

 

Creates a table that looks like this

 

Word Confidence Scores
one seven charlie romeo romeo one two three four five six
0.22 0.31 0.22 0.60 0.34 0.56 0.50 0.67 0.86 0.84 0.58