Adding a new object in a JSON array with Angularjs $http

Question

I am trying to add a new object to a existing JSON array. This is my JSON array stored in the database.

  {  
   "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
      }
   ]
}

When I want to add a new widget I want it as a object in this JSON array.

This is my Angular HTTP call:

 $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);

    };

And this is my HTML page:

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

When I click on Addwidget it doesn't add to the JSON array but outside of it as a new object. I am not sure but I think I am doing something wrong with the nested json array.

What am I doing wrong?

Kind regards

UPDATE:

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

What type of param accept method Dashboard/AddWidget?

blogprogramisty.net
– blogprogramisty.net

2017-12-22 10:32:34 +00:00
Commented Dec 22, 2017 at 10:32 — blogprogramisty.net
– blogprogramisty.net, Commented Dec 22, 2017 at 10:32
Dashboard this is a generated entity

Fearcoder
– Fearcoder

2017-12-22 10:34:14 +00:00
Commented Dec 22, 2017 at 10:34 — Fearcoder
– Fearcoder, Commented Dec 22, 2017 at 10:34

Vivz · Accepted Answer · 2017-12-22 10:38:45Z

1

You are not adding it into the json object that you obtained from database.

Suppose

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

Then you have to push into the widgets array of this object.

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

You may also want to check if your $http is working correctly because I can't see anything being done in the success callback of the request.

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

For more reference on $http, check https://docs.angularjs.org/api/ng/service/$http

edited Dec 22, 2017 at 10:38

answered Dec 22, 2017 at 10:33

Vivz

6,6282 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fearcoder Over a year ago

Thank you so much!

Vivz Over a year ago

Glad I could be of help. Please upvote the answer if it helped you and happy holidays :)

Collectives™ on Stack Overflow

Adding a new object in a JSON array with Angularjs $http

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related