Issue: Having trouble rendering the second level in the JSON file, as it gives an undefined error. Any assistance would be greatly appreciated.
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);
}
}
}