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
– Emilien, Commented Aug 23, 2016 at 9:20

Community · Accepted Answer · 2017-05-23 12:01:43Z

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, 2017 at 12:01

CommunityBot

11 silver badge

answered Aug 23, 2016 at 9:23

C.Champagne

5,5492 gold badges25 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Emilien Over a year ago

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 Over a year ago

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 .. ^^

C.Champagne Over a year ago

@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 lesMusiquesis) but {name : 'value'} is only an object.

C.Champagne Over a year ago

@Riddick note also that typeof([1,2]) returns "object"

Collectives™ on Stack Overflow

Pass an array in url width ionic

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related