Associating individual JSON datasets with AngularJS user id
I am having trouble figuring out how to store data as separate forms, but concatenating it inside angularJS. This is for educational and testing purposes, so I don't have to worry about setting this data to the db or using any type of storage other than application session and localstorage. For the test I will be hard-coded my JS.
I am uploading a photo to showcase my thoughts and I will explain this as well: 
So my main data is the customer group. I have it set to repeat and display using ng-repeat. No big worries. I can add and update each one. When I had the sentences attached to the clients json object then when I edited the user it will remove those sentences and quotes. So I want them to be seperated but allow them to be called in the DOM by a specific user.
My problem: I don't know how to bind objects, objects and update them in the dom anytime another activity happens. Here is the pen of what I have http://codepen.io/ddavisgraphics/pen/pvRZOv?editors=101 .
Sample code data:
var customerArray = [
// Start Customer
//--------------
{
customerID:1,
customer: 'Joe Frankelton',
phone: 1244957323,
email: 'jFrank@gmail.com',
// start address
address: {
line1:'248 Gallows Rd',
city:'Hangtown',
state:'West HangState',
zip:24750
},
}, // End Customer
// Start Customer
//--------------
{
customerID:2,
customer: 'Danny Manny',
phone: 1245423323,
email: 'dman@gmail.com',
// start address
address: {
line1:'253 Cow Run Rd',
city:'Beeftown',
state:'PA',
zip:24750
},
}, // End Customer
];
var proposals = [
{ // Proposal 1
customerID: 1,
projectTitle: 'Gameify Me Captin',
type: 'GameDesign',
deadline: 'Jan. 2, 2015',
deliveryType: 'Files',
problem: 'The problem is that the customer wants to much crap.',
notes: 'clients mother wants to be involved because she designed a peice of toast in 1973',
},
{ // Proposal 2
customerID: 2,
projectTitle: 'Playing',
type: 'Website',
deadline: 'Jan. 2, 2017',
deliveryType: 'Sites',
problem: 'Everything',
notes: 'client will be easy to work with, wants pink and blue',
},
];
var quotes = [
{
customerID: 2,
quoteNum: 2,
projectTitle: 'Project Title',
type: 'Graphic Design',
deadline: 'Jan. 2, 2015',
billableHrs: 11,
hourlyRate: 42.50,
externalCost: 33.99,
tax: 0.6,
}
];
source to share
What you can do is create a customer view model by mapping data from multiple sources, i.e. customers, offers and quotes.
You can use clientID to connect, for example:
customer.proposals = proposals.filter(function(prop){
return prop.customerID === custId;
});
So, you would do:
function getMappedCustomer() {
return customerArray.map(function(customer){
var custId = customer.customerID;
customer.proposals = proposals.filter(function(prop){ return prop.customerID === custId;});
customer.quotes = quotes.filter(function(quot){ return quot.customerID === custId; });
return customer;
});
}
// Init current data
$scope.customers = getMappedCustomer();
Configure the updated client in the same way. If you want to keep customerArray
, use angular.copy(customerArray)
and match against it.
source to share