Angular parse:syntax ERROR

Question

I am getting this error when trying to display data from mysql Db using Angular

angular.js:13708 Error: [$parse:syntax] http://errors.angularjs.org/1.5.7/$parse/syntax?p0=Code&p1=is%20an%20unexpected%20token&p2=7&p3=x.Zip%20Code&p4=Code
   at angular.js:38
   at throwError (angular.js:14343)
   at t.ast (angular.js:14096)
   at ud.compile (angular.js:14559)
   at kc.parse (angular.js:15488)
   at g (angular.js:15653)
   at k (angular.js:12233)
   at aa (angular.js:9604)
   at $b (angular.js:8633)
   at t (angular.js:8429)(anonymous function) @ angular.js:13708

HTML file:

<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title> Visual Analytics - Smart Grid App</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-   BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-    Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js">
  </script>

  <style>
    table,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }

    th,
    td {
      padding: 5px;
      text-align: left;
    }

    table#t01 {
      width: 100%;
      background-color: #ffffff;
      font-weight: medium;
      width: 99
    }
  </style>
</head>

<body ng-app="app">

  <a href="images\SPSLOGO.png"><img src="C:/nodeprojects/myapp/images/SPSLOGO.png" width="300"></a>
  <img src="C:/Users/RCallaway/AWS/myapp/images/woman_SPS.jpg" width="75%">
  <h1 align="center"><i><strong>PRATT & WHITNEY United Technogies</strong></i></h1>
  <h1 align="center"><i><strong>Visual Analtyics For The Smart Grid Web APP</strong></i></h1>
  <div class="col-sm-8 col-sm-offsanodet-2">
    <div class="page-header">
      <h3><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pratt & Whitney Visual Analtyics For The Smart Grid</br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Web APP will    allow</strong><strong> you to search Electric and    Gas</br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;usage by Zip Code,   County,</strong><strong> or Month.</strong></h3></div>
    <div ng-controller="emp">
      <form class="form-inline">
        <div class="form-group">
          <span id="tab"><label>Enter Search Criteria:</label></span>
          <input type="text" class="form-control" ng-model="searchFname" />
        </div>
        <button class="btn btn-primary" ng-click="Btn = true" ng-init="Btn = false">
          SEARCH</button>
        <button class="btn btn-danger" ng-click="Btn = false">
          CLEAR</button>
      </form>
      <hr>
      <div class="row">
        <table class="table table-bordered">

          <tr>
            <th>Zip Code</th>
            <th>County</th>
            <th>Month</th>
            <th>City</th>
            <th>Type</th>
            <th>Meter Reading Dates</th>
            <th>Kwh Used</th>
            <th>BGE Electric</th>
            <th>Gas Type</th>
            <th>Therms Used</th>
            <th>BGE Gas Delivery Service</th>
            <th>BGE Gas Commodity</th>
            <th>TOTAL AMOUNT DUE</th>
          </tr>

          <tr ng-repeat="x in employeeData | filter : searchFname" ng-if="Btn == true">

            <td>{{x.Zip Code }}</td>
            <td>{{x.County }}</td>
            <td>{{x.Month }}</td>
            <td>{{x.City }}</td>
            <td>{{x.Type }}</td>
            <td>{{x.Meter Reading Dates }}</td>
            <td>{{x.Kwh Used }}</td>
            <td>{{x.BGE Electric }}</td>
            <td>{{x.Gas Type }}</td>
            <td>{{x.Therms Used }}</td>
            <td>{{x.BGE Gas Delivery Service }}</td>
            <td>{{x.BGE Gas Commodity }}</td>
            <td>{{x.TOTAL AMOUNT DUE }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>
</html>

Anish Agarwal · Accepted Answer · 2016-11-26 05:48:11Z

You can not use Space between object keys for accessing those keys value Like x.Zip Code, for accessing such kind of keys value you can use x['Zip Code']

Here is my working Code.

<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title> Visual Analytics - Smart Grid App</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-   BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-    Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

  <style>
    table,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }

    th,
    td {
      padding: 5px;
      text-align: left;
    }

    table#t01 {
      width: 100%;
      background-color: #ffffff;
      font-weight: medium;
      width: 99
    }
  </style>
  <script>
    angular.module('app',[])
    .controller('employeeCtrl',['$scope', function($scope){         
        $scope.employeeData = [
            {
                "Zip Code" : "213",
                "County":"India",
                "Month":"January",
                "City":"Ahmedabad",
                "Type":"test",
                "Meter Reading Dates":"test",
                "Kwh Used":"test",
                "BGE Electric":"test",
                "Gas Type":"test",
                "Therms Used":"test",
                "BGE Gas Delivery Service":"test",
                "BGE Gas Commodity":"test",
                "TOTAL AMOUNT DUE":"2145"
            },
            {
                "Zip Code" : "213",
                "County":"India",
                "Month":"March",
                "City":"Surat",
                "Type":"test",
                "Meter Reading Dates":"test",
                "Kwh Used":"test",
                "BGE Electric":"test",
                "Gas Type":"test",
                "Therms Used":"test",
                "BGE Gas Delivery Service":"test",
                "BGE Gas Commodity":"test",
                "TOTAL AMOUNT DUE":"2145"
            }
        ]
    }]);
  </script>
