After spending countless hours on this project, I still can't figure out how to post data into a table using JavaScript objects. While I can easily work with smaller data sets, I'm struggling with handling multiple nested objects.
EDIT: The main issue I'm facing is that the data from the submission form is not getting posted to the table when the submit button is clicked. I need to be able to add multiple entries to the table and then include quotes and proposals later on.
Additionally, it would be great if someone could guide me through working with nested JavaScript objects, especially when using Angular. Most resources focus on single objects rather than dealing with nested structures.
If you could shed some light on why my current approach isn't working and suggest alternative methods, I would greatly appreciate it. Here's the link to the CodePen: CodePen
Javascript
(function () {
// JavaScript code goes here...
})();
HTML
<body ng-app="app" ng-controller="CustomerCtrl as cust">
<h2> Customers </h2>
<table>
<tbody>
<tr>
<th>Customer</th>
<th>Phone</th>
<th>Email</th>
<th>Address</th>
<th>Proposals</th>
<th>Quotes</th>
</tr>
<tr ng-repeat="customer in cust.customers">
<td> {{customer.customer}}</td>
<td> {{customer.phone}} </td>
<td>{{customer.email}}</td>
<td>
<ul class="address">
<li> {{customer.address.line1}} </li>
<li> {{customer.address.city}}, {{customer.address.state }}, {{customer.address.zip}}</li>
</ul>
</td>
<td>
<ul >
<li ng-repeat="prop in customer.proposals">{{prop.project_title}}</li>
</ul>
</td>
<td>
<ul >
<li ng-repeat="quote in customer.quotes ">{{quote.quote_num}}</li>
</ul>
</td>
</tr>
</tbody>
</table>
<div>
<form novalidate class="simple-form" ng-submit="cust.AddCustomer(new)">
<h2> Add A Customer</h2>
<label> Customer Name:</label><input type="text" ng-model="customer" /><br/>
<label>Customer Email:</label><input type="email" ng-model="email" /><br/>
<label>Customer Phone:</label><input type="text" ng-model="phone" /><br/>
<label>Customer Address:</label><input type="text" ng-model="line1" placeholder="Address/ PO Box"/><br/>
<input type="text" ng-model="city" placeholder="City" /><br/>
<input type="text" ng-model="state" placeholder="State"/><br/>
<input type="text" ng-model="zip" placeholder="Zip" /><br/><br/>
<button type="submit"> Submit </button>
</form>
</div>
<div class="newCustomerData">
<h2> The Customer You're Adding: </h2>
<div><strong>Name:</strong> {{customer}} </div>
<div><strong>Email:</strong> {{email}} </div>
<div><strong>Phone:</strong> {{phone}} <</div>
<div><strong>Address:</strong> {{line1}}<br/> {{city}}, {{state}} {{zip}} </div>
</div>
</body>