Search code examples
ionic-frameworkionic-view

Pass an array in url width ionic

Hello everyone :)

I have an array lesMusiques, and when I click on a music I would like to have informations about this one. For example, if I selected the first one, I must have the array : {"id":"30", "image":"/img/panda-desiigner-jpg.jpg", "artiste":"Desiigner", "titre":"Panda", "duree": "2:05"}

But I don't know how to pass it in the url as a parameter. I saw stuffs like enter each value of the array, but I hope it's not the only solution ..

There is my code :

var lesMusiques = [
  {"id":"30", "image":"/img/panda-desiigner-jpg.jpg", "artiste":"Desiigner", "titre":"Panda", "duree": "2:05"},
  {"id":"31", "image":"/img/another-love.jpg", "artiste":"Tom Odell", "titre":"Another love", "duree": "4:22"},
  {"id":"32", "image":"/img/Dont-Mind-Kent-Jones.jpg", "artiste":"Kent Jones", "titre":"Don't mind", "duree": "3:31"},
  {"id":"33", "image":"/img/Jain_Cover_Album.jpg", "artiste":"Jain", "titre":"Come", "duree": "32:23"},
  {"id":"34", "image":"/img/Snoop-dogg.jpg", "artiste":"Snoop Dogg", "titre":"This city", "duree": "33:54"},
  {"id":"35", "image":"/img/another-love.jpg", "artiste":"Tom Odell", "titre":"Another love", "duree": "34:22"}
];

.controller('HomeCtrl', function($scope, $state){

/* On passe l'id de la musique sélectionnée au controlleur MusicCtrl */
  $scope.recupId = function(tabMusic){
    $state.go('music', {tabMusic})
  }

// On indique à la vue qu'elle dispose maintenant du tableaux contenant les musiques
  $scope.lesMusiques = lesMusiques;
})

.controller('MusicCtrl', function($scope, $stateParams){
  console.log($stateParams);
})

And my stateProvider :

$stateProvider.state('music',{
  url: '/musiques/:TabMusiques',
  templateUrl: 'templates/music.html',
  controller: 'MusicCtrl'
})

In my view (home.html) :

<ion-list>
        <!-- Chaque item est un lien -->
        <a ui-sref="music" ng-repeat="laMusique in lesMusiques" ng-model="TabMusic" ng-click="recupId(I DON'T KNOW WHAT TO PUT HERE)" class="item item-thumbnail-left">

                <img src="{{laMusique.image}}">
                <h2 class="white">{{laMusique.titre}}</h2>
                <p class="white">{{laMusique.artiste}}</p>
                <p class="padding-vertical white">{{laMusique.duree}}</p>
        </a>
</ion-list>

I hope some of you would help me :)

EDIT : My home page : enter image description here

EDIT 2 : When I take a console.log($state.parameters.musiqueChoisi); I have an error : Cannot read property 'musiqueChoisi' of undefined ! Why ?

Now my code is :

$stateProvider.state('music',{
  url: '/musiques',
  parameters: { musiqueChoisi : null },
  templateUrl: 'templates/music.html',
  controller: 'MusicCtrl'
})

and in HomeCtrl :

.controller('HomeCtrl', function($scope, $state){

/* On passe l'id de la musique sélectionnée au controlleur MusicCtrl */
  $scope.recupId = function(tabMusic){
    $state.go('music', {musiqueChoisi : tabMusic})
  }
})

MusicCtrl :

.controller('MusicCtrl', function($scope, $stateParams, $state){
  $state.parameters.musiqueChoisi
  console.log($state.parameters.musiqueChoisi);
})

EDIT 3 : SOLUTION (Thanks C.Champagne)

So there are my controllers :

.controller('HomeCtrl', function($scope, $state){

    $scope.recupId = function(tabMusic){
      $state.go('music', {musiqueChoisi : tabMusic})
    }
    $scope.lesMusiques = lesMusiques;
})

.controller('MusicCtrl', function($scope, $stateParams, $state){
    var musique = $state.params.musiqueChoisi
    console.log(musique);

    $scope.musique = musique;
})

The StateProvider :

$stateProvider.state('music',{
  url: '/musiques',
  params: { musiqueChoisi : null },
  templateUrl: 'templates/music.html',
  controller: 'MusicCtrl'
})

And in my view :

ng-click="recupId(laMusique)"
Solution

  • I think you should use the go method on the $state service and define a parameter in your state.

    $stateProvider.state('music',{
  url: '/musiques',
  params: {musicData : null},
  templateUrl: 'templates/music.html',
  controller: 'MusicCtrl'
})

    and you should call it that way :

    $state.go('music', {musicData : tabMusic});

    Have a look at this answer

    EDIT

    To answer to your comment, I think your ng-click (in your view) should be :

    ng-click="recupId(laMusique)"

    or as the name of your function suggest it 

    ng-click="recupId(laMusique.id)"

    ...but you will have to retrieve your object from your the id.

    And...oooh I forgot it...to retrieve your parameter in the view :

    var musique =  $state.params.musiqueChoisi;

    (Don't forget to set $state as a parameter of your controller.)

    Just two small remarks to make me look old and stupidly grumpy:

    1. {"id":"30", "image":"/img/panda-desiigner-jpg.jpg", "artiste":"Desiigner", "titre":"Panda", "duree": "2:05"} is an object, not an array.
    2. I love French (It is my mother tongue) and I understand people intending to preserve it. Nevertheless I always code and comment in English because I know that I certainly will have to share or transmit code or collaborate with people that could not understand it.