</head>

<body ng-app="app">
<a href="images\SPSLOGO.png"><img src="C:/nodeprojects/myapp/images/SPSLOGO.png" width="300"></a>
  <img src="C:/Users/RCallaway/AWS/myapp/images/woman_SPS.jpg" width="75%">
  <h1 align="center"><i><strong>PRATT & WHITNEY United Technogies</strong></i></h1>
  <h1 align="center"><i><strong>Visual Analtyics For The Smart Grid Web APP</strong></i></h1>

  <div class="col-sm-8 col-sm-offsanodet-2">
    <div class="page-header">     
    <div >
      <form class="form-inline">
        <div class="form-group">
          <span id="tab"><label>Enter Search Criteria:</label></span>
          <input type="text" class="form-control" ng-model="searchFname" />          
        </div>
        <button class="btn btn-primary" ng-click="Btn = true" ng-init="Btn = false">
          SEARCH</button>
        <button class="btn btn-danger" ng-click="Btn = false">
          CLEAR</button>
      </form>
      <hr>
      <div class="row" ng-controller ="employeeCtrl" >
        <table class="table table-bordered">

          <tr>
            <th>Zip Code</th>
            <th>County</th>
            <th>Month</th>
            <th>City</th>
            <th>Type</th>
            <th>Meter Reading Dates</th>
            <th>Kwh Used</th>
            <th>BGE Electric</th>
            <th>Gas Type</th>
            <th>Therms Used</th>
            <th>BGE Gas Delivery Service</th>
            <th>BGE Gas Commodity</th>
            <th>TOTAL AMOUNT DUE</th>
          </tr>

          <tr ng-repeat="x in employeeData | filter : searchFname">

            <td>{{x['Zip Code'] }}</td>
            <td>{{x['County'] }}</td>
            <td>{{x.Month }}</td>
            <td>{{x.City }}</td>
            <td>{{x.Type }}</td>
            <td>{{x['Meter Reading Dates'] }}</td>
            <td>{{x['Kwh Used'] }}</td>
            <td>{{x['BGE Electric'] }}</td>
            <td>{{x['Gas Type'] }}</td>
            <td>{{x['Therms Used'] }}</td>
            <td>{{x['BGE Gas Delivery Service'] }}</td>
            <td>{{x['BGE Gas Commodity'] }}</td>
            <td>{{x['TOTAL AMOUNT DUE'] }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>
</html>

Hey thanks, I figured this out on my own around the same day you answered. But you are correct thanks again for the help. if you are good with Angular, I wish I could get some additional assistance. I have been using Angular now for about 2 months and I love it. Thanks

Collectives™ on Stack Overflow

Angular parse:syntax ERROR

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related