C# 使用Angularjs$http在JSON数组中添加新对象

我正在尝试向现有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页面：

<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对象中

假设

$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
      }
   ]
}

然后你必须进入这个对象的widgets数组

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

您可能还想检查您的

$http

是否正常工作，因为我在请求的成功回调中看不到任何操作

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

---

有关

$http

的更多参考，请检查什么类型的param accept method Dashboard/AddWidget？Dashboard这是一个生成的实体非常感谢！很高兴我能帮上忙。如果答案对你有帮助，请向上投票：）

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