title: Angularjs JSON post/get methods in services
body: <p>I need to implement multiple post/get methods in service/factory for pulling resources on remote server like <a href="http://jsonplaceholder.typicode.com" rel="nofollow noreferrer">http://jsonplaceholder.typicode.com/users</a> and listing, adding and removing them from table. I'm able to pull data and add data to server with get/post. Code for removing table row is not working. I'm doing all this with controller and with deprecated code :/ All other sollutions for using multiple methods in factory <a href="https://stackoverflow.com/questions/36655564/angular-have-multiple-functions-in-one-service">here</a>, <a href="https://stackoverflow.com/questions/17160771/angularjs-a-service-that-serves-multiple-resource-urls-data-sources">here</a>, <a href="https://stackoverflow.com/questions/25163559/correct-way-to-make-a-factory-module-in-angularjs/25164204#25164204">here</a>, <a href="https://stackoverflow.com/questions/21821150/can-i-have-multiple-functions-in-my-angularjs-factory">here</a> and <a href="https://stackoverflow.com/questions/33393436/angularjs-best-practice-factory-with-multiple-methods">here</a> don't work for me or I'm missing something. Here's my code:
  HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>app.factory('userservice', ['$http', function($http) { 
    return $http.get('http://jsonplaceholder.typicode.com/users') 
              .success(function(data) { 
              console.log(data);
                return data; 
              }) 
              .error(function(err) { 
              console.log(err);
                return err; 
              }); 
  }]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;!doctype html&gt;
      &lt;html&gt;
        &lt;head&gt;
      &lt;!--     &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link href="http://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" /&gt;
          &lt;link href="css/main.css" rel="stylesheet" /&gt; --&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
          
          &lt;!-- Include the AngularJS library --&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"&gt;&lt;/script&gt;
        &lt;/head&gt;
        &lt;body ng-app="MailApp"&gt;
      
          &lt;div class="main" ng-controller="MainController"&gt;
            &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="forecast"&gt;
                    &lt;table class="table table-bordered table table-hover"&gt;
                            &lt;tr&gt;
                             &lt;th class="info" rowspan="2"&gt;ID&lt;/th&gt;
                             &lt;th class="info" rowspan="2"&gt;Name&lt;/th&gt;
                             &lt;th class="info" rowspan="2"&gt;User Name&lt;/th&gt;
                             &lt;th class="info" rowspan="2"&gt;Email&lt;/th&gt;
                             &lt;th class="info" colspan="3"&gt;Address&lt;/th&gt;              
                            &lt;/tr&gt;
      
                          &lt;tr&gt;
                             &lt;th class="info" &gt;Street&lt;/th&gt;
                             &lt;th class="info"&gt;Suite&lt;/th&gt;
                             &lt;th class="info"&gt;City&lt;/th&gt;
                          &lt;/tr&gt;
      
                          &lt;tr ng-repeat="user in users"&gt;
                             &lt;td&gt;{{ user.id }}
                             &lt;button data-ng-click="removeUser($index)"&gt;Remove&lt;/button&gt;
                             &lt;button data-ng-click="removePost()"&gt;Remove row&lt;/button&gt;
                             &lt;/td&gt;
                             &lt;td&gt;{{ user.name }}&lt;/td&gt;
                             &lt;td&gt;{{ user.username }}&lt;/td&gt;
                             &lt;td&gt;{{ user.email }}&lt;/td&gt;
                             &lt;td&gt;{{ user.address.street }}&lt;/td&gt;
                             &lt;td&gt;{{ user.address.suite }}&lt;/td&gt;
                             &lt;td&gt;{{ user.address.city }}&lt;/td&gt;
                          &lt;/tr&gt;
                    &lt;/table&gt;
      
                    &lt;table class="table table-bordered table table-hover"&gt;
                          &lt;tr&gt;
                             &lt;td&gt;&lt;input type="text" ng-model="newPost.id" placeholder="User id"&gt;&lt;/td&gt;
                             &lt;td&gt;&lt;input type="text" ng-model="newPost.name" placeholder="User name"&gt;&lt;/td&gt;
                             &lt;td&gt;&lt;input type="text" ng-model="newPost.username" placeholder="User username"&gt;&lt;/td&gt;
                             &lt;td&gt;&lt;input type="text" ng-model="newPost.email" placeholder="User email"&gt;&lt;/td&gt;
                             &lt;td&gt;&lt;input type="text" ng-model="newPost.address.street" placeholder="User street"&gt;&lt;/td&gt;
                             &lt;td&gt;&lt;input type="text" ng-model="newPost.address.suite" placeholder="User suite"&gt;&lt;/td&gt;
                             &lt;td&gt;&lt;input type="text" ng-model="newPost.address.city" placeholder="User city"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                    &lt;/table&gt;
                  &lt;button ng-click="addUser()"&gt;Add user&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      
          &lt;!-- Modules --&gt;
          &lt;script src="js/app.js"&gt;&lt;/script&gt;
      
          &lt;!-- Controllers --&gt;
          &lt;script src="js/controllers/MainController.js"&gt;&lt;/script&gt;
      
          &lt;!-- Services --&gt;
          &lt;script src="js/services/userservice.js"&gt;&lt;/script&gt;
      
          &lt;!-- Directives --&gt;
      
      
        &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>app.controller('MainController', ['$scope', 'userservice',  '$http',  function($scope, userservice, $http) { 
          $scope.users = []; 
          userservice.success(function(data) { 
          $scope.users = data;
        });
      
      $scope.addUser = function(){
        $http.post("http://jsonplaceholder.typicode.com/users",{
          id: $scope.newPost.id,
          name: $scope.newPost.name,
          username: $scope.newPost.username,
          email: $scope.newPost.email,
          address: 
          {
                  street : $scope.newPost.address.street,
                  suite : $scope.newPost.address.suite,
                  city : $scope.newPost.address.city
          }
        })
      
        .success(function(data, status, headers, config){
          console.log(data);
          $scope.users.push($scope.newPost);
          $scope.newPost = {};
        })
        .error(function(error, status, headers, config){
          console.log(error);
        });
      }
      
      //simple remove array remove function 
      $scope.removeUser = function(index)
      {
          $scope.users.splice(index, 1);
      }
        //not working properly localy - raised issue on stack
        $scope.removePost = function () {
                  var data = 
                  {
                    id: $scope.newPost.id
                  } 
                  //Error: $scope.newPost is undefined
                  //forwarding paramaeters directly or with pulling them with $routeParams and index 'id'
                  $http.delete('http://jsonplaceholder.typicode.com/users/' + data)
                  .success(function (data, status, headers, config) {
                      $scope.ServerResponse = data;
                  })
                    .error(function (data, status, header) {
                      $scope.ServerResponse = htmlDecode("Data: " + data +
                          "\n\n\n\nstatus: " + status +
                          "\n\n\n\nheaders: " + header +
                          "\n\n\n\nconfig: " + config);
                  });
              };
      }]);</code></pre>
  </div>
  </div>
  </p>