How to update existing JS Object using forms - Angular JS

Question

I am converting my existing project to angularJs and there is a JS Object I that I keep update on form submit.

autoquoteDTO.js:

$.getAutoQuoteObject = function() {
  var autoQuoteObject = new autoQuote();
  autoQuoteObject.DriverVehicleInfo = new DriverVehicleInfo();
  autoQuoteObject.DriverVehicleInfo.Vehicles = [];
  autoQuoteObject.DriverVehicleInfo.Drivers = [];
  autoQuoteObject.ApplicationInfo = new ApplicationInfo();
  autoQuoteObject.ApplicationInfo.Discount = new Discount();
  autoQuoteObject.ApplicationInfo.GeneralPartyInfo = new GeneralPartyInfo();
  autoQuoteObject.ApplicationInfo.GeneralPartyInfo.ContactInfo = new Contact();
  autoQuoteObject.ApplicationInfo.MostRecentInsurance = new MostRecentInsurance();
  autoQuoteObject.RequestedCoverage = new RequestedCoverage();
  autoQuoteObject.RequestedCoverage.PolicyCoverage = new PolicyCoverage();
  autoQuoteObject.RequestedCoverage.PolicyCoverage.Coverages = [];
  autoQuoteObject.RequestedCoverage.VehicleCoverage = [];
  autoQuoteObject.SessionInfo = new SessionInfo();
  return autoQuoteObject;
}

