json data is not showing up

Question

I have a json file that I am trying to access using the following jquery function.

$.ajax({
    type: 'GET',
    url: '/data/coffee.json',
    dataType:'json',
    success: function(data) {
        let widget = show(data);
        $("#Meals").html(widget);
    }
});

function show(data) {
    let statusHtml = '<ul>';
    $.each(data.prices, function(i, meal){
        statusHtml += '<li> name: '+ meal.item + '</li>';
        statusHtml += '<li> price: '+ meal.price + '</li>';
    });
    statusHtml += '</ul>';
    return statusHtml;
}

The data I am trying to access is as follows:

[
  {
    "shopName": "The Coffee Connection",
    "address": "123 Lakeside Way",
    "phone": "16503600708",
    "prices": [
  {
   "item": "Cafe Latte",
   "price": 4.75
  },
  {
   "item": "Flat White",
   "price": 4.75
  },
  {
   "item": "Cappucino",
   "price": 3.85
  },
  {
   "item": "Single Espresso",
   "price": 2.05
  },
  {
   "item": "Double Espresso",
   "price": 3.75
  },
  {
   "item": "Americano",
   "price": 3.75
  }
  ]
 }
]

I have tried to console.log('success', data); and this returns the prices array in the console. But for some reason it is not showing up when I run this code. Any help would be appreciated.

Is syntax error in the code by accident or in Your original code it is too? I mean `)};` after `$.ajax({` — instead, Dec 19 '17 at 22:01
That is by accident. I must not have copied it across properly. I am not getting any errors. It's just not able to access the prices object. — AltBrian, Dec 19 '17 at 22:06

score 2 · Accepted Answer · answered Dec 19 '17 at 22:12

data.prices isn't valid. data is an array, so you need data[0].prices, and etc. loop through data first, and that variable would have a prices property. or just use

function show(data) {
    let statusHtml = '<ul>';
    $.each(data[0].prices, function(i, meal){
        statusHtml += '<li> name: '+ meal.item + '</li>';
        statusHtml += '<li> price: '+ meal.price + '</li>';
    });
    statusHtml += '</ul>';
    return statusHtml;
}

agustin37 · Answer 2 · 2017-12-20T18:25:42.040

2

Data is an Array, this should work:

$.each(data[0].prices, function(i, meal){
    statusHtml += '<li> name: '+ meal.item + '</li>';
    statusHtml += '<li> price: '+ meal.price + '</li>';
});

edited Dec 20 '17 at 18:25

answered Dec 19 '17 at 22:15

agustin37

121
6

json data is not showing up

2 Answers2