0

I'm working on AngularJs tutorial and I would like to access JSON. I do not understand why in tutorial they use [] to access JSON. When user click on the "a tag" it will put airport.code into setAirport function and get the currentAirport.name back Here is the code:

HTML:

<html ng-app>
<head>
    <title>Demo</title>
    <script type="text/javascript" src="js/lib/angular.min.js"></script>
    <script type="text/javascript" src="js/controllers/app.js"></script>
</head>
<body>
<div ng-controller="AppCtrl">
    <h1>AngulAir</h1>
    <ul>
        <li ng-repeat="airport in airports">
            <a href="" ng-click="setAirport(airport.code)">
                {{airport.code}} - {{airport.city}}
            </a>
        </li>
    </ul>
    <p ng-show="currentAirport">Current Airport : {{currentAirport.name}}</p>
</div>

and this is the JS code:

function AppCtrl ($scope) {
  $scope.airports = {
    "PDX": {
      "code": "PDX",
      "name": "Portland International Airport",
      "city": "Portland",
      "destinations": [
        "LAX",
        "SFO"
      ]
    },
    "STL": {
      "code": "STL",
      "name": "Lambert-St. Louis International Airport",
      "city": "St. Louis",
      "destinations": [
        "LAX",
        "MKE"
      ]
    }
  };
  $scope.currentAirport = null;

  $scope.setAirport = function (code){
    $scope.currentAirport = $scope.airports[code];
  };
}

you can see in the last statement ---> $scope.currentAirport = $scope.airports[code]; it use [] to access the JSON. I do not understand why it is used this way. I tried to experiment in another situation and it seems to work differently, here is my experiment:

HTML:

<html>
<head>

    <title>hello world</title>
</head>
<body>

</body>

<script type="text/javascript" src=jsfile.js></script>

<script type="text/javascript">

alert(airports[code]);

</script>

JS file:

airports = {
    "PDX": {
      "code": "PDX",
      "name": "Portland International Airport",
      "city": "Portland",
      "destinations": [
        "LAX",
        "SFO"
      ]
    },
    "STL": {
      "code": "STL",
      "name": "Lambert-St. Louis International Airport",
      "city": "St. Louis",
      "destinations": [
        "LAX",
        "MKE"
      ]
    }
};

and I get this on my browser "ReferenceError: Can't find variable: code" WHY? the JSON access way of this statement -----> $scope.currentAirport = $scope.airports[code]; is not equal to this statement -----> alert(airports[code]); ?????

why in the second case I can't use [] ? anyone knows please tell me

user3156452
  • 31
  • 5
  • The problem isn't that you can't use airports[code], the problem is that you haven't defined any variable called "code". Add the line "var code = 'PDX';" (without the quotes) on the line before the "alert(airports[code]);" and try again. – Robert Westerlund Jan 22 '14 at 16:52
  • This question seems not related to Angular, neither to JSON. How do you expect variable to be defined, when you never defined it? – Pavlo Jan 22 '14 at 16:54

1 Answers1

3

In the first example:

$scope.setAirport = function (code){
    $scope.currentAirport = $scope.airports[code];
};

code is passed to the function and they use it reference the airport code in the airport object.

In your example: 

alert(airports[code]);

code is undefined.

You need to define code, or manually pass an airport code to it.

snollygolly
  • 1,858
  • 2
  • 17
  • 31