function autoQuote() {
  this.DriverVehicleInfo = null;
  this.ApplicationInfo = null;
  this.RequestedCoverage = null;
  this.SessionInfo = null;
}
var DriverVehicleInfo = function() {
  this.Drivers = [];
  this.Vehicles = [];
  this.DriverVehicleUsages = [];
};
var Driver = function() {
  this.ID = null, this.PersonInfo = null, this.DriverRelationshipToApplicant = null, this.DriverRelationshipToApplicantCd = null, this.DriverLicense = null, this.DriverDetails = [], this.Incident = null, this.IsValid = false
};
var PersonInfo = function() {
  this.FirstName = null, this.Initial = null, this.LastName = null, this.Suffix = null, this.SSN = null, this.GenderCd = null, this.BirthDate = null, this.MaritalStatusCd = null, this.OccupationClassCd = null, this.YearsOccupation = null, this.HighestEducation = null, this.AgeInYears = 0, this.SpouseLicenseStatus = null
};
var DriverLicense = function() {
  this.AgeLicense = null, this.USLicenseStatus = null, this.DriverLicenseNumber = null, this.StateProvCd = null
};
var DriverDetail = function() {
  this.DriverDetailCd = null, this.DriverDetailValue = null, this.DriverDetailDate = null
};
var Incident = function() {
  this.ClaimAccidentsCount = null, this.ViolationsCount = null, this.HasLicenseBeenRevoked = null, this.LicenseSuspensionRevokedDate = null, this.HasRequiredCourtOrderedFinancial = null, this.ClaimAccidents = [], this.Violations = [], this.DUIs = []
};
var DUI = function() {
  this.DateOfDUI = null, this.OtherValues = []
};
var ClaimAccident = function() {
  this.Id = null, this.ClaimAccidentCd = null, this.displayText = null, this.ClaimAccidentDate = null, this.DateDisplayText = null, this.Comprehensive = null, this.Collision = null, this.RentalReimbursement = null, this.MedicalPayment = null, this.PayToOtherParty = null, this.IsInjury = null, this.IsPropertyDamage = null
};
var Violation = function() {
  this.Id = null, this.ViolationCd = null, this.ViolationDate = null, this.displayText = null
};
var Vehicle = function() {
  this.ID = null, this.VehicleHaveVin = false, this.VehicleIdentificationNumber = null, this.VehicleYear = null, this.VehicleMake = null, this.VehicleModel = null, this.VehicleSubModel = null, this.AntiLockBrakeCd = null, this.AntiTheftDeviceCd = null, this.VehicleUseCd = null, this.NumDaysDrivenPerWeek = null, this.DistanceOneWay = null, this.EstimatedAnnualDistance = null, this.OwnershipCd = null, this.RegistrationStateProvCd = null, this.VehIdentificationNumber = null, this.IsCustomizedOrAltered = null, this.OriginalVehicleCost = null, this.IsValid = false, this.VehicleType = null, this.VehicleVinStub = null, this.ShowVehicleAntiLockBrakeInfo = false, this.VehicleCost = null, this.ShowVehicleCost = false, this.DaytimeLights = null
};
var DriverVehicleUsage = function() {
  this.DriverIDRef = null, this.VehicleIDRef = null, this.Usage = null
};
var ApplicationInfo = function() {
  this.GeneralPartyInfo = null, this.Discount = null, this.MostRecentInsurance = null, this.ConsumerContactAuth = null, this.ConsumerInfoAuthorization = null, this.ConsumerContactMobileAuth = null
};
var GeneralPartyInfo = function() {
  this.MainApplicantDriverIDRef = null, this.Address = null, this.PreviousAddress = null, this.ContactInfo = null, this.ResidenceInfo = null, this.ListedVehiclesRegisteredTo = null, this.CreditScore = 0
};
var AddressInfo = function() {
  this.Address = null, this.City = null, this.State = null, this.PostalCode = null, this.County = null
};
var PreviousAddress = function() {
  this.Address = null, this.City = null, this.State = null, this.PostalCode = null, this.County = null
};
var Contact = function() {
  this.Phones = [], this.Emails = []
};
var Email = function() {
  this.EmailTypeCd = null, this.EmailAddress = null
};
var Phone = function() {
  this.PhoneTypeCd = null, this.PhoneNumber = null
};
var Residence = function() {
  this.LengthAtCurrentAddressCd = null, this.ResidenceTypeCd = null, this.NumberDriversInHouseHold = null, this.VehiclesRegistedToInsured = null, this.DriverResidentsFromFL = null, this.CityLimits = null
};
var Discount = function() {
  this.ResidentialInsurancePolicy = null, this.OwnBoat = null, this.OwnMotorCycle = null, this.IsAAAMember = null
};
var MostRecentInsurance = function() {
  this.HasAutoInsurance = null, this.InsuranceCompanyName = null, this.CurrentInsurancePaying = null, this.LengthWithCurrentInsuranceCd = null, this.BodilyInjuryLiabilityLimit = null, this.LengthContinuouslyInsuredCd = null, this.ExpirationDate = null, this.InsuranceCanceledForNonPay = null, this.ClaimDeniedDueToFraud = null
};
var RequestedCoverage = function() {
  this.EffectiveDate = null, this.StateCd = null, this.PolicyCoverage = null, this.VehiclesCoverage = []
};
var PolicyCoverage = function() {
  this.Coverages = []
};
var Coverage = function() {
  this.CoverageCd = null, this.CoverageValue = null
};
var VehicleCoverage = function() {
  this.IsValid = false, this.VehicleIDRef = null, this.Coverages = []
};
var SessionInfo = function() {
  this.SessionId = '', this.SecurityToken = '', this.Zip = '', this.StateCode = '', this.PageName = '', this.PageTheme = '', this.CarrierId = -1, this.ReturnedCarrierTypes = null, this.CoveragePackage = '', this.UseExistingSession = false, this.QuoteStatus = '', this.SID = -1, this.SRC = null, this.SRC_QCP = null, this.Referral = null, this.ClientIP = null, this.BrowserType = null, this.CLK = 0, this.QTR = '', this.CCID = '', this.AFF = '', this.PreviousSessionId = '', this.IgnoreErrors = false, this.RetrieveSource = '', this.PreviousPageName = ''
}

prapareJson.js:

var prepareAutoQuoteDTO = {
    postAutoQuoteObj: $.getAutoQuoteObject(),  
    initializeDriverObj: function()
    {
        var driverLocObj           = new Driver();
        driverLocObj.PersonInfo    = new PersonInfo();
        driverLocObj.DriverLicense = new DriverLicense();
        driverLocObj.Incident      = new Incident();
        return driverLocObj;
    },

    initializeAppInfo: function()
    {
        var appInfoLocObj           = new ApplicationInfo();
        appInfoLocObj.Discount      = new Discount();
        return appInfoLocObj;

    },
    /*
    * Initialize Vehicle object for autoQuoteDTO.js
    */
    initializeVehicleObj: function()
    {
        var vehicleLocObj = new Vehicle();
        return vehicleLocObj;
    },

    rc1Step1DTO: function()
    {
       /*
        * store session info
        */
        var emailId = $('#save_quote_email').val();
        if (typeof emailId  !== "undefined" && emailId && emailId != '' && emailId != 'Email Address')
        {
            var email           = new Email();
            email.EmailTypeCd   = 'PRIMARY';
            email.EmailAddress  = emailId;
            this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo = this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo || new Contact();
            this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails = [];
            this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails.push(email);
        }
};

update json on user event code:

prepareAutoQuoteDTO.rc1Step1DTO();

The new Angular JS code that should update the JS Object:

 (function(){
    "use strict";
    angular
    .model("autoQuote")
    .controller("prepareDTO","prepareDTO")
    .controller("postDTO","postDTO");
        /*
         * Call actions on page load
         */
    var init = function () {
                 prepareDTO();    
        }
        init();

        /*
         * prepare DTO with form elements.
         */
        function prepareDTO()
    {
         var vm = this;
         vm.postAutoQuoteObj = [];   
    }

        /*
         * post DTO on form submit and page onload.
         */
        function postDTO()
        {

        }     

 });

The form logic should be contained in the prepareDTO funtion.

The expected behavior is if step1 form is submitted, then rc1Step1DTO should be called and JS data should be saved.

Looking for suggestions to achieve this and best practices.

Plunker of my complete code is http://plnkr.co/edit/VJKrDRMJY3Q73bsCgVwX?p=preview.

I can remove/edit this file and everything in Angular JS but lie stuck how to do that in AngularJS.

There is not enough information, what are you trying to do : create a form in the angular way and post the data to your server on submit ? If so you should check "angularjs form sample" on the net such question doesn't fit on SO. — Walfrat, Jun 24 '16 at 09:49
I added a json in which I was adding information on ui onload or form submit. I just want to know how to use such json in angualr js. I want add prepareAutoQuoteDTO in autoQuote model. — Praveen D, Jun 24 '16 at 09:52
You're mistunderstanding JSON and Javascript Object, JSON is a seralization format, it's a huge string in a specific format used between different programs to exchange information. WHat you have here are just normal Javascript object, if you pass the objects into a $htt.post, angularJS will transform them to JSON automatically. This happen often because the Javascript syntax when declaring multiple level object is exactle the same as the JSON format. — Walfrat, Jun 24 '16 at 09:54
Here i added prapareJson.js file where I maintain json data. how can i creta sam in angular js — Praveen D, Jun 24 '16 at 11:07
As i said, it's not JSON, you instantiated Javascript Objects. So it's exactly the same in angular. — Walfrat, Jun 24 '16 at 11:10
Check this link to understand the difference : http://stackoverflow.com/questions/8294088/javascript-object-vs-json — Walfrat, Jun 24 '16 at 11:11
How to convert now my project to angulat js. i am beginner to angular js and need some suggestion. — Praveen D, Jun 24 '16 at 12:02
added prepareAutoQuoteDTO.js to plunkr, what I want to achieve here is if step1 form is submitted rc1Step1DTO should be called and json should save that data. — Praveen D, Jun 24 '16 at 12:49
Are you sure `.model("autoQuote")` is correct? Shouldn't it be `.module("autoQuote")` ? — Krzysztof Atłasik, Jun 24 '16 at 13:21

Krzysztof Atłasik · Answer 1 · 2019-03-06T16:02:51.380

You can move all your code into a factory, and then inject it into a controller. All your other dependencies (like Driver) must be included before this executes or could be even declared in prepareDtoFactory function.

angular
.model("autoQuote")
.controller(dtoController)
.factory(prepareDtoFactory);

function dtoController(prepareDtoFactory){
     prepareDtoFactory.rc1Step1DTO(); //call function from your service, and do something with it
}

dtoController.$inject = ['prepareDtoFactory'];

function prepareDtoFactory(){

    var prepareAutoQuoteDTO = {
        postAutoQuoteObj         : $.getAutoQuoteObject(),  
        initializeDriverObj: function(){
            var driverLocObj           = new Driver();
            driverLocObj.PersonInfo    = new PersonInfo();
            driverLocObj.DriverLicense = new DriverLicense();
            driverLocObj.Incident      = new Incident();
            return driverLocObj;
       },
       initializeAppInfo: function(){
           var appInfoLocObj           = new ApplicationInfo();
           appInfoLocObj.Discount      = new Discount();
           return appInfoLocObj;
       },
       /*
       * Initialize Vehicle object for autoQuoteDTO.js
       */
       initializeVehicleObj: function(){
           var vehicleLocObj = new Vehicle();
           return vehicleLocObj;
       },
       /*
       * store session info
       */
       rc1Step1DTO: function(){

            var emailId = $('#save_quote_email').val();
            if (typeof emailId  !== "undefined" && emailId && emailId != '' && emailId != 'Email Address'){
                var email           = new Email();
                email.EmailTypeCd   = 'PRIMARY';
                email.EmailAddress  = emailId;
                this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo =     this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo || new Contact();
                this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails = [];
                this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails.push(email);
            }
        }
    };
    return prepareAutoQuoteDTO;
}

This is really helpful suggestion. Here in step1 and step2 I have form with inputs. when I submit this form I want to call dtoController and send this data to server(api) to save. How to call this function and send data to server. — Praveen D, Jun 25 '16 at 08:41
Complete code can be seen here http://plnkr.co/edit/VJKrDRMJY3Q73bsCgVwX?p=preview — Praveen D, Jun 25 '16 at 10:21
Getting error when I included your code. Error [$injector:pget] Provider 'function prepareDtoFactory()' must define $get factory method. — Praveen D, Jun 27 '16 at 04:44

score 0 · Answer 2 · answered Jul 01 '16 at 07:20

following the AJS guide:

HTML

<div ng-controller="prepareDTO as pdt">
  <form novalidate class="simple-form">
    E-mail: <input type="email" ng-model="pdt.user.email" /><br />
    <input type="button" ng-click="pdt.reset()" value="Reset" />
    <input type="submit" ng-click="pdt.update(user)" value="Save" />
  </form>
  <pre>user = {{user | json}}</pre>

</div>

app.js

function prepareDTO()
    {
         var vm = this;

         vm.user = {
           email: ''
         };

         vm.update = function(user){
           prepareAutoQuoteDTO.rc1Step1DTO(user.email);

         }
    }

please note that prepareAutoQuoteDTO.rc1Step1DTO in order to avoid errors should be modified as:

rc1Step1DTO: function(email)
    {
       /*
        * store session info
        */
        var emailId = email;
        if (typeof emailId  !== "undefined" && emailId && emailId != '' && emailId != 'Email Address')
        {
            var email           = new Email();
            email.EmailTypeCd   = 'PRIMARY';
            email.EmailAddress  = emailId;
            this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo = this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo || new Contact();
            this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails = [];
            this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails.push(email);
       }
}

How to update existing JS Object using forms - Angular JS

2 Answers2