title: Get/display object and properties from array in AngularJS
body: <p>I'm working on a project where I'm trying to add a User object to a Logins array with properties that are input by a user.</p>
  
  <p>Once added to the Logins array, I'm trying to display the User object (id, firstName, lastName) in a single list item. Each new User is added next in line on the list.</p>
  
  <p>What I'm trying to do is make each property of the object accessible, in order to do something like validate for multiple IDs/duplicate names by searching through user.id. Right now I've only been able to display from the array that I'm pushing my data to, as three list items. </p>
  
  <p>Is there a way to store my user input so that I could display the User object itself in one list item, rather than (what looks like) three separate pieces of data? Code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html  ng-app&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
  
  function LoginController($scope) {
      $scope.user = {
          id: "",
          firstName: "",
          lastName: ""
      };
      $scope.logins = [];
      $scope.login = function () {
          $scope.logins.push($scope.user.id, $scope.user.firstName, $scope.user.lastName);
          console.log($scope.logins);
  
      };
  
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div ng-app ng-controller="LoginController"&gt;
      &lt;div&gt;Hello {{ user.firstName }}&lt;/div&gt;
      &lt;input ng-model="user.id"&gt;&lt;/input&gt;
      &lt;input ng-model="user.firstName"&gt;&lt;/input&gt;
      &lt;input ng-model="user.lastName"&gt;&lt;/input&gt;
  
      &lt;input type="submit" ng-click="login()" value="Login"&gt;&lt;/input&gt;
      &lt;ul&gt;
      &lt;li ng-repeat="login in logins"&gt;{{ login }}&lt;/li&gt;
      &lt;/ul&gt;    
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>