How to select property from object in javascript using a variable containing the property name

Question

In an AngularJS controller i have created a function which makes a JSONP request. This request returns a JSONP object which has the following format.

[{  
  "Domain_1":{  
    "Notes":"This information can be usefull for generic information",
    "Contacts":[  
      {  
        "ContactName":"P. rimary",
        "ContactPhone":"+31 612 273 88"
      }
    ]
  },
  "Domain_2":{  
    "Notes":"This information can be usefull for generic information",
    "Contacts":[  
      {  
        "ContactName":"S. secondary",
        "ContactPhone":"+31 612 273 88"
      }
    ]
  }
}];

The object is returned successfully when making the JSONP request in the following function. ($scope.method and $scope.domainName are set at scope level) What i want is to achieve is to select a specific part of the JSON data matching the value in $scope.domainName and assign this to a scope variable $scope.domainData.

$scope.fetch = function() {
  $scope.code = null;
  $scope.response = null;

  // Only make JSONP request if domain name is known
  if ($scope.domainName !== null) {
    $http({method: $scope.method, url: $scope.url, timeout: 5000}).
      success(function(data, status) {
        $scope.status = status;
        console.log("Data:") ; console.dir(data) ;
        console.log("Domain Name"  + $scope.domainName) ;
        $scope.domainData = data[$scope.domainName] ;
        console.log("DomainData: ") ; 
        console.dir($scope.domainData) ;
      }).
      error(function(data, status, headers, config) {
        $scope.domainData = null ;
        $scope.status = status;  
        console.log("$scope.fetch failed" + $scope.status + " :: " + data) ;       
      });
  } else {
      console.log("Shame... nothing to do..... ") ;
  }
};

When the code is executed the Domain Name is "Domain_1" and data contains (shown in console);

0: Object
  Domain_1: Object
    Contacts: Array[1]
      0: Object 
        ContactName:"P. rimary"
        ContactPhone:"+31 612 273 88"
...

But $scope.domainData is undefined. How can make this selection work correctly?

The answer to the question in the header is: use [bracket notation](http://stackoverflow.com/a/11922384/1169519). — Teemu, Feb 09 '15 at 21:07

rchang · Accepted Answer · 2015-02-09T21:22:03.323

1

Your response object appears to be an array at the top level, based on the encapsulating square brackets. That means you won't be able to directly dereference it with the domain name. One approach to remedy this would be something like the following in your success function:

$scope.domainData = data[0][$scope.domainName];

This is of course only advisable to hardcode that 0 if you're always sure your response object will be an array of length 1 (as it is in your example). If that will not always be the case, you may have to implement some kind of iterative traversal looking for a matching property.

edited Feb 09 '15 at 21:22

answered Feb 09 '15 at 21:15

rchang

5,150
1
15
25

You are right! The array at the top level was not necessary. After removing it from the JSONP repsonse, $scope.domainData now contains ' {Notes: "This information can be usefull for generic information", Contacts: Array[1]} ' – pcvnes Feb 09 '15 at 22:25
@pcvnes I'm glad to hear it worked out. Please accept the answer if you found it useful. – rchang Feb 09 '15 at 22:40

score 0 · Answer 2 · answered Feb 09 '15 at 21:00

0

to access the data in the response you should access the data property of the response.

...
$http({method: $scope.method, url: $scope.url, timeout: 5000}).
  success(function(response, status) {
  ...
  # With the latest versions of angularJs (I don't know in which
  # version was that), the data is in the
  # response's data property
  $scope.domainData = response.data[$scope.domainName] ;
  ...

answered Feb 09 '15 at 21:00

Nafaa Boutefer

2,169
19
26

According to the AngularJS reference (https://docs.angularjs.org/api/ng/service/$http) the data is already returned as the first argument. Tried it anyhow, but indeed as expected it throws an error data response.data is undefined. – pcvnes Feb 09 '15 at 22:00

How to select property from object in javascript using a variable containing the property name

2 Answers2