I was trying to parse JSON array in AngularJS. But it's not working. If the array is written directly it's working. Help me to solve the issue. The code I have been using is below.
(function () {
var app = angular.module('store', ['ngCookies']);
app.controller('StoreController', ['$scope', '$cookies', function ($scope, $cookies) {
$scope.products = JSON.parse(SuccessItems);
$scope.cart = [];
$scope.total = 0;
var expireDate = new Date();
expireDate.setDate(expireDate.getDate() + 1);
$cookies.putObject('cart', $scope.cart, { 'expires': expireDate });
$scope.cart = $cookies.getObject('cart');
$scope.total += parseFloat(product.price);
$cookies.put('total', $scope.total, { 'expires': expireDate });
};
}]);
var SuccessItems = '';
$.ajax({
type: "POST",
url: "code.aspx/RetrieveItems",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (jsondata) {
SuccessItems = jsondata.d.replace(/"(\w+)"\s*:/g, '$1:').replace(/"(\d[.]\d+)"/g, "$1");
},
error: function (xhr, ajaxOptions, thrownError) {
errMsg = JSON.parse(xhr.responseText).Message;
alert(baseErrorMsg + 'Error Code : ' + errMsg);
}
})
})();
Related
var myModule = angular.module("myModule",[]);
myModule.controller('addLoginController',function($scope,$http,$log){
$scope.login() = function() {
$scope.user = $http({
method: 'POST',
url: 'http://127.0.0.1:8000/users',
data: {
email: $scope.email,
password:$scope.password
},
headers: {"Content-Type": 'application/json'}
})
.then(function(response){
$scope.userData = response.data;
$scope.status = response.status;
$scope.headers = response.headers;
$scope.config = response.config;
$log.console(response);
}, function (response) {
$scope.error = response.data;
alert("unsuccessful call");
});
}
});
This is the correct syntax for a function expression (remove ()):
$scope.login = function() {
...
}
i want to my put http json files in slides.push(). so here i used ui.bootstrap.carousel , and i want to set image in my html .
So how can i do it . can someone help me?
.controller('dashboardCtrl', ['$scope', '$http', '$location','$timeout', function ($scope, $http, $location, $timeout) {
$http.get('json/login.json').success(function (data) {
$scope.info = data.profile[0];
$scope.pic = data.offers[0];
console.log($scope.pic);
})
$scope.myInterval = 500;
$scope.noWrapSlides = false;
$scope.active = 0;
var slides = $scope.slides = [];
var currIndex = 0;
$scope.addSlide = function() {
// var newWidth = 600 + slides.length + 1;
slides.push({
image: '../image/slide1.png',
id: currIndex++
},
{
image: '../image/slide2.png',
id: currIndex++
},
{
image: '../image/slide3.png',
id: currIndex++
}
);
};
Just put your slides.push to $http.get function, like here:
$scope.get = function() {
$http({
method: 'GET',
url: 'json.json'
})
.then(function successCallback(data){
$scope.img = data.data;
slides.push({
image: $scope.img[0].url,
id: currIndex++
});
}, function errorCallback(response){
console.log(response);
console.log('error');
});
}
Also you can add all url from json.json through some kind of loop .In my code I am pusshing first url from json.
Here is plunker : http://plnkr.co/edit/27RvnjGCT5i0MCNooZeB?p=preview
I want to change var in js according to below Code:
<script type="text/javascript">
var dataRes;
ersalvetabeApi()
function ersalvetabeApi() {
$.ajax({
url: '/Api/Test',
type: 'GET',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (data, textStatus, xhr) {
// dataRes=data[0]
dataRes = data;
console.log(data[0]);
},
error: function (xhr, textStatus, errorThrown) {
console.log('Error in Operation');
}
});
}
var myApp = angular.module('myApp', []);
myApp.controller('TestCtrl', ['$scope', '$window', function ($scope, $window) {
//this.array = $window.dataRes;
this.array = $window.dataRes;
}]);
</script>
When I use this code, this code not work. But when I used alert(datares) under ersalvetabeApi() this work. I don't want to use alert.
Please help to resolve it. Thanks in advance.
You are doing an async call to the server, but running angular application synchronically, so when you reach angular code, value not assigned to window variable yet.
var dataRes;
ersalvetabeApi().then(function () {
var myApp = angular.module('myApp', []);
myApp.controller('TestCtrl', ['$scope', '$window', function ($scope, $window) {
//this.array = $window.dataRes;
this.array = $window.dataRes;
}]);
});
function ersalvetabeApi() {
return $.ajax({
url: '/Api/Test',
type: 'GET',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (data, textStatus, xhr) {
// dataRes=data[0]
dataRes = data;
console.log(data[0]);
},
error: function (xhr, textStatus, errorThrown) {
console.log('Error in Operation');
}
});
}
Try to wrap your code which should be called after data returned from ajax call. Now it will run asynchronously.
finally i can resolve it. may be need for everybody.
my Code:
var myApp = angular.module('myApp', []);
myApp.factory('valueService', function ($interval) {
var service = {
ue: "hjk",
};
return service;
});
myApp.controller('SomeController', function ($scope, $interval, valueService) {
// start(); // this line will execute when constructor initiates, starting the whole thing.
// valueService.value = "45356";
start();
function start() {
$interval(function () {
$.ajax({
url: '/Api/Test',
type: 'GET',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (data, textStatus, xhr) {
// dataRes=data[0]
dataRes = data;
valueService.ue = data;
console.log(valueService.ue[0].id);
},
error: function (xhr, textStatus, errorThrown) {
console.log('Error in Operation');
}
});
}, 1000,2);
}
});
myApp.controller('TestCtrl', function ($scope, valueService) {
$scope.message = 'Another Controller';
$scope.valueService = valueService;
// this.array = valueService;
});
<div ng-controller="SomeController">
</div>
<hr />
<div ng-controller="TestCtrl as ctrl">
<span ng-repeat="entry in valueService.ue track by $index">
{{ entry.name }}+"/"
</span>
{{message}}
</div
GoodLuck
When i call submit function it calls but give error like this , what is the error in this function .
Error: $ is not defined
$scope.submit#http://localhost/angularAjax/app.js:19:21
Mc/u/<#https://code.angularjs.org/1.0.3/angular.min.js:70:297
dc[c]</</</<#https://code.angularjs.org/1.0.3/angular.min.js:140:1
Sc/this.$get</e.prototype.$eval#https://code.angularjs.org/1.0.3/angular.min.js:86:306
Sc/this.$get</e.prototype.$apply#https://code.angularjs.org/1.0.3/angular.min.js:86:412
dc[c]</</<#https://code.angularjs.org/1.0.3/angular.min.js:140:505
pc/c/<#https://code.angularjs.org/1.0.3/angular.min.js:22:460
m#https://code.angularjs.org/1.0.3/angular.min.js:6:191
pc/c#https://code.angularjs.org/1.0.3/angular.min.js:22:433
Here is code :
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$scope.hello = {name: "Boaz"};
$scope.newName = "";
/*$scope.sendPost = function() {
var data = $.param({
json: JSON.stringify({
name: $scope.newName
})
});
$http.post("/echo/json/", data).success(function(data, status) {
$scope.hello = data;
})
} */
$scope.submit = function () {
$http({
method : 'POST',
url : 'pro.php',
data : $.param($scope.contact), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
}) .success(function (data) {
alert(data);
console.log(data);
});
}
});
Angular is working , just ajax call fails
The $.param function you are calling inside $scope.submit is from jQuery. Make sure you are including a reference to jQuery in your page
i think you can convert the data to json, using JSON.stringify like this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$scope.hello = {name: "Boaz"};
$scope.newName = "";
/*$scope.sendPost = function() {
var data = $.param({
json: JSON.stringify({
name: $scope.newName
})
});
$http.post("/echo/json/", data).success(function(data, status) {
$scope.hello = data;
})
} */
$scope.submit = function () {
$http({
method : 'POST',
url : 'pro.php',
data : JSON.stringify($scope.contact), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
}) .success(function (data) {
alert(data);
console.log(data);
});
}
});
It will fail to bind data from http response if you uncomment "//" line,why? It should be the same, right?
var m = angular.module('users', []);
m.controller('UserList', function($scope) {
// $scope.getdata = function() {
var u = "http://wisebe.duapp.com/admin?queryusers";
var userList = this;
var body = {
activityid: "10",
checkin: $('#checkin').val()
};
$.ajax({
url: u,
type: "post",
async: false,
data: body,
success: function(data) {
userList.users = data;
}
});
// };
// $scope.getdata();
$('#checkin').change(function() {
// $scope.$apply();
});
});