Push json data to existing array in angular js
40,616
Solution 1
Figured it out... I used the $rootScope.items = data.d;
to resolve my issue. Thank you everyone for helping me!
Factory
angular.module('app.pickUpServ', []).factory('pickUpServ', ['$rootScope', '$http',
function($rootScope, $http) {
return {
getPickUpList: function(data) {
$http({
method: 'POST',
url: 'app/Service/CourierService.asmx/BarcodeList',
data: {
"bardcodeVal": "",
"courierType": "PICKUP",
"userName": "aspuser"
},
contentType: 'application/json; charset=utf-8',
dataType: 'json',
}).success(function(data){
$rootScope.items = data.d;
console.log(data.d);
}).error(function(error) {
console.log('Error - getPickUpList');
});
},
items: [],
add: function(item) {
$rootScope.items.push(item);
console.log(item);
}
};
}
]);
Controller
angular.module('app.scanListCtrl', []).controller('ScanListCtrl', ['$scope', 'pickUpServ',
function ($scope, pickUpServ) {
//Get Pick Up Data
if ($scope.title == 'Pick Up') {
//$scope.items = pickUpServ.items;
pickUpServ.getPickUpList(function (data) {
$scope.items = data.d
});
$scope.autoAddItem = function () {
if (($scope.BarcodeValue + '').length == 8) {
pickUpServ.add({
"barcodeVal": $scope.BarcodeValue,
"courierType": "PICKUP",
"userName": "aspuser"
});
$scope.BarcodeValue = "";
}
};
}
}
]);
Solution 2
You are adding the new item, to other element outside the scope (inside the factory), must doing something like this:
$scope.autoAddItem = function () {
if (($scope.BarcodeValue + '').length == 8) {
$scope.items.push({
"barcodeVal": $scope.BarcodeValue,
"courierType": "PICKUP",
"userName": "aspuser"
});
$scope.BarcodeValue = "";
}
};
If you want make all inside the factory must be something like this (and ignore the change above):
angular.module('app.pickUpServ', []).factory('pickUpServ', ['$rootScope', '$http',
function($rootScope, $http) {
return {
getPickUpList: function(callback) {
var _this = this;
$http({
method: 'POST',
url: 'app/Service/CourierService.asmx/BarcodeList',
data: {
"bardcodeVal": "",
"courierType": "PICKUP",
"userName": "aspuser"
},
contentType: 'application/json; charset=utf-8',
dataType: 'json',
})
.success(function(data) {
_this.items = data.d;
callback(_this.items) //This gonna set to $scope the items in factory and angular
//link the object items to $scope.items (Code not tested but must work)
})
.error(function(error) {
console.log('Error - getPickUpList');
});
},
items: [{
"bardcodeVal": "",
"courierType": "PICKUP",
"userName": "aspuser"
}],
add: function(item) {
this.items.push(item);
console.log(item);
}
};
}
]);
Author by
Davis
Updated on August 19, 2020Comments
-
Davis almost 4 years
I'm having issues with pushing data to an existing array. You can see I'm posting the data to a table, however, when a user enters an 8 digit barcode, I like to push the data to the table.
Factory
angular.module('app.pickUpServ', []).factory('pickUpServ', ['$rootScope', '$http', function($rootScope, $http) { return { getPickUpList: function(data) { $http({ method: 'POST', url: 'app/Service/CourierService.asmx/BarcodeList', data: { "bardcodeVal": "", "courierType": "PICKUP", "userName": "aspuser" }, contentType: 'application/json; charset=utf-8', dataType: 'json', }).success(data).error(function(error) { console.log('Error - getPickUpList'); }); }, items: [{ "bardcodeVal": "", "courierType": "PICKUP", "userName": "aspuser" }], add: function(item) { this.items.push(item); console.log(item); } }; } ]);
Controller
angular.module('app.scanListCtrl', []).controller('ScanListCtrl', ['$scope', 'pickUpServ', function ($scope, pickUpServ) { //Get Pick Up Data if ($scope.title == 'Pick Up') { pickUpServ.getPickUpList(function (data) { $scope.items = data.d }); $scope.autoAddItem = function () { if (($scope.BarcodeValue + '').length == 8) { pickUpServ.add({ "barcodeVal": $scope.BarcodeValue, "courierType": "PICKUP", "userName": "aspuser" }); $scope.BarcodeValue = ""; } }; } } ]);
HTML
<div ng-controller="ScanListCtrl"> <div class="row prepend-top-md"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> <i class="fa fa-barcode"></i> Scan Item</h3> </div> <div class="panel-body"> <div class="input-group input-group-lg"> <input type="number" class="form-control" placeholder="Scan Item" ng-model="BarcodeValue" ng-change="autoAddItem()" is-focus> <span class="input-group-btn"> <button class="btn btn-info" type="button" ng-click="addRow()"> Add Barcode</button> </span></div> </div> <table class="table table-striped table-hover"> <thead> <tr> <th class="text-center" style="width: 3%"> # </th> <th> <i class="fa fa-barcode"></i> Barcode </th> <th> <i class="fa fa-medkit"></i> CSN </th> <th> <i class="fa fa-user"></i> User </th> <th> <i class="fa fa-clock-o"></i> Date </th> </tr> </thead> <tbody> <tr ng-repeat="item in items | orderBy:'Id':true:reverse"> <td class="text-center"> [{{item.Id}}] </td> <td> {{item.BarcodeValue}} </td> <td> {{item.CSN}} </td> <td> {{item.LastName + ', ' + item.FirstName}} </td> <td> {{item.Created}} </td> </tr> </tbody> </table> </div> </div> </div>
-
Decade Moon almost 10 yearsIn your controller, you're assigning to
$scope.items
twice. The original reference you have topickUpServ.items
is being replaced with a new array of items returned from the POST request. Was this intended? -
Davis almost 10 yearsThank you. I can see that. It was a small mistake. But I'm still having issuing push the data to the table.
-
Cory Silva almost 10 yearsI would reccomend that you do all the array manipulations in the service/factory. That way you just call pickUpServ.add() and then use pickUpServ.get() in the resolve method for the route.
-
Davis almost 10 years@CorySilva - Thank you for your suggestion. I like to try to sick with the add() in the controller.
-
-
Davis almost 10 yearsI'm getting a "TypeError: object is not a function" error with data(_this.items)
-
Davis almost 10 yearsCan you provide another solution?
-
Jesús Quintana almost 10 yearsfixed, a mistake passing the callback method. (Was been overriden for the function)
-
Davis almost 10 yearsStill didn't work? Anyway, I figured it out... I used the $rootScope global var
-
Jesús Quintana almost 10 yearsOk another solution is passing the $scope like parameter of the factory something like this: function($scope ,item) { $scope.items.push(item); console.log(item); } I really not recommend set garbage to the rootScope, is better pase the $scope. ($rootScope live in all application, $scope only in the current controller)
-
Jesús Quintana almost 10 yearsIs weird i have exactly the same code by a angular service to a chat application, and save the messages in a service object, and the scope works well. The only different is that my service have a getter to the object, something like this getItems: function(){return this.items}; Srry and lucky in your project.
-
Kushal Jayswal over 8 yearsAre you using any database system for storing purpose?