Tetraphenom Tetraphenom - 5 months ago 9
AngularJS Question

POST Method is not Sending All Data

I am working with angular, node, express, and postgresql/sequelize in a fun little project. However, it has gotten a little too fun. I am new to developing in this environment, so I may be using some incorrect structures. But, I am trying to set up an update route for a model. The JS for the update is seemingly good, as it does as it should, but the problem here is that when the function is called and the post method is initiated, it does not grab the values from the form group, in html.

Here is a snippet of the html/angular:

<div class="container">
<div ng-controller="SomethingCtrl">
<form ng-submit="updateSomething(updateform)" role="form" ng-init="updateform = {}">
<div class="datagrid"><table>
<thead>
<tr>
<th> ID </th>
<th> field1 </th>
<th> field2 </th>
<th> field3 </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="something in somethings | filter:{id:somethingId} | orderBy:'id' | limitTo: 1 track by $index">
<td>
{{something.id}}
</td>
<td>
<div class="form-group">
<input class="form-control" type="text" name="field1" value="{{something.field1}}"/>
</div>
</td>
<td>
<div class="form-group">
<input class="form-control" type="text" name="something.field2" value="{{something.field2}}">
</div>
</td>
<td>
<div class="form-group">
<input class="form-control" type="number" name="field3" value="{{something.field3}}">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<button type="submit"><strong>Update</strong></button>
</div>
</form>
</div>
</div>


When I go into network analysis of this, it sends JSON data, but it does not specify the value -- but, from the response I get in console log I think it only sends current date as the only attribute that is updated is updateTime.

Here is the JS, which I think works:

exports.UpdateSomethings = function (req, res) {
models.Something.find({
where: {
id: req.params.id
}
}).then(function (something) {
if (something) { // if the record exists in the db
something.updateAttributes({
something: req.body.something,
}).then(function (somethings) {
res.json(somethings.dataValues);
}).catch(function (error) {
console.log("ops: " + error);
res.status(500).json({ error: 'error' });
});
}
;
});
};


And in the Controller:

$scope.updateSomething = function () {
$http.post('/somethingupdate/:id', {
field: $scope.somethingField,
}).success(function (data, status, headers, config) {
$scope.somethings.push({
field: $scope.somethingField
});
$scope.somethingField = '';
}).error(function (data, status, headers, config) {
console.log("Ops: " + data);
});
};


Here is the result in console:

Executing (default): SELECT "id", "field", "createdAt", "updatedAt" FROM "Soemthings" AS "Something" WHERE "Something"."id" = 'id value';
Executing (default): UPDATE "Somethings" SET "field1"='' "field2" = '' "field3" = '' "updatedAt"='2016-06-09 20:20:57.384 +00:00' WHERE "id" = id value

Efx Efx
Answer

You are passing an empty set when submit, check your updateform variable

You need to add ng-models to your inputs that starts with updateform

 <input class="form-control" ng-model="updateform.field1" type="number" name="field1">

And so on. Since you said you are using $scope.somethingField lets use it in your markup

<div class="container">
   <div ng-controller="SomethingCtrl">
<form ng-submit="updateSomething(somethingField)" role="form" ng-init="updateform = {}">
  <div class="datagrid"><table>
    <thead>
    <tr>
      <th> ID </th>
      <th> field1 </th>
      <th> field2 </th>
      <th> field3 </th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="something in somethings | filter:{id:somethingId} | orderBy:'id' | limitTo: 1 track by $index">
      <td>
        {{something.id}}
      </td>
      <td>
        <div class="form-group">
          <input class="form-control" ng-model="somethingField.field1" type="text" name="field1" />
        </div>
      </td>
      <td>
        <div class="form-group">
          <input class="form-control" ng-model="somethingField.field2" type="text" name="something.field2" >
        </div>
      </td>
      <td>
        <div class="form-group">
          <input class="form-control" ng-model="somethingField.field3" type="number" name="field3" >
        </div>
      </td>
    </tr>
    </tbody>
  </table>
  </div>
  <div>
    <button type="submit"><strong>Update</strong></button>
  </div>
</form>

Then in your controller outside the function $scope.updateSomething:

$scope.somethingField = {
    field1: '',
    field2: '',
    field3: ''
}
var origsomethingField = angular.copy($scope.somethingField);

Then in you controller function for update add parameter field, try to check console logs if field contains data:

$scope.updateSomething = function (field) {
    console.log(field);
    $http.post('/somethingupdate/:id', {
        field: $.param(field),
    }).success(function (data, status, headers, config) {
        $scope.somethings.push({
           field: field
        });
        $scope.somethingField = angular.copy(origsomethingField);
    }).error(function (data, status, headers, config) {
        console.log("Ops: " + data);
    });
};
Comments