Angularjsを使用して入れ子になったJSONオブジェクトに投稿する

Question

$ http.postを使用して外部APIを呼び出すフォームがあります。しかし、それでは、Address、City、State、Zipの入力フィールドを追加する必要があります。しかし、アドレスのjsonはネストされており、アクセスするためにすべてを試しましたが、できませんでした。 jsonはこれのように今見える。そして今私のフォームにAddressプロパティを投稿する必要があります。

{ 

"FirstName": "string", 

"LastName": "string", 

"Address": { 

    "Address1": "string", 

    "Address2": "string", 

    "City": "string", 

    "PostalCode": "string", 

    "Country": "string", 

    "State": "string", 
} 

HTMLコード：

<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

私は問題を解決するために、私はセットアップにするvarデータ=を{持っていたことに気づきました。 }} JSONがレイアウトされたのとまったく同じ方法でオブジェクト表記をセクション化します。これにより、私はAddress1、City、PostalCode、Stateに正常に投稿することができました。そのようなすべてのサブプロパティを参照するために必要なただし$ scope.postdata機能コード：

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

をだから、このようにされている必要があります。

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** 
      } 

私は、このフォームに投稿したい人の役に立てば幸い外部APIを使用します。