In PHP side there are some element of array:
$this->data['messages']['ms'][] = 'Line1';
$this->data['messages']['ms'][] = 'Line2';
and method that to return json format:
echo json_encode($this->data['messages']); die();
Angular side:
$scope.response = {};
....
request.success(function (data) {
$scope.response.message = data.messages; // Edit here
});
<div ng-repeat="error in response">{{error}}</div>
When I try to get array items, I get nothing
I have converted my difficult object to array:
$scope.messages = [];
...
// In loop
$scope.messages.push(item);
Output in console:
Array[2]0: "Qeydiyyat mümkün deyil. Bu e-mail ilə istifadəçi artıq saytda qeydiyyatdan keçib"1: "Bu IP ünvanından artıq qeydiyyatdan keçilib"
In HTML template I try to display elements:
<div ng-repat="error in messages">{{error}}</div>
you must check your request. Are you useing $http?
Have you provided http in controller/service?
// Simple GET request example :
$http.get('/someUrl').
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
you may also check with console.log(data) if theres any data provided.
Maybe there's different construction than you thought (for example wrapped data)
P.S. it should be messages (with s in the end)
Try this in your angular side.
$scope.response = {};
....
request.success(function (data) {
$scope.message = data.data;
console.log($scope.message);
});
<div ng-repeat="error in message">{{error}}</div>
You call your variable in a wrong way. Try console log the $scope.message if there are data's provided.
Related
I am passing an array of values through POST method dynamically.
If i pass more than 50 array values, i am not able to process those data.
I am getting error 505.
I browsed and found that it is an Http error, which refers the post size is not good here.
So i added the properties in my jboss configuarion,
</system-properties>
<property name="org.apache.tomcat.util.http.Parameters.MAX_COUNT" value="-1"/>
</system-properties>
Even after this, i am not able to pass array value more than 50.
Please give some solution for this.
This is my code, in Restfull webservice, where i get data from angular controller.
this.updateConstraint = function($scope, $location, $routeParams) {
var url = hostName + "/dcr/rest/capacityfile/searchcf/blockC/addSubFilesBlocC";
var listSubFiles = $scope.capacityAddSubFile;
var idCapacity = $routeParams.capacityFileId;
var promise = $http({
url : url,
method : "POST",
params :{ subFileCSF : $scope.capacityAddSubFile,
partConstraint : $scope.selectedPartNumberAndConstraint,
partConstraintAdd : $scope.selectedPartNumberAndConstraintAdd,
capacityFileId : $routeParams.capacityFileId},
}).success(function(data, status, headers) {
}).error(function(data, status, headers) {
// alert("Failed to access"+status+" "+headers);
});
return promise;
};
Here the i am getting error, it is showing error 505.
Please reply.
you need to set max-post-size at connector level.
/subsystem=web/connector=http:write-attribute(name=max-post-size, value=80)
I'm new to Angular (few hours new). I'm getting pretty much what I want, by adjusting the demo. But i can't get my AJAX request to work.
I tried various solutions, but on gets in an endless loop (figured out that's the way how Angular works). In an other solution nothing really happens..
My current solution (tried to place the peopleController about everywhere):
Controller:
app.controller('MainController', ['$scope','$http', function($scope,$http) {
//$http is working in this
var scrollItems = [];
for (var i=1; i<=100; i++) {
scrollItems.push('Item ' + i);
}
$scope.scrollItems = scrollItems;
function peopleController($scope,$http){
// Simple GET request example :
$http.get('/public/ajax.php').
success(function(data, status, headers, config) {
console.log("worked");
// this callback will be called asynchronously
// when the response is available
scope.people = data;
}).error(function(data, status, headers, config) {
console.log("fail");
// called asynchronously if an error occurs
// or server returns response with an error status.
});
}
}]);
HTML:
<div ng-controller="peopleController">
{{people}}
</div>
But it gives me this error:
Error: [ng:areq] http://errors.angularjs.org/1.3.0/ng/areq?p0=peopleController&p1=not%20aNaNunction%2C%20got%20undefined
at Error (native)
at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:6:416
at Mb (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:19:510)
at nb (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:20:78)
at $get (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:74:494)
at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:56:415
at r (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:7:408)
at M (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:56:281)
at g (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:51:201)
at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:50:309
Hope someone can help me out here :)
Other solutions i tried for example
match the controller name in your html and js file, if it's 'peopleController' in you html file name it 'peopleController' in the controller rather than 'MainController'.
than change the line
function peopleController($scope,$http){
to
function peopleController(){
you use dependency injection in the controller function, not on the contained functions, the contained function already have access to $something because they are under the controller function's scope
Your view must refer to the controller you declared, which is MainController:
<div ng-controller="MainController">
{{people}}
</div>
Inside your controller, set people to [] and bound to $scope, remove the parameters you passed in peopleController and initiate the request. Caution: in the success handler, rename scope to $scope.
$scope.people = [];
peopleController(); //initiate your ajax request
function peopleController(){ //remove the parameters
// Simple GET request example :
$http.get('/public/ajax.php').
success(function(data, status, headers, config) {
console.log("worked");
// this callback will be called asynchronously
// when the response is available
$scope.people = data; //scope -> $scope
}).
error(function(data, status, headers, config) {
console.log("fail");
// called asynchronously if an error occurs
// or server returns response with an error status.
});
}
peopleController() is misleading; its purpose is to get data. I'd recommend to rename it to getPeople().
If you want a separate controller called peopleController you need to define it separately as follows:
app.controller('MainController', ['$scope','$http', function($scope,$http) {
//$http is working in this
var scrollItems = [];
for (var i=1; i<=100; i++) {
scrollItems.push('Item ' + i);
}
$scope.scrollItems = scrollItems;
}]);
app.controller('peopleController', ['$scope','$http', function ($scope,$http){
// Simple GET request example :
$http.get('/public/ajax.php').
success(function(data, status, headers, config) {
console.log("worked");
// this callback will be called asynchronously
// when the response is available
$scope.people = data;
}).
error(function(data, status, headers, config) {
console.log("fail");
// called asynchronously if an error occurs
// or server returns response with an error status.
});
}
}]);
You need to remove $scope and $http from peopleController function which are overriding the existence of $http & $scope
Other thing you should mention ng-controller='MainController' instead of ng-controller='peopleController'
Also change the name peopleController to getPeople. I'm assuming that you want function there instead of controller.
I'm trying to Loop trough a variable, search for the ID's and then make an ajax call to get the Detailcontent of the different ID's in the Success function I try to loop trough the received content and get the emails out.
It is working but i get the first email twice in my $scope.subContactmail. I think there is a problem with the loop but i don't get it. Was trying to figure it out the whole night and unfortunately no idea came trough. The idea should be that if the first loop is finished it will start with the second loop. But at the moment the first loop goes trough the second as well.
Problaby your pros out there can help me with this problem.
Looking forward for your help!
Here is the specific part of my angular app file:
//find all contract relations id's from customer
$scope.contactrelation = function (input) {
$http.post('http://localhost/mamiexpress/mamiAPI/includes/php/searchContactsRelation.php', input).
success(function(data, status, headers, config) {
$scope.subContactDetails = [];
$scope.subContactmail = [];
$scope.subContactId = data;
console.log($scope.subContactId);
//GET ALL the subcontact ID's from the selected item
var i=0;
var subContactIdlenght = $scope.subContactId.length;
while (i < subContactIdlenght) {
console.log($scope.subContactId[i].contact_sub_id);
var number = $scope.subContactId[i].contact_sub_id;
i = i + 1;
//Send the ID to the API and get the user Details
$http.post('http://localhost/mamiexpress/mamiAPI/includes/php/searchContactswithID.php', number).
success(function(data, status, headers, config) {
$scope.subContactDetails.push(data); // store it in subContactDetails
console.log($scope.subContactDetails);
//HERE COULD BE THE PROBLEM!!
// I want this loop to start when the first loop is finished but i have to run this in this success function.
// At the moment i get the first email twice!
//Loop trough ContactDetails and get the emails.
if (i == subContactIdlenght){
var subContactDetailslength = $scope.subContactDetails.length;
for(var p=0; p < subContactDetailslength; p++) {
console.log($scope.subContactDetails[p].mail);
var number = $scope.subContactDetails[p].mail;
$scope.subContactmail.push(number);
};
};
}).
error(function(data, status, headers, config) {
$scope.errormessage = data;
console.log(data);
});
};//ENDWHILE
console.log(data);
}).
error(function(data, status, headers, config) {
$scope.errormessage = data;
console.log(data);
});
you have 2 solutions
Use the promise API (recommended):
something like that
var wheatherPromise = $http.get(...);
var timePromise = $http.get(...);
var combinedPromise = $q.all({
wheather: wheatherPromise,
time: timePromise
})
combinedPromise.then(function(responses) {
console.log('the wheather is ', responses.wheather.data);
console.log('the time is ', responses.time.data);
});
OR
simply do the following:
make ur $http request in a seperated function or (AJS service is
recommended).
call that function in a for loop based on ur list
declare a scope variable holds an empty array inside the function
push response objects in the array
avoid defining $http.get inside a for loop which cause unexpected behavior
I think what you need is promises/deferred API here.
In angular im using $http.post for sending an id to a php script in order to use this id for a mysql request.
This is my controller:
function ProjectDetailsCtrl($scope, $http, $timeout, getGoodIdProjectDetails) {
$scope.idProjectDetails = getGoodIdProjectDetails.getId(); //Getting id project
$scope.$emit('LOAD')
$scope.url = 'scripts/findProjectDetails.php';
$http.post($scope.url, { "idProject" : $scope.idProjectDetails}).
success(function(data, status) {
$scope.projectDetails = {};
$scope.projectDetails.details = data;
$scope.$emit('UNLOAD')
})
.
error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
});
}
idProjectDetails is a number.
Then the Php script :
<?php
$idProject = json_decode($_POST['idProject']);
Php script returns that $idProject is undefined.
Can you help me with this ?
Edit : I tried this way but my app crashed with this :
$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
$http({
method: 'POST',
url: 'scripts/findProjectDetails.php',
data: "idProject" : $scope.idProjectDetails
}).success(function(data, status) {
$scope.projectDetails = {};
$scope.projectDetails.details = data;
console.log(projectDetails.details);
$scope.$emit('UNLOAD')
})
.
error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
});
With the first example, in Chrome console, the "request playload" contain this : {idProject:1} idProject:1 so I assume my variable is correctly passed through the php script?
There is much confusion among newcomers to AngularJS as to why the $http service shorthand functions ($http.post(), etc.) don’t appear to be swappable with the jQuery equivalents (jQuery.post(), etc.) The difference is in how jQuery and AngularJS serialize and transmit the data. Fundamentally, the problem lies with your server language of choice being unable to understand AngularJS’s transmission natively ... By default, jQuery transmits data using Content-Type: x-www-form-urlencoded and the familiar foo=bar&baz=moe serialization. AngularJS, however, transmits data using Content-Type: application/json and { "foo": "bar", "baz": "moe" } JSON serialization, which unfortunately some Web server languages—notably PHP—do not unserialize natively.
So concretely, your $_POST variable is empty !
To go through this problem there're 2 solutions:
Change the data format in Angular config
Change the way to get the datas with PHP(Deprecated but works)
I haven't invented anything here, just linking...
Hope it'll help.
I want to get carData.json file from a server using AngularJS.
Here is how I have structured it:
I have a services.js file (inside of js forlder) where I hold all of my services and factories. Here is the factory that I use to get carData.json file from a server:
carApp.factory('getAllCars', function($http){
return {
get: function() {
return $http.get('data/carData.json');
}
};
});
I also have a CarsByReviewCtrl controller that uses the carData.json file for its purposes:
carApp.controller("CarsByReviewCtrl", function($scope, getAllCars) {
getAllCars.get().success(function(data){
$scope.allCars = data;
}).error(function(data, status, headers, config) {
alert("AJAX failed")
});
$scope.carList = [];
console.log($scope.allCars);
...
And finally here is the end of my .html file where I pass these .js files. (I have called the controller in the middle of my html file)
<script type="text/javascript" src="js/controllers/CarsByReviewCtrl.js"></script>
<script type="text/javascript" src="js/services.js"></script>
</body>
</html>
Now, if I run my app and open the console, I would get the output of undefined, instead of javascript object that I got from the server.
What have I done wrong and how can I fix that?
You are trying to print the content of $scope.allCars before the HTTP request is resolved.
Added some comments to your code in order to explain how you should be reading it:
carApp.controller("CarsByReviewCtrl", function($scope, getAllCars) {
// first line of JS to be invoked
getAllCars.get().success(function(data){
// this will be executed later in time, after receiving the HTTP response (case success)
$scope.allCars = data;
}).error(function(data, status, headers, config) {
// this will be executed later in time, after receiving the HTTP response (case error)
alert("AJAX failed")
});
// this will be executed immediately after the previous JS line: getAllCars.get()
$scope.carList = [];
// this will be executed immediately after the previous JS line
console.log($scope.allCars);
the problem is: console.log($scope.allCars) runs before the success handler runs.
you can change your code to:
carApp.controller("CarsByReviewCtrl", function($scope, getAllCars) {
getAllCars.get().success(function(data){
$scope.allCars = data;
console.log($scope.allCars);
}).error(function(data, status, headers, config) {
alert("AJAX failed")
});
$scope.carList = [];
...