I need to implement multiple post/get methods in service/factory for pulling resources on remote server like http://jsonplaceholder.typicode.com/users 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 here, here, here, here and here don't work for me or I'm missing something. Here's my code: HTML:
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;
});
}]); <!doctype html>
<html>
<head>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" /> -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Include the AngularJS library -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="MailApp">
<div class="main" ng-controller="MainController">
<div class="container">
<div class="row">
<div class="forecast">
<table class="table table-bordered table table-hover">
<tr>
<th class="info" rowspan="2">ID</th>
<th class="info" rowspan="2">Name</th>
<th class="info" rowspan="2">User Name</th>
<th class="info" rowspan="2">Email</th>
<th class="info" colspan="3">Address</th>
</tr>
<tr>
<th class="info" >Street</th>
<th class="info">Suite</th>
<th class="info">City</th>
</tr>
<tr ng-repeat="user in users">
<td>{{ user.id }}
<button data-ng-click="removeUser($index)">Remove</button>
<button data-ng-click="removePost()">Remove row</button>
</td>
<td>{{ user.name }}</td>
<td>{{ user.username }}</td>
<td>{{ user.email }}</td>
<td>{{ user.address.street }}</td>
<td>{{ user.address.suite }}</td>
<td>{{ user.address.city }}</td>
</tr>
</table>
<table class="table table-bordered table table-hover">
<tr>
<td><input type="text" ng-model="newPost.id" placeholder="User id"></td>
<td><input type="text" ng-model="newPost.name" placeholder="User name"></td>
<td><input type="text" ng-model="newPost.username" placeholder="User username"></td>
<td><input type="text" ng-model="newPost.email" placeholder="User email"></td>
<td><input type="text" ng-model="newPost.address.street" placeholder="User street"></td>
<td><input type="text" ng-model="newPost.address.suite" placeholder="User suite"></td>
<td><input type="text" ng-model="newPost.address.city" placeholder="User city"></td>
</tr>
</table>
<button ng-click="addUser()">Add user</button>
</div>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<!-- Services -->
<script src="js/services/userservice.js"></script>
<!-- Directives -->
</body>
</html>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);
});
};
}]);
