Cannot read property 'x' of undefined. second level in json file

Question

Problem : Can not render second level in the JSON file for some reason but first level works. Second level is giving me undefined error. Please help.

HTML:

<div>
  <li data-item="item1">1<p></p><span></span></li>
  <li data-item="item2">2<p></p><span></span></li>
  <li data-item="item3">3<p></p><span></span></li>
  <li data-item="item4">4<p></p><span></span></li>

</div>

JS/JSON

var data = [
    {
        "word": "hello",
        "favnumber": "0070",
        "item": "item1",
        "color": "red"
   },
   {
        "word": "hello world",
        "favnumber": "0233070",
        "item": "item2",
        "color": "blue",
       "Promo": {
            "Price": 3.99
        }
   },
   {
        "word": "hello mom",
        "favnumber": "0070",
        "item": "item3",
        "color": "pink",
       "Promo": {
            "Price": 4.99
        }
   },
   {
        "word": "hello dad",
        "favnumber": "0070",
        "item": "item4",
        "color": "silver",
        "Promo": {
            "Price": 8.99
        }
   }    
];

var items = document.querySelectorAll('[data-item]');

for (var e in items) {
    var element = items[e];
    var name = $(element).attr('data-item');

    for (var i in data) {
        var item = data[i];

        if (name == item.item) {
            var colorValue = item.color
            var promoPriceValue = item.Promo.Price //this doesn't work//
            $(element).find('p').text(colorValue)//this works//
            $(element).find('span').text(promoPriceValue)
        }
    }
}

Example: http://jsfiddle.net/icovermaface/24L02a1q/1/

Please provide an example of your problem/JSON/code in your question — Explosion Pills, Aug 04 '15 at 15:22
I have created a jsFiddle with the issue created. With the HTML, JSON and JS. http://jsfiddle.net/icovermaface/24L02a1q/1/ — icovermaface, Aug 04 '15 at 15:24
Please also include the JSON/JS in your question rather than just the jsfiddle. The jsfiddle can contain a more complete example, but your question can provide a pared-down example of the code and JSON. — Explosion Pills, Aug 04 '15 at 15:26
Hi @ExplosionPills, I have edited the post . I hope this is what you mean. Thanks — icovermaface, Aug 04 '15 at 15:30
Your first item does not have a "Promo" member. If you look at a debugger it will most likely tell you that `var promoPriceValue = item.Promo.Price` throws an error because `item.Promo` is undefined, try `item.Promo ? item.Promo.Price : 'no promo'`. And remember the debugger is your friend. — Prusse, Aug 04 '15 at 15:39
@Prusse it works! Quick question what does the '?' mean in between 'item.Promo' and 'item.Promo.Price' — icovermaface, Aug 04 '15 at 16:22
It is a ternary conditional operator. There is some nice documentation for it on [MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator). `v = a ? a : b;` is logically equivalent to `if (a) { v = a; } else { v = b; }`. — Prusse, Aug 05 '15 at 13:11

score 2 · Accepted Answer · edited May 23 '17 at 12:21

2

In addition to not all your objects in data having the exact same data-structure, I would change your for loops from the for ... in pattern to an iterated variable since you are iterating over an array and not enumerating over a javascript object. In other words:

for(var e=0; e < items.length; e++)

and

for(var i=0; i < data.length; i++)

Here is some more info on why not to use the for ... in pattern with arrays: Why is using "for...in" with array iteration a bad idea?

edited May 23 '17 at 12:21

Community

1
1

answered Aug 04 '15 at 15:41

Jason

31,834
7
59
78

1

Good link for explanation of `for...in` issues. +1 – Craicerjack Aug 04 '15 at 15:52
thanks @Jason..I have tried this method and it works perfect if all JSON has the same field. For example the first item in the array doesn't have 'Promo' and your method didn't work until I added 'Promo' in the first field. – icovermaface Aug 04 '15 at 16:01

Craicerjack · Answer 2 · 2015-08-04T15:46:55.943

The first item in your array doesnt have a Promo field. This is throwing the undefined error. Do a check to see if the field exists before trying to access it or create a default value

check

if(item.Promo) {
    var promoPriceValue = item.Promo.Price
}

default

var promoPriceValue = item.Promo ? item.Promo.Price : 10.99

Also you should change your loop structure, to a for (var i = 0; i < data.length; i++) as Jason mentioned. As structured they throw this error:

Uncaught TypeError: Cannot use 'in' operator to search for 'getAttribute' in 4

working fiddle - https://jsfiddle.net/24L02a1q/7/

Thanks, I will double check – icovermaface Aug 04 '15 at 16:02 — icovermaface, Aug 04 '15 at 16:02

Cannot read property 'x' of undefined. second level in json file

2 Answers2

check

default