Cant make this thing work.. pass data with stateParams please help

ionic-v1
1

i hope someone can help in here… the stateParams not works for me,

i have data save in service,
a products page with list of the items
and product details page (where i want to show the selected item details).

currently i have the below:

service where i keep my products data:

.service(‘ServDataProducts’, [function(){
var Product = [
{code:1111, name: “nameA”, brand:“AAA”, price:10},
{code:2222, name: “nameB”, brand:“BBB”, price:20},
{code:3333, name: “nameC”, brand:“AAA”, price:30}
];
return Product

products page where i show the list of the items:

$scope.Product = ServDataProducts;

in the html list i show the items with ng-repeat = x in Product
and i show the product name with {{x.name}}
and in this product name i have ng-click to: goToPageProductDetails()
$scope.goToPageProductDetails = function() {$state.go(‘pageProductDetails’, $scope.selectedItem)}

up to here all works, now i have this product details page that i want to show the selected item details:

page name: pageProductDetails
i call the data from the service:
$scope.selectedItem= ServDataProducts;

here i go lost… what i should write in this page in order to show the selected item {{x.code}}, {{x.name}} etc. ??
how do i pass to this page the item details i select from my list???

2

you can do like this

 $state.go("pageProductDetails", { item: $scope.selectedItem })

in your app.js

.state('pageProductDetails', {
             url: '/pageProductDetails/:item',
               templateUrl: 'templates/yourTemplate.html',
               params: { obj: null },
               controller: 'yourNewController'
             }

create new controller for the details page(not necessary just an option)
there do like this

 if ($stateParams.item!= null) {
        $scope.details= $stateParams.item;
}

don’t forget to inject $stateParams in your controller
let me know the progress

3

many thanks Rahul ! i really go lost in here, :sweat:

Unfortunately I just can not succeed with this. i try what you sent and i get "undefined ",
i try to clear and start to start again…

in the first page where i show my Products list :

1. i call the products from the service like this:
$scope.Product = ServDataProducts;

2. i have a list with ng-repeat = x in Product

3. in this list i have list item with title of {{x.name}} and other title with {{x.code}}

-------up to here all is great and it shows my list with all the items.

from here i have to find a way to go to the detail page and show in it the {{x.name}} and {{x,code}} of the products i click on from my list.

4. now in the {{x.name}} i have: ng-click = goToPageProductDetails(), it also work and go to the page.
$scope.goToPageProductDetails = function() {$state.go(‘pageProductDetails’, { item: $scope.Product })}

5. On both pages i have params ‘name’

6. in the pageProductDetails controller i have as below (i add an alert for quick show and it always show ‘undefined’ ):

function ($scope, $stateParams, ServDataProducts) {
if ($stateParams.item!= null) {
$scope.details= $stateParams.item;
}

alert($scope.details)
}

4

upto 3 step its ok
try to do like this in 4th step

I assume that you are using ng-click in same list that you are using ng-repeate
change the click function like this

ng-click = goToPageProductDetails(x)

in this function

$scope.goToPageProductDetails = function(x) {$state.go('pageProductDetails', { item: x })}

here you get the object iteself from the variable x so dont need to take again from the service

if ($stateParams.item!= null) {
$scope.details= $stateParams.item;
}

check if $stateParams.item null or not

 .state('pageProductDetails', {
         url: '/pageProductDetails/:item',
           templateUrl: 'templates/yourTemplate.html',
           params: { obj: null },
           controller: 'yourNewController'
         }
5

thank you,

Ok now finally it seems like it moves … but i am not there yet.
maybe you can understand by the response of the alert,

i put this alert in the details page to check whats happens :

alert($stateParams.item);

when i click - go from the list page to the details page, i get in the alert this :

[object Object]

by the way when i run only the detail page, i get the alert :

: item

i put the alert because i am not sure what to place in the title to show the {{x.name}} in the details page,
so i first check in the alert what i get…

you can reorganize from here what i should change so it will work?

6

if you are using browser to test
use console.log instead of alert
ok just do two things
inside the $scope.goToPageProductDetails function just use

console.log(x)

and inside

if ($stateParams.item!= null) {
console.log($stateParams.item);
console.log($stateParams.item. name);

$scope.details= $stateParams.item;

console.log( $scope.details);

}

let me know after that

note*
$stateParams.item contains the object in the array called Product .

7

wonderful, in the console i see the object Products i click on.

this is what i see now at the console log every time i click on one of the products from the list:

object {code: 1101, name: “big Knife”, brand: “jama”, price: 30, stock: 29…}

(good - this the the data of the product i have in my data)
i try to click on a few more items and it bring the product object i click on - its great

now how i can show this details in the details page??

8

my details page controller looks like this now:

function ($scope, $stateParams, ServDataProducts) {

if ($stateParams.item!= null) {
console.log($stateParams.item);
console.log($stateParams.item. name);

$scope.details= $stateParams.item;
console.log( $scope.details);
}

and every time i click on item from my list it shows the entire object in the console

9

$scope.details you will get the desired object
in your html page just bind the details like this
Name: {{details.name}}
Brand: {{details.brand}}

10

thanks but it not work yet, sorry i cant understand what wrong,
should i return the ng-click as it was before?

look i put at the controller of the list products page this:

$scope.goToPageProductDetails = function(x) {$state.go(‘pageProductDetails’, { item: x })}

and in the product details page i put this :

function ($scope, $stateParams, ServDataProducts) {
if ($stateParams.item!= null) {
console.log($stateParams.item);
console.log($stateParams.item. name);
$scope.details= $stateParams.item;
console.log( $scope.details);
}
}

and i try to show title in the product details page using {{details.name}}
and it not show…

11

no i try to see the console when i only show the console.log( $scope.details);
and it shows me [object Object]

12

what is the output in
console.log($stateParams.item. name);

13

when i put only console.log($stateParams.item. name);
the console shows : undefined

14

are you sure you have data in
console.log(“StateParams”);
console.log($stateParams.item);

15

in the products list page,
when i do this in the click function:
$scope.goToPageProductDetails = function(x) {console.log(x)}

in the console log i see the object of the item in the console output.

but when i put this in the click function:
.
$scope.goToPageProductDetails = function(x) {$state.go(‘pageProductDetails’, { item: x })}

it go to the page detail item and show me this on the console:
[object Object]
undefined
[object Object]

and in my page details i have this in the controller:

function ($scope, $stateParams, ServDataProducts) {

if ($stateParams.item!= null) {

console.log($stateParams.item);
console.log($stateParams.item. name);

$scope.details= $stateParams.item;

console.log( $scope.details);
}}

16

what is the app.js code for the details page view?
are you specifying params there?
ithink the problem is the object is not passing to details controller

17

i set in both pages params : name

18

can you show the code that you put in app.js

19

.state(‘pageProductDetails’, {
url: ‘/page24 :item’,
params: {
name: “”
},
templateUrl: ‘templates/pageProductDetails.html’,
controller: ‘pageProductDetailsCtrl’
})

20

Rahul, actually i feels not comfortable already, thank you very much for the time you try help in here…