AngularjsでJSON配列に新しいオブジェクトを追加する$ http

Question

新しいオブジェクトを既存のJSON配列に追加しようとしています。これはデータベースに格納されたJSON配列です。

{ 
    "Id":4, 
    "UserId":2336276, 
    "Name":"Data", 
    "Widgets":[ 
     { 
     "Id":1, 
     "Description":"Test1", 
     "DataSource":"Person1", 
     "ChartType":"bar", 
     "x":0, 
     "y":0, 
     "width":3, 
     "height":2 
     }, 
     { 
     "Id":2, 
     "Description":"Test2", 
     "DataSource":"Person2", 
     "ChartType":"pie", 
     "x":3, 
     "y":0, 
     "width":3, 
     "height":2 
     }, 
     { 
     "Id":3, 
     "Description":"Test3", 
     "DataSource":"Person3", 
     "ChartType":"heatmap", 
     "x":6, 
     "y":0, 
     "width":3, 
     "height":2 
     } 
    ] 
} 

新しいウィジェットを追加したい場合、このJSON配列のオブジェクトとして使用します。

これは私の角度HTTP呼び出しです：

$scope.addWidget = function() { 
     var Indata = { 
      "Id": $scope.widgets.Widgets.length + 1, 
      "name": $scope.name, 
      "description": $scope.Widgets.description, 
      "datasource": $scope.Widgets.datasource, 
      "charttype": $scope.Widgets.charttype, 
      "x": $scope.Widgets.x = 0, 
      "y": $scope.Widgets.y = 0, 
      "width": $scope.Widgets.width = 3, 
      "height": $scope.Widgets.height = 2 
     }; 
     $http({ 
      url: "Dashboard/AddWidget", 
      method: "POST", 
      params: Indata 
     }) 
     $scope.widgets.push(Indata); 

    }; 

そして、これは私のHTMLページです：私はAddwidgetをクリックすると

<md-dialog> 
<form ng-cloak> 
    <md-toolbar> 
     <div class="md-toolbar-tools"> 
      <h2>New widget</h2> 
      <span flex></span> 
     </div> 
    </md-toolbar> 


    <md-input-container> 
     <label>Name</label> 
     <input type="text" ng-model="name"> 
    </md-input-container> 

    <md-dialog-content> 
     <label>Datasource</label> 
     <md-select ng-model="datasource"></md-select> 
    </md-dialog-content> 

    <md-dialog-content> 
     <label>Type graph</label> 
     <md-select ng-model="graphtype"></md-select> 
    </md-dialog-content> 

    <md-input-container> 
     <label>Description</label> 
     <input type="text" ng-model="description"> 
    </md-input-container> 

    <md-dialog-actions layout="row"> 

     <md-button id="add" ng-click="addWidget()"> 
      Add widget 
     </md-button> 

     <md-button ng-click="hide()"> 
      Cancel 
     </md-button> 

    </md-dialog-actions> 
</form> 

それはJSON配列に追加しません新しいオブジェクトとしてそれの外側にあります。私は確信していませんが、私は入れ子になったjson配列に何か間違っていると思います。

私は間違っていますか？あなたは、データベースから取得したJSONオブジェクトにそれを追加しない

[HttpPost] 
    public string AddWidget(Dashboard model) 
    { 
     var data = _dashboarBusiness.StoreDashboard(model); 
     return Newtonsoft.Json.JsonConvert.SerializeObject(data); 
    } 

Answer 1

：

種類は

UPDATEについて。

は、その後、あなたがこのオブジェクトのウィジェット配列にプッシュする必要が

$scope.jsonObj= { 
    "Id":4, 
    "UserId":2336276, 
    "Name":"Data", 
    "Widgets":[ 
     { 
     "Id":1, 
     "Description":"Test1", 
     "DataSource":"Person1", 
     "ChartType":"bar", 
     "x":0, 
     "y":0, 
     "width":3, 
     "height":2 
     }, 
     { 
     "Id":2, 
     "Description":"Test2", 
     "DataSource":"Person2", 
     "ChartType":"pie", 
     "x":3, 
     "y":0, 
     "width":3, 
     "height":2 
     }, 
     { 
     "Id":3, 
     "Description":"Test3", 
     "DataSource":"Person3", 
     "ChartType":"heatmap", 
     "x":6, 
     "y":0, 
     "width":3, 
     "height":2 
     } 
    ] 
} 

と仮定する。

$scope.jsonObj.Widgets.push(Indata); 

私は、要求の成功コールバックで行われているものを見ることができないため、また、あなたの$httpが正しく動作しているかどうかを確認することをお勧めします。 $http上の複数の基準については

$http({ 
    url: "Dashboard/AddWidget", 
    method: "POST", 
    params: Indata 
}).then(function(data) { 
    $scope.success = "Widgets added Successfully" 
}); 

、方法ダッシュボード/ AddWidgetを受け入れるのparamどのようなタイプのhttps://docs.angularjs.org/api/ng/service/$http