value undefined when push use angular 2 ts

Question

i can get 'sm' in console.log result before push it, but got undefined when try to push.

chooseMenu(menu:Menuitems){
const sm = {name:menu.name,quantity:1,price:menu.product[('price')]}
console.log("item add",sm);
this.choosenMenu.push(sm); 
}

'price' become undefined, please guide so i can push 'sm'.

here is data response menu:MenuItems

 {
  "data": {
    "items": [
      {
        "id": 15,
        "name": "Canadian Wrap",
        "product": {
          "price": 6.99
        }
      },
      {
        "id": 12,
        "name": "Chicken Caesar Wrap",
        "product": {
          "price": 5.75
        }
      },

and result console log for 'sm'

name:"Caramel Sundae"
 price:2.99
 quantity:1

i have no access to do

menu.product.price

or

menu.product[0].price

how to make sure "price" not become undefined so i can push it, thank you

Possible duplicate of [Can't access object property, even though it exists. Returns undefined](http://stackoverflow.com/questions/17546953/cant-access-object-property-even-though-it-exists-returns-undefined) — John, Jan 07 '17 at 01:37

score 0 · Answer 1 · edited May 23 '17 at 12:02

0

Instead of menu.product[('price')], try menu.product.price or menu.product["price"].

if your price is undefined to begin with, it will be undefined in your object as well. Maybe the price will be defined in the object later in the program, thus the console.log() is displaying the price (similar behaviour as the possible duplicate).

EDIT: after some more information, it seems like you are receiving a string instead of an object. You have to make sure that the item is an object before accessing variables. You should use a JSON.parse(yourString) to convert it to an object.

chooseMenu(menu:Menuitems){
 if(typeof menu == "string") menu = JSON.parse(menu); // preferably do this when initializing menu.
 const sm = {name:menu.name,quantity:1,price:menu.product.price}
 console.log("item add",sm);
 this.choosenMenu.push(sm); 
}

Also, I would change the object type of Menuitems to Menu for readability. It is not clear wether or not the menu-object is a list or not. If it is a list, I would change the type to Array<Menu>, and then change the method accordingly.

edited May 23 '17 at 12:02

Community

1
1

answered Jan 07 '17 at 04:57

John

10,165
5
55
71

i can`t type menu.product.price or menu.product[0].price is not accessable – freddi andrew Jan 07 '17 at 04:59
What do you mean by having no access? You get an error in your IDE, saying that it is not accessable? – John Jan 07 '17 at 05:01
if i use menu.product.price the error: "property 'price' does not exist on type string ", if using menu.product["price"] the errror: "can not read property 'price' of undefined ", i also try JSON parse and JSON stringfy just like link you provide, the result still same – freddi andrew Jan 07 '17 at 05:29
If it is a string, you should do a `JSON.parse()` instead of `JSON.stringify()`, and then try to access the properties. – John Jan 07 '17 at 05:37

AT82 · Answer 2 · 2017-01-07T09:12:37.577

Looking at the comments and your error msg, i.e:

if i use menu.product.price the error: "property 'price' does not exist on type string ", if using menu.product["price"] the errror: "can not read property 'price' of undefined "

It looks indeed as at you are dealing with a string. So John is on the right track here with JSON.parse. But if you are dealing with a string, you can't actually parse it directly before stringifying it, so just do:

chooseMenu(menu:Menuitems){
 if(typeof menu == "string") {
   menu = JSON.stringify(menu) // this first, then you can parse it!
   menu = JSON.parse(menu) // then parse it...
 }
 const sm = {name:menu.name,quantity:1,price:menu.product.price}
 console.log("item add",sm);
 this.choosenMenu.push(sm); 
}

freddi andrew · Accepted Answer · 2017-01-07T12:33:34.740

thank you for Guide @AJT_82 and John help to resolve it, event i still can`t get clear understanding about this two ways binding angular 2, here resolve code i did:

chooseMenu(menu:Menuitems){
 if(typeof menu.product == "string") {
   menu.product = JSON.stringify(menu.product) // this first, then you can parse it!
   menu.product = JSON.parse(menu.product) // then parse it...
 }
 const sm = {name:menu.name,quantity:1,price:menu.product[('price')]}
 console.log("item add",sm);
 this.choosenMenu.push(sm); 
}

for me only menu.product need to stringify and parse and

price:menu.product[('price')]

still need i think that angular 2 ways

value undefined when push use angular 2 ts

3 Answers3