lundi 19 octobre 2015

Angularjs unable to update data given [422 (Unprocessable Entity)]

I am trying to update my database using ngresource method PUT But unable to that because it's an object what's bothering it. Lets take a look

I Have my service like this .

PlateInspection

angular.module('sxroApp')
        .factory('PlatesInspectionFactory', function ($resource) {

             return $resource('/api/v1/plateinspection/:id', { id: '@_id' },
             {
                update:
                {
                    method : 'PUT',

                }
             });

        });

And I have my controller this way.

PlateInspectionController

angular.module('sxroApp')
  .controller('plateInspectionCtrl', function($scope, PlatesInspectionFactory, PlatesFactory, PlateQualityFactory, EquipmentStatusCodesFactory, PlateContainersFactory, $location) {

    $scope.selectedPlate = {};
    $scope.selectedQuality = {}
    $scope.selectedContainer = {}
    $scope.selectedStatus = {};


    // $scope.data = [];
    $scope.inspectionData = [];


        /**
        * Get all plates
         */
    PlatesFactory.query(function(plates) {
      $scope.plates = plates;

    });


    PlateQualityFactory.query(function(platequality) {
      $scope.platequality = platequality;

    })


      //
      PlateContainersFactory.query(function(plateContainers)
      {
        $scope.plateContainers = plateContainers;
      });

            /**
             * EquipmentStatusCodes setup
             */
            EquipmentStatusCodesFactory.query(function(statuscodes)
      {
        $scope.statuscodes = statuscodes;
      });


        /**
         * save data after selection is done.
         */

      $scope.storePlatesInspection = function()
        {
        $scope.inspectionData.push({

           plate_quality_id:           $scope.selectedQuality.item.id,
           plate_container_id:         $scope.selectedContainer.item.id,
           equipment_status_codes_id:  $scope.selectedStatus.item.id,
           plate_container_slot :      30


         });

        PlatesInspectionFactory.update({id : $scope.selectedPlate.item.id}, $scope.inspectionData)
          .success(function(data)
          {
              $scope.inspection = data;
          })
          .error(function(data)
          {
               console.log(data);
          });

      }


  });

The function storePlatesInspection should pick up the data and update it in the database.

here is finally my html

<div id="main-wrapper" >
    <div class="row">
        <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->
            <div class="hr hr-18 hr-double dotted"></div>
            <div class="widget-box">
                <div class="widget-header widget-header-blue widget-header-flat">
                    <h4 class="widget-title lighter">Plates inspection</h4>
                </div>
                <div class="widget-body">
                    <div class="widget-main">
                        <!-- #section:plugins/fuelux.wizard -->
                        <div id="fuelux-wizard-container">
                            <div>
                                <!-- #section:plugins/fuelux.wizard.steps -->
                                <ul class="steps">
                                    <li data-step="1" class="active">
                                        <span class="step">1</span>
                                    </li>
                                    <li data-step="2">
                                        <span class="step">2</span>
                                    </li>
                                    <li data-step="3">
                                        <span class="step">3</span>
                                    </li>
                                </ul>
                                <!-- /section:plugins/fuelux.wizard.steps -->
                            </div>
                            <hr />
                            <!-- #section:plugins/fuelux.wizard.container -->
                            <div class="step-content pos-rel" >
                                <div class="step-pane active" data-step="1">
                                    <!-- STEP1 -->
                                    <form class="form-horizontal show" id="validation-form" method="get">
                                        <div class="space-2"></div>
                                        <div class="form-group">
                                            <label class="control-label col-xs-8 col-sm-3 no-padding-right" >Choose a Plate</label>
                                            <div class="col-xs-12 col-sm-9">
                                                <select id="plateId" ng-model="selectedPlate.item" ng-options="plate as (plate.wafer_id + ' - ' + plate.serial_number) for plate in plates" ng-change="getSelectedPlate(selectedPlate.item)"/>
                                                    <option value=" ">----------</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label no-padding-right" for="form-input-readonly"> Plate-Type: </label>
                                            <div class="col-sm-9">
                                                <input readonly="" type="text" class="col-xs-10 col-sm-5" id="form-input-readonly" value="{{selectedPlate.item.plate_types_id}}" />
                                                <span class="help-inline col-xs-12 col-sm-7">
                                                    <label class="middle">
                                                        <input class="ace" type="checkbox" id="id-disable-check" />
                                                    </label>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label no-padding-right" for="form-input-readonly"> Project Name: </label>
                                            <div class="col-sm-9">
                                                <input readonly="" type="text" class="col-xs-10 col-sm-5" id="form-input-readonly" value="{{selectedPlate.item.project_id}}" />
                                                <span class="help-inline col-xs-12 col-sm-7">
                                                    <label class="middle">
                                                        <input class="ace" type="checkbox" id="id-disable-check" />
                                                    </label>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="hr hr-dotted"></div>
                                        <div class="space-8"></div>
                                        <!-- SETP 2-->
                                        <div class="step-pane active" data-step="2">
                                            <div class="form-group" id="validation-form" method="get">
                                                <label class="control-label col-xs-12 col-sm-3 no-padding-right">Inspection </label>
                                                <div class="col-xs-12 col-sm-9">
                                                    <div>
                                                        <label>
                                                            <span class="lbl" id="inspection" name="inspection" for="inspection"> How was the inspection? </span>
                                                        </label>
                                                    </div>
                                                    <div>
                                                        <label>
                                                            <input name="inspection" value="1" type="checkbox" class="ace" />
                                                            <span class="lbl"> Good! </span>
                                                        </label>
                                                    </div>
                                                    <div>
                                                        <label>
                                                            <input name="inspection" value="2" type="checkbox" class="ace" id="not-good" />
                                                            <span class="lbl"> No good :(</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <form class="form-horizontal show" id="validation-form" method="get">
                                                <div class="space-2"></div>
                                                <div class="form-group">
                                                    <label class="control-label col-xs-8 col-sm-3 no-padding-right" for="state">Plate Quality: </label>
                                                    <div class="col-xs-12 col-sm-9">
                                                        <select id="platequality"  ng-model="selectedQuality.item" ng-options="platequality as platequality.name for platequality in platequality"  ng-change="getSelectedPlateQuality(selectedPlate.item)">
                                                            <option value="">&nbsp;</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </form>
                                            <div class="hr hr-dotted"></div>
                                            <div class="space-8"></div>
                                            <!-- STEP 3 -->
                                            <div class="step-pane active" data-step="3">

                                                <form class="form-horizontal show" id="validation-form" method="get">
                                                    <div class="space-2"></div>
                                                    <div class="form-group">
                                                        <label class="control-label col-xs-8 col-sm-3 no-padding-right" >Select Container: </label>
                                                        <div class="col-xs-12 col-sm-9">
                                                            <select id="plate" class="select2" ng-model="selectedContainer.item" ng-options="container as (container.id + ' - ' + container.name) for container in plateContainers" ng-change="getSelectedPlateContainer(selectedContainer.item)" >
                                                                <option value="">&nbsp;</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="control-label col-xs-8 col-sm-3 no-padding-right" >Slot #</label>
                                                        <div class="col-xs-12 col-sm-9">
                                                            <select id="plate" ng-model="getSelectedPlateContainer" ng-options="slot for slot in data">
                                                                <option value="">&nbsp;</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="control-label col-xs-8 col-sm-3 no-padding-right" for="state">Statuscode</label>
                                                        <div class="col-xs-12 col-sm-9">
                                                            <select id="state"  ng-model="selectedStatus.item" ng-options="status as (status.id + ' - ' + status.name)  for status in statuscodes" >
                                                                <option value="">&nbsp;</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="hr hr-dotted"></div>
                                                    <div class="space-8"></div>
                                                </form>
                                            </div>
                                            <!-- /section:plugins/fuelux.wizard.container -->
                                            <div class="modal-footer wizard-actions">
                                                <button class="btn btn-lg btn-prev">
                                                <i class="ace-icon fa fa-arrow-left"></i> Prev
                                                </button>
                                                <button class="btn btn-success btn-lg btn-next" data-last="Finish" ng-click="storePlatesInspection()">
                                                Next
                                                <i class="ace-icon fa fa-arrow-right icon-on-right"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                            </div>


                            <!-- /section:plugins/fuelux.wizard -->
                        </div>
                        <!-- /.widget-main -->
                    </div>
                    <!-- /.widget-body -->
                </div>

            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- Main Wrapper -->

If I try to update it with it something like this, it works fine.

$scope.hardcoded =
{
  plate_quality_id: 1,
  equipment_status_codes_id: 1,
  plate_container_id: 1,
  plate_container_slot: 12,


}

PlatesInspectionFactory.update({id : $scope.selectedPlate.item.id}, $scope.hardcoded)

But won't work if I push it first to an array.

This is my backend

class PlatesInspectionController extends Controller
{

    /**
     * @param PlatesInspectionRequest $request
     * @param $id
     * @return \Illuminate\Http\JsonResponse This must be checked!
     * This must be checked!
     * @internal param $id
     */
    public function update(PlatesInspectionRequest $request, $id)
    {
        $plate = Plates::find($id);
        $data = $request->all();

        if ($plate->update($data)) {
            return response()->json([
                'Success' => [
                    'message' => 'Plate is inspected!'
                ]
            ], 201);
        }
        else {
            return response()->json([
                'Error' => [
                    'message' => 'Plate is not updated, something went wrong!'
                ]
            ], 400);
        }
    }
}

and route like this

  Route::resource('plateinspection', 'LabMode\PlatesInspectionController', array('Only' => array('update')));

And here is finally my console.log

I know it's not the rules, but would someone as well as tell me why .success is not a function.

Thanks a lot.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire