Senden an ein verschachteltes JSON-Objekt mit Angularjs

Question

Ich habe ein Formular, das mit $ http.post zu einer externen API aufruft. Es funktioniert, aber ich muss jetzt Eingabefelder für Adresse, Stadt, Staat und Zip hinzufügen. Allerdings ist der JSON für die Adresse verschachtelt und ich habe alles versucht, um darauf zuzugreifen, konnte aber nicht. Der JSON sieht jetzt so aus. Und ich muss jetzt die Address-Eigenschaften in mein Formular posten.

{ 

"FirstName": "string", 

"LastName": "string", 

"Address": { 

    "Address1": "string", 

    "Address2": "string", 

    "City": "string", 

    "PostalCode": "string", 

    "Country": "string", 

    "State": "string", 
} 

Der HTML-Code:

<form novalidate="" role="form" name="prizeLogicForm" id="prizeForm" class="ng-pristine ng-invalid ng-invalid-required ng-valid-email"> 
      <h1 class="heading-sub-a-xl" style="margin-top: 20px; margin-bottom: 20px;">Entry Form</h1> 

      <div class="form-group" ng-class="{'has-error' : prizeLogicForm.FirstName.$invalid &amp;&amp; prizeLogicForm.FirstName.$dirty}"> 
       <label for="FirstName" class="align-form required">First Name</label> 
       <input type="text" class="form-control ng-pristine ng-invalid ng-invalid-required ng-touched" id="FirstName" name="FirstName" ng-model="FirstName" ng-required="true" required="required"> 
       <span class="help-block ng-hide" ng-show="prizeLogicForm.FirstName.$error.required &amp;&amp; prizeLogicForm.FirstName.$dirty">First Name is required.</span> 
      </div> 

      <div class="form-group" ng-class="{'has-error' : prizeLogicForm.LastName.$invalid &amp;&amp; prizeLogicForm.LastName.$dirty}"> 
       <label for="Lastname" class="align-form required">Last Name</label> 
       <input type="text" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" id="LastName" name="LastName" ng-model="LastName" ng-required="true" required="required"> 
       <span class="help-block ng-hide" ng-show="prizeLogicForm.LastName.$error.required &amp;&amp; prizeLogicForm.LastName.$dirty">Last Name is required.</span> 
      </div> 


      <div class="form-group" ng-class="{'has-error' : prizeLogicForm.Address1.$invalid &amp;&amp; prizeLogicForm.Address1.$dirty}"> 
       <label for="Lastname" class="align-form required">Address</label> 
       <input type="text" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" id="Address1" name="Address1" ng-model="Address1" ng-required="true" required="required"> 
       <span class="help-block ng-hide" ng-show="prizeLogicForm.Address1.$error.required &amp;&amp; prizeLogicForm.Address1.$dirty">Address is required.</span> 
      </div> 

      <div class="form-group" ng-class="{'has-error' : prizeLogicForm.City.$invalid &amp;&amp; prizeLogicForm.City.$dirty}"> 
       <label for="City" class="align-form required">City</label> 
       <input type="text" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" id="City" name="City" ng-model="City" ng-required="true" required="required"> 
       <span class="help-block ng-hide" ng-show="prizeLogicForm.City.$error.required &amp;&amp; prizeLogicForm.City.$dirty">City is required.</span> 
      </div> 

      <div class="form-group" ng-class="{'has-error' : prizeLogicForm.State.$invalid &amp;&amp; prizeLogicForm.State.$dirty}"> 
       <label for="State" class="align-form required">State</label> 
       <input type="text" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" id="State" name="State" ng-model="State" ng-required="true" required="required"> 
       <span class="help-block ng-hide" ng-show="prizeLogicForm.State.$error.required &amp;&amp; prizeLogicForm.State.$dirty">State is required.</span> 
      </div> 

      <div class="form-group" ng-class="{'has-error' : prizeLogicForm.Zip.$invalid &amp;&amp; prizeLogicForm.Zip.$dirty}"> 
       <label for="State" class="align-form required">Zip</label> 
       <input type="text" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" id="Zip" name="Zip" ng-model="Zip" ng-required="true" required="required"> 
       <span class="help-block ng-hide" ng-show="prizeLogicForm.Zip.$error.required &amp;&amp; prizeLogicForm.Zip.$dirty">Zip is required.</span> 
      </div> 



      <div class="form-group" ng-class="{'has-error' : prizeLogicForm.Phone.$invalid &amp;&amp; prizeLogicForm.Phone.$dirty}"> 
       <label for="phone" class="align-form required">Phone</label> 
       <input type="text" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" id="Phone" name="Phone" ng-model="Phone" ng-required="true" required="required"> 
       <span class="help-block ng-hide" ng-show="prizeLogicForm.Phone.$error.required &amp;&amp; prizeLogicForm.Phone.$dirty">Phone is required.</span> 
      </div> 

      <div class="form-group" ng-class="{'has-error' : prizeLogicForm.Email.$invalid &amp;&amp; prizeLogicForm.Email.$dirty}"> 
       <label for="email" class="align-form required">Email</label> 
       <input type="email" class="form-control ng-pristine ng-untouched ng-valid-email ng-invalid ng-invalid-required" id="Email" name="Email" ng-model="Email" ng-required="true" required="required"> 
       <span class="help-block ng-hide" ng-show="prizeLogicForm.Email.$error.required &amp;&amp; prizeLogicForm.Email.$dirty">Email is required.</span> 
      </div> 

      <div class="checkbox"> 
       <label> 
        <input type="checkbox" ng-model="AgreeToRules" ng-required="true" class="align-form required ng-pristine ng-untouched ng-invalid ng-invalid-required" required="required"> <strong>I have read and agree to be bound by the Official Rules and am 21 years of age or older. <span style="color: #d13a17;">*</span></strong> 
       </label> 
      </div> 
      <!--Remember to add newsletter option, its not added currently to the service.--> 
      <div class="checkbox"> 
       <label> 
        <input type="checkbox" ng-model="OptIn" ng-required="false" class="ng-pristine ng-untouched ng-valid ng-valid-required"> I would like to receive the Texas Tourism email newsletter and I understand that I may <a href="http://traveltex.us4.list-manage1.com/unsubscribe?u=e573ec85eee8fb1a7e9b35f86&amp;id=592bc032c8" target="_blank">unsubscribe</a> at any time. See our <a href="https://www.traveltexas.com/privacy" target="_blank">Privacy Policy</a> for more details. 
       </label> 
      </div> 

      <br> 
      <br> 
      <input type="submit" class="btn btn-primary" ng-disabled="prizeLogicForm.$invalid" value="Submit" ng-click="postdata(FirstName, LastName, AgreeToRules, OptIn, Phone, Email)" disabled="disabled"> <br><br> 
      <!--<input type="button" class="btn btn-secondary btn-bottom" value="Submit" ng-disabled="!checked" data-ng-click="postdata(FirstName, LastName, AgreeToRules, OptIn, Phone, Email)" /> <br /><br />--> 

     </form> 

AngularJS

$scope.IsSuccessVisible = false; 
    $scope.IsStatusVisible = false; // Hide form on init 
    $scope.IsFormVisible = true; // Show form on init 
    $scope.FirstName = null; 
    $scope.LastName = null; 
    $scope.Address1 = null; 
    $scope.City = null; 
    $scope.PostalCode = null; 
    $scope.State = null; 
    $scope.AgreeToRules = false; 
    $scope.OptIn = false; 
    $scope.Phone = null; 
    $scope.Email = null; 
    $scope.postdata = function (

     FirstName, 
     LastName, 
     Address1, 
     City, 
     PostalCode, 
     State, 
     AgreeToRules, 
     OptIn, 
     Phone, 
     Email 
     ) { 
     var data = { 
      FirstName: FirstName, 
      LastName: LastName, 
      Address1: Address1, 
      City: City, 
      PostalCode: PostalCode, 
      State: State, 
      AgreeToRules: AgreeToRules, 
      OptIn: OptIn, 
      Phone: Phone, 
      Email: Email 
     }; 
     //Call the services 
     $http.post('externalAPIurlhere', 

      JSON.stringify(data)).then(function (response) { 

       console.log("Success Status: ", response.data); 
       $scope.msg = response.data.UserGuid; 

       $scope.IsFormVisible = false; //Hide form 
       $scope.IsSuccessVisible = true; //Show form 



      }, function (response) { 
       console.log("Failure Status: ", response.data); 

       $scope.msg = response.data.Message; 

       if ($scope.msg === 'Model is invalid') { 
        $scope.msg = 'Invalid phone number. Try Again!'; 
        console.log('Message Updated'); 
       }; 
       $scope.statusval = response.status; 
       $scope.statustext = response.statusText; 
       $scope.headers = response.headers(); 
       $scope.IsFormVisible = false; //Hide form 
       $scope.IsStatusVisible = true; //Show form 

      }); 

Answer 1

erkannte ich, dass das Problem, um zu beheben, ich Setup hatte die var data = {. .} Sektionen Objektnotation buchstäblich die gleiche Art und Weise wie die JSON wurde ausgelegt. Dies erlaubte mir, erfolgreich an Address1, City, PostalCode und State zu posten. Allerdings Code $ scope.postdata Funktion benötigt, um alle Unter Eigenschaften wie so verweisen:

$scope.postdata = function (
     FirstName, 
     LastName, 
     AgreeToRules, 
     OptIn, 
     Phone, 
     OtherOptIn, 
     Email, 
     **Address1**, 
     **City**, 
     **PostalCode**, 
     **State** 
     ) 

So soll es so gewesen sein:

var data = { 
      FirstName: FirstName, 
      LastName: LastName, 
      AgreeToRules: AgreeToRules, 
      OptIn: OptIn, 
      Phone: Phone, 
      OtherOptIn: OtherOptIn, 
      Email: Email, 
      **Address**: { 
       **Address1**: **Address1**, 
       **City**: **City**, 
       **PostalCode**: **PostalCode**, 
       **State**: **State** 
      } 

Ich hoffe, das jeden, der in eine Form veröffentlichen will hilft Verwenden einer externen API.