Angular JS: how to "load" an individual record from a json dataset?

Question

I have json data, an array of 50 objects representing people. Each one has parameters like id and lastName.

I load this into my controller via a resolve, EmployeeResolve, and into a variable _this.employees

I also load via $state params from a previous page a rowNumber variable that holds the ID of the record the user clicked on: _this.rowNum = $stateParams.id;let's say the id is 5.

I would like to assign to a variable now the object number 5 (for want of a better way of explaining) so that in my HTML I can bind to it as in {{controller.lastName}}

What's the syntax for getting the 5th item out of employees?

UPDATE After several helpful comments and answers, I've gotten this far (people are now packages):

_this.recordNum = Number($stateParams.id);
  _this.packages = PackagesResolve;

  _this.currentPackage = _this.packages.filter(function(pkg) {
    return pkg.id === _this.recordNum;
  });

  $log.debug('package from filter', _this.currentPackage[0].status);

Note though, I expected after all this for _this.currentPackage to contain an object, so I could simply bind to its props in the html as in currentPackage.last_name But it does not. It's a resource and I need to use the above _this.currentPackage[0].status in the log statement to get anything. And that's not going to allow binding.

A colleague suggested modifying my resolve as such

PackagesResolve: function($log, MockDataFactory) {
      return MockDataFactory.query({filename: 'packages'}).$promise.then(function(response) {
        return response;
      });
    }

Adding the whole $promise.then part. No real difference.

To reiterate what I am trying to do:

PackagesResolve is getting a json array of 50 objects. I want to be able to get the CURRENT object when its row in a table of that json is clicked.

And no, @jdvp it's not a duplicate of that other post at all. I need to do this with Angular, not jquery or straight js.

Answer 1

If I'm understanding your issue correctly: the object returned by resolve is the resolved promise. The "data" of the resolved promise, which in this case would be the expected array of people info, is stored inside resolve.data. So for e.g. you have EmployeeResolve, you can reference the array and store it using:

Editing based on comments:

// Assuming you've done all error checking...
_this.employees = EmployeeResolve.data;

// Now _this.employees has the array of people info.

$scope.controller = {};
$scope.controller.variableName = _this.employees[$stateParams.id];
// Now, you can access your object in your template using controller.variableName.

Now although I wouldn't recommend writing code like that in your final version, I'm sure you get the gist. ;)

Additional notes: The reason I'm creating an empty object and storing it as controller on the scope is because your question stated it. I am assuming you have your own reasons for wanting to namespace your variable inside of controller.

Hope this helps!