Cannot get input form items to populate table - angularjs

Question

I'm currently building a simple little app to as I learn angular.js, and am having a bit of trouble populating a table with the data keyed in by the user. I'm receiving an error:
Cannot read property 'push' of undefined
The JS is below:
var app = angular.module('yardApp', []);
app.controller('mainController', function($http){
var yardSale = this;
yardSale.forSale = [];
yardSale.login = function(){
yardSale.loggedIn = true;
$http({
method: "POST",
url: "/user",
data: { username:yardSale.username }
}).then(function(result){
console.log(result.data);
yardSale.userId = result.data._id;
yardSale.userId = result.data.username;
});
};
yardSale.addItem = function(){
console.log(yardSale.item.product);
yardSale.items.push(yardSale.item);
// yardSale.item = {};
};
}):
The html looks like:
<div>
<h1>Welcome to the Yard Sale!!</h1>
<h2 ng-hide="yardSale.loggedIn"> Plese login to get started.</h2>
<h2 ng-show="yardSale.loggedIn">Welcome {{ yardSale.username }}!</h2>
<h2 ng-show="yardSale.loggedIn">Have anything you'd like to sell?</h2>
<h3 ng-show="yardSale.loggedIn">Please, list it here!</h3>
</div>
<form ng-submit="yardSale.login()" ng-hide="yardSale.loggedIn">
<input type="text" placeholder="Please enter a username" ng-model="yardSale.username">
<input class="btn btn-primary" type="submit" value="login">
</form>
<div class="row" ng-show="yardSale.loggedIn">
<form ng-submit="yardSale.addItem()">
<input type="text" placeholder="Item for Sale" ng-model="yardSale.item.product">
<input type="text" placeholder="Price you'd like" ng-model="yardSale.item.price">
<input type="date" placeholder="Date Listed" ng-model="yardSale.item.date">
<input class="btn btn-primary" type="submit" value="add">
</form>
<table class="col-md-6 col-md-offset-4 table-bordered">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
<th>Date Listed</th>
</tr>
</thead>
<tbody>
<tr ng-repeat=" item in yardSale.items">
<td>{{ item.product }}</td>
<td>{{ item.price | currency }}</td>
<td>{{ item.date | date }}</td>
</tr>
</tbody>
</table>
</div>
i can console log yardsale.item.product and see what I enter, but cannot populate it to the table

Answer 1

You get the error cannot read property push of undefined because of your variable called items. Try to do add yardSale.items = [] after this line of code aka your constructor.
var yardSale = this;
yardSale.forSale = [];
yardSale.items = [];

Answer 2

cannot read property push of undefined
This error appears when you are trying to access the value of a variable which is not declared. In this case yardSale.items is never declared. The compiler should be made known of such an attribute exists for the object yardSale, also whether that attribute (ie items) is an object or an array. Hence the answer by #amcpanaligan is a correct solution. you need to declare it as:
yardSale.items = [];
The try:
yardSale.items.push(yardSale.item);
It will work.