can you please check now
So what’s the problem? If you actually want people to be able to run and try to debug some code, I think the best way is to put it in a CodePen.
how to show in ionic html ? how i will call. and fetch individual data…
So I’m assuming that your service and controller code work and fetch the data and set in in $scope.profile.
Anything that is on your controller $scope can be used in the html that uses that controller. Standard way to show data is via double brackets {{}} in the html.
e.g.
<div ng-controller="ProfileCtrl">
<span>Profile: {{profile}}</span>
</div>
In ionic, the controller is assigned to the html template in app.js rather than directly in the html template like in my example.
Thank you for your help. I m trying now as you said.
HI edd,
i used this but this is not working when im running ionic serve it is coming black screen can you tell me what is error here.
in controller.js i written
.controller('SessionCtrl', function($scope, $http) {
var url = 'http://tmcs.no-ip.info:83/iAutoCount/Profile.svc/json/GetProfile?dbName=5bvq9pq8EokHTf+uB/yLD61bh48juTfB/Up19EK4bks=&uDId=iKNColFa+oztAVriouDfvMpoNDwsYn9H4aJxSVWFIWpqyPnE1k47C5VUkpntIVPr&appsVersion=1.27.5&deviceUsage=180&appRealVersion=1.27.6&osVersion=8.1'
$http.get(url).success(function(data) {
console.log(data);
$scope.sessions = data;
});
})
and in html i m calling like you said
<div ng-controller="SessionCtrl">
<span>Profile: {{sessions.UUID}}</span>
</div>Hi edd,
i got the solution
but still i have some problem why data not fetching from api. if fron json url i copy to a json file and remove [ ] this two brackets its working... but from url not working
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
angular.module('app',[])
.controller('MainCtrl', function($scope, $http) {
var url1='http://echo.jsontest.com/conditions/frightful'
var url2='http://tmcs.no-ip.info:83/iAutoCount/Sales.svc/json/GetSalesInfo?dbName=5bvq9pq8EokHTf+uB/yLD61bh48juTfB/Up19EK4bks=&uDid=iKNColFa+oztAVriouDfvMpoNDwsYn9H4aJxSVWFIWpqyPnE1k47C5VUkpntIVPr'
$http.get(url2).then(function(resp) {
$scope.row = resp.data;
}, function(err) {
console.error('ERR', err);
// err.status will contain the status code
})
});
</script>
</head>
<body ng-app="app">
<div ng-controller="MainCtrl">
<span>Profile: {{row.LastMonthPOS}}</span>
</div>
</body>
</html>Hi edd can you help me… i m stuck here…
What kind of error are you getting?
It could be related to CORS. If so, you could try using the $http jsonp method instead of $http.get.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://tmcs.no-ip.info:83/iAutoCount/Sales.svc/json/GetSalesInfo?dbName=5bvq9pq8EokHTf+uB/yLD61bh48juTfB/Up19EK4bks=&uDid=iKNColFa+oztAVriouDfvMpoNDwsYn9H4aJxSVWFIWpqyPnE1k47C5VUkpntIVPr. This can be fixed by moving the resource to the same domain or enabling CORS.
yes CORS ERROR. how to use http jsonp ?
Hi edd. i follow this url it is working there.
can you please check mycode, i think in html how to call i thing wrong.
<script>
angular.module('app',[])
.controller('myBusStopCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.realTimeData;
var url = "http://tmcs.no-ip.info:83/iAutoCount/Sales.svc/json/GetSalesInfo?dbName=5bvq9pq8EokHTf+uB/yLD61bh48juTfB/Up19EK4bks=&uDid=iKNColFa+oztAVriouDfvMpoNDwsYn9H4aJxSVWFIWpqyPnE1k47C5VUkpntIVPr" + "?callback=JSON_CALLBACK";
$http.jsonp(url)
.success(function(data){
$scope.realTimeData = data;
});
}]);
</script>
and in html i m calling this
<body ng-app="app">
<div ng-controller="myBusStopCtrl">
<span>Profile:{{realTimeData.LastMonthCollection}}</span>
</div>
</body>That looks fine. What’s the problem?
If you console.log($scope.realTimeData) , does it get set and does it have a LastMonthCollection property?
this error showing in console.
Failed to load resource: the server responded with a status of 400 (Bad Request)
below is my html pls run
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
angular.module('app',[])
.controller('myBusStopCtrl', ['$scope', '$http', function ($scope, $http) {
var url = "http://tmcs.no-ip.info:83/iAutoCount/Sales.svc/json/GetSalesInfo?dbName=5bvq9pq8EokHTf+uB/yLD61bh48juTfB/Up19EK4bks=&uDid=iKNColFa+oztAVriouDfvMpoNDwsYn9H4aJxSVWFIWpqyPnE1k47C5VUkpntIVPr" + "?callback=JSON_CALLBACK";
$http.jsonp(url)
.success(function(data){
$scope.realTimeData = data;
console.log($scope.realTimeData)
});
}]);
</script>
</head>
<body ng-app="app">
<div ng-controller="myBusStopCtrl">
<span>Profile:{{realTimeData.LastMonthCollection}}</span>
</div>
</body>
</html>Hi,
The code looks mostly fine.
First thing is that you should add the callback=JSON_CALLBACK using & not ?. Your URL already has a ? to denote the start of the query string. So your URL should become:
var url = "http://tmcs.no-ip.info:83/iAutoCount/Sales.svc/json/GetSalesInfo?dbName=5bvq9pq8EokHTf+uB/yLD61bh48juTfB/Up19EK4bks=&uDid=iKNColFa+oztAVriouDfvMpoNDwsYn9H4aJxSVWFIWpqyPnE1k47C5VUkpntIVPr&callback=JSON_CALLBACK";
It appears that your server API has a problem returning JSONP data or Angular has a problem interpreting the returned data as JSONP. Quite strange and I’ve not seen this happen before. Using Chrome developer tools and looking on the network tab, you can see your response though, but its not correct JSONP format.
Try using this URL (from SO post) to see how a correct response looks
var url1 = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK";
Not sure what to suggest I’m afraid. If you have access to the server side API you could enable CORS and tehn you can just go backk to using a GET request.
HI Thanks for your detailed info. i m requesting for enable cors and trying if any other options . if you are getting any solution please reply me back.
also can you help me on how to write complicated json data , in html like data.name, json data are in array how to write.
i changed ? to & now, and checked in chrome network->response all data is showing.
but not showing {{realTimeData.LastMonthPOS}}Changing the ? to a & corrected the URL, but the JSONP request still won’t work for some reason, and therefore your {{realTimeData.LastMonthPOS}} is not showing. You need to fetch the data correctly before you can display it. I think enabling CORS will be the best solution, although JSONP should work and I’ve no idea why it’s not I’m afraid - sorry!
also can you help me on how to write complicated json data , in html like data.name, json data are in array how to write.
I think this is a different subject for a different post, but it is not really suitable for the Ionic forum and better off on Stack Overflow. All I will say, is that you can just access a json object from the array like you would get anything from an array. e.g. var myJsonObject = myJsonObjectArray[0];
Hi edd,
i need a help. i have 100 items in json data . i want to show 10 items per page then below a load more link, on click of load more another 10 item will load. can you help me how to do.
This is known as “paging” or “pagination”.
This is a separate topic and not related to Ionic. Ionic doesn’t have a pager control.
You will get better results posting questions like this on StackOverlfow. But there is so much material out there already you just need to google “angularjs paging”.
Okey thanks for your prompt reply…i will check it out. also i need a splash screen, i m searching i read some your articles too but not got final solution. can you give me a example.