平均堆栈环回更新

Question

Apologies if this an easy one, I'm relatively new to loopback/ backend,

What I am trying to do is update an existing database records ID and Name with the following code. HTML FILE

<div>
  <h1>COMPANY DETAILS</h1>
</div>
<div>
  <div>
    <table>
      <thead>
        <tr>
          <th>Company Name</th>
          <th>Company Code</th>
          <th>Remove</th>
          <th>Edit</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input class="form-control" ng-model="newCompany.name"></td>
          <td><input class="form-control" ng-model="newCompany.id"></td>
          <td><button class="btn btn-primary" ng-click="add()">Add</button></td>
          <td><button class="btn btn-info" ng-click="update()">Update</button></td>
        </tr>
        <tr ng-repeat="company in companies | orderBy:'+name'">
          <td>{{company.name}}</td>
          <td>{{company.id}}</td>
          <td><button class="btn btn-danger" ng-click="remove(company.id)">Remove</button> </td>
          <td><button class="btn btn-warning" ng-click="edit(company)">Edit</button> </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>// This is just a sample script. Paste your real code (javascript or HTML) here.

if ('this_is'==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];}

JS file

'use strict';

/**
 * @ngdoc function
 * @name abcApp.controller:CompanyCtrl
 * @description
 * # CompanyCtrl
 * Controller of the abcApp
 */
angular.module('abcApp')
  .controller('CompanyCtrl', ['$scope', 'Company', function ($scope, Company) {
      $scope.newCompany = { 'id': '', 'name': '' };
      $scope.companies = [];
      Company
          .find()
          .$promise
          .then(function (results) {
              $scope.companies = results;
          });

      $scope.update = function (company) {
          company.findById({ id: company })
            .$promise
            .then(function () {                  
                $scope.company.id = 13.40;
                console.log(company.id);
           $scope.company.$save();
       });
      };

      $scope.edit = function (company) {
          $scope.newCompany = { id: company.id, name: company.name };
      }
      $scope.add = function () {
          Company.create($scope.newCompany, function (company) {
              $scope.newCompany = { 'id': '', 'name': '' };
              Company
                  .find()
                  .$promise
                  .then(function (results) {
                      $scope.companies = results;
                  });

          }, function (errorResponse) {
              console.log(errorResponse);
          });
      };

      $scope.remove = function (cid) {
          Company.deleteById({ id: cid })
           .$promise
              .then(function () {
                  console.log('deleted');
                  Company
                          .find()
                          .$promise
                          .then(function (results) {
                              $scope.companies = results;
                          });
              });
      }
  }]);

the $scope.edit function brings the company id and name into two text boxes and the $scope.update function is meant to update the database record, edit function works fine however there is a problem in my $scope.update and when I click on the update button I get the following error in the browser console.

Unable to set property 'name' of undefined or null reference

Sorry for the long post any help would be much appreciated

Answer 1

It looks like you are mixing client-side code and server-side code, the reason why $scope.edit works is because it contains only client side code.

Mongoose calls (Collection.create, Collection.find ...) should be server-side.

---

Here's how I would use the MEAN stack in your case :

Mongo is your Database, it contains your documents and collections.

Express is used to relay your requests from the client to Mongo, using http calls.

Angular is the clientside framework, your JS client code will mostly reside inside angular Controllers.

---

Exemple :

We want all the carots in the database.

Clientside (JS) :

angular.module('abcApp')
  .controller('myCarotCtrl', [dependencies,
  function(dependencies) {
     $scope.result = '';
     $scope.getCarrots = function() {
         $http.get('/carrots').
         then(function(data) {
              //Called when the request is successful
              $scope.result = data;
         },
         function(error) {
             //Called when the request failed
             console.log(error)
         }
     }
  }]);

Clientside (HTML) :

<div ng-controller="myController" ng-init="getCarrots()">{{result}}</div>

Server side :

//assuming express and mongoose have been required/initialized
//using Express to route the requests
//In this exemple request is not used because will dont need parameters
app.get('/carrots', function(request, response) {
    //Use mongoose to access your Carot Collection
    //{} is all documents in the collection
    Carot.find({}, function(err, documents) {
        //send back the documents to the client once they have been found
        response.status(200).send(document);
    });
});

I could not test the code above but I think it will give you some ideas on how the whole stack works.

Answer 2

company.findById({ id: company })

Is this a typo? Capital C in company ? I assume it should be similar to my example at https://github.com/strongloop/loopback-example-angular/blob/master/client/js/controllers/todo.js#L7-L8

Answer 3

Your $scope.update function is wrong from many aspects. First because it is expecting you to send company parameter but your are calling method with empty params.

This is your method:

$scope.update = function (company) {
  company.findById({ id: company })
    .$promise
    .then(function () {                  
        $scope.company.id = 13.40;
        console.log(company.id);
        $scope.company.$save();
  });

};

This is your html

<td><button class="btn btn-info" ng-click="update()">Update</button></td>

"company" parameter is undefined so your console gives you an error message (you are using undefined value for findById id parameter - "id: company").

If you want to call update method like this then instead of company parameter you can use your $scope.newCompany variable which already has data that you want to use after you click on edit button. That being said your update method should be something like this:

$scope.update = function () {
  Company.findById({ id: $scope.newCompany.id })
    .$promise
    .then(function (company) {
      console.log(company);
      //$scope.company.$save();
    });
};

Second thing to note is that you don't need to write remote "save" method (unless you wrote it for exercise). Loopback has already generated CRUD methods for you. So if you want to update your model from client use "upsert" method or something similar that best fits your needs. See http://localhost:3000/explorer for list of available methods on server.