Pass an array in url width ionic

Question

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 :

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)"

Because when I click on "Panda", I would like to go on an other view (music.html), showing informations about the song I selected. So music.html must know which music I selected. — Emilien, Aug 23 '16 at 09:20

score 0 · Accepted Answer · edited May 23 '17 at 12:01

0

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:

{"id":"30", "image":"/img/panda-desiigner-jpg.jpg", "artiste":"Desiigner", "titre":"Panda", "duree": "2:05"} is an object, not an array.
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.

edited May 23 '17 at 12:01

Community

1
1

answered Aug 23 '16 at 09:23

C.Champagne

5,381
2
23
35

Thank you, I think my code is better now :) But it doesn't work, I think it's the value passed in recupId function .. ng-click="recupId({{lesMusiques[]}})" ?? – Emilien Aug 23 '16 at 09:35
THAAAAAAAAANK YOU ! Really Thank you so much ! :D Look the **EDIT 3** I put my right code. About your remarks, I apologize, I thought an array was always an object. And for the English language, you're right, I'll put all my comments and variables in english .. ^^ – Emilien Aug 23 '16 at 12:11
@Riddick you're welcome. You're right when you write that an array is always an object but an object is not always an array (in JavaScript at least). `[123, 456]` is an array and therefore an object (as `lesMusiques`is) but `{name : 'value'}` is only an object. – C.Champagne Aug 23 '16 at 12:56
@Riddick note also that `typeof([1,2])` returns `"object"` – C.Champagne Aug 23 '16 at 12:57

Pass an array in url width ionic

1 Answers1