SPA $ http POST component build method

Question

I wanted to ask what I am doing wrong, method : 'POST' I get $scope.data.push(...) is not a function but the data specified in the "POST" data{...} parameters are fasting as it should, but server issues 201.

Here is my template -

 <div class="container create"> <div class="heading"> <h1>Creat invoice</h1> </div> <div class="wrapper form-container"> <form> <div class="row"> <div class="col-6"> <div class="form-group"> <label for="formNumber">Number:</label> <input ng-model="invoice.number" type="text" class="form-control" id="formNumber" placeholder="Enter number"> </div> <div class="form-group"> <label for="formSupplyDate">Supplay Date: </label> <input ng-model="invoice.date_supply" type="text" class="form-control" id="formSupplayDate" placeholder="Select date"> </div> </div> <div class="col-6"> <div class="form-group"> <label for="formDate">Invoice Date: </label> <input ng-model="invoice.date_due" type="text" name="Date" id="formDate" class="form-control" placeholder="Select date"> </div> </div> </div> <div class="form-group"> <label for="formComment">Comment: </label> <textarea ng-model="invoice.comment" name="Comment" id="formComment" cols="50" rows="3" placeholder="Write..." class="form-control"></textarea> </div> </form> </div> <div class="button-save d-flex justify-content-end"> <input type="button" class="btn btn-primary" ng-click="addNewInvoice(invoice)" value="Save"> </div> </div>

Here is my component -

  angular.module('addInvoices').component('addInvoices', { templateUrl: 'add-invoices/add-invoices.template.html', controller: ['$routeParams', '$http', '$scope', function AddInvoicesController($routeParams, $http, $scope) { console.log('HELLOOO!'); this.addInvoices = $routeParams.addInvoices; $scope.addNewInvoice = function(invoice) { $scope.date = new Date(); console.log('HI MAN'); $http({ method : 'POST', url : 'http://localhost:3000/invoices', data : { 'number' : invoice.number, 'comment' : invoice.comment, 'date_supply' : invoice.date_supply, 'date_created' : $scope.date, 'date_due' : invoice.date_due } }).then(function(response){ $scope.data = response.data; console.log(response); $scope.data.push(invoice.comment, invoice.number, invoice.date_supply, invoice.date_due, invoice.date_created); }, function(response){ }); }; } ] });

The console displays the following console.log(response.data); after clicking with the entered data, all input gives $scope.data.push is not a function

Here I will leave the structure of my SPA

So, I found out that the click on the button does not work, I can’t understand what the reason is, because $ctrl
I do not understand why the second page controller is not injected into my system ??
I will simplify the task for you and for yourself, too, do not push the data angular.js:14961 TypeError: Cannot read property 'push' of undefined
- I get the following - {id: "7uaCr7J"} - not quite as it were, what I need
For my own line, push (...) for some reason only transmits an id that is automatically generated.

Stepan Kasyanenko Stepan Kasyanenko 6.254 6 silver marks 23 bronze marks · Accepted Answer · 2018-09-18T07:21:28

The problem is that response.data does not have a push method.

Because response.data is an object, not an array!

An example where response.data is an object. This code will generate the exact same error as yours.

 const $scope = {}; const response = {}; const invoice = { comment: "", number: "", date_supply: "", date_due: "", date_created: "" }; // объект, не массив response.data = { number: 123121, comment: "Comment" } $scope.data = response.data; console.log(response); // вот здесь будет ошибка, т.к. у объекта нету метода push $scope.data.push(invoice.comment, invoice.number, invoice.date_supply, invoice.date_due, invoice.date_created);

Judging by the returned data, you need to do the following.

 const $scope = {}; const response = {}; const invoice = { comment: "", number: "", date_supply: "", date_due: "", date_created: "" }; // объект, не массив response.data = { number: 123121, comment: "Comment" } $scope.data = response.data; $scope.data.comment = invoice.comment; $scope.data.number = invoice.number; $scope.data.date_supply = invoice.date_supply; $scope.data.date_due = invoice.date_due; $scope.data.date_created = invoice.date_created; console.log($scope.data);

But in fact, you need to understand how you will use $scope.data to give an exact answer.

{number: "", comment: "", date_supply: "", date_due: "", date_created: ""} - this is what I get, that is, the data from the Input s are not recorded
Are you cannot read property 'push' of undefined with an error?
I do not have this error, I gave a photo above that I have $scope.data.push - not a function
@PavelIgorevich Well, did you Uncaught TypeError: $scope.data.push is not a function ?

SPA $ http POST component build method

1 answer 1

More articles: