Bring data from one state to another

ionic-v1
1

Hello guys!

I need some help, I have an app with a list of Dribbble users, using their API. When I select the user I want to bring the user detail based on the ID brought by the $stateParams.

I’m new to Angular and Ionic, a help would be awesome!
I read about services and child states, but I don’t know how to do it properly.

This is the repository: https://github.com/matheusbaumgart/yo-ionic-eyedentify.git
If you guys could have a look.

Thanks you very much.

2

I recent wrote a pretty long stack overflow answer for this kind of problem. You want to share data in multiple places, and here are 3 ways you can do that. I would use services.

Think of a service like a piece of data that can be injected into any controller. In this case you inject the dribble user list into a controller to show the full list, then you inject the same list into another controller that shows just one user, which you use the $stateParams to search through the list to locate the specific user.

2 Likes
3

Thank you @gnomeontherun, that helped me to see what I need to do. Really good explanation.

I’m calling the person data using:

$http.jsonp('http://api.dribbble.com/players/'+$stateParams.person+'/?callback=JSON_CALLBACK')
4

One suggestion, I would not use JSONP. It has been proven insecure and Dribble supports CORS so you shouldn’t have any trouble trying to load that data.

http://developer.dribbble.com/v1/#cross-origin-resource-sharing

5

Thanks for the suggestion. Could you help me with the correspondent code for the $http.jsonp?
It’s my first time working with API’s and there requests, I have no idea how to turn this call to use CORS.

I read some articles, but couldn’t find something specific to my case.

Thank you again.

6

Sure. Don’t worry about CORS in this situation, its not something you do its something the API has to do.

Instead of using JSONP, you just use a regular GET request. This can vary from API to API, but dribble has a quality API that makes things fairly easy.

// Load the user's data
$http.get('http://api.dribbble.com/players/' + $stateParams.person)
 // Chain a success callback when the data has loaded, 
 // and store the response in $scope.user
  .success(function (user) {
    $scope.user = user;
  })
  .error(function () {
    // Oh no, handle error here
  });
1 Like
7

@gnomeontherun I changed to:

$http.get('http://api.dribbble.com/shots')
.success(function(res) {
  defer.resolve(res);
});
// .error(function(status, err) {
//   defer.reject(status);
// });

But I’m now getting this error:

XMLHttpRequest cannot load http://api.dribbble.com/shots. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.1.9:8100' is therefore not allowed access.

Do I need to config something to be able to use http.get with their API?

Thank you, again.

8

My bad, I forgot the https and to pass the token, now because the CORS thing, I need to register my application. All working fine now.