Extracting data.

Question

I am trying to extract some data from json file. Looking to apply what I have learnt from a separate project. Below is the data in a file called hipstercoffee.json file which is in a data folder.

[
  {
    "shopName": "The Coffee Connection",
    "address": "123 Lakeside Way",
    "phone": "16503600708",
    "prices": [
      {
        "Cafe Latte": 4.75,
        "Flat White": 4.75,
        "Cappucino": 3.85,
        "Single Espresso": 2.05,
        "Double Espresso": 3.75,
        "Americano": 3.75,
        "Cortado": 4.55,
        "Tea": 3.65,
        "Choc Mudcake": 6.40,
        "Choc Mousse": 8.20,
        "Affogato": 14.80,
        "Tiramisu": 11.40,
        "Blueberry Muffin": 4.05,
        "Chocolate Chip Muffin": 4.05,
        "Muffin Of The Day": 4.55
      }
    ]
  }
]

My html is the following.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
    <title>Hipster Coffee Till</title>
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    <div class="wrapper">
    <header>
      <h1>The MadaDeliTill</h1>
      <p>Owned by Brian Patterson</p>
    </header>
    </div>

    <div id="Meals">

    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    <script src="js/app.js"></script>
  </body>
</html>

Below is my jquery data.

$(document).ready(function (){
  let url = "data/hipstercoffee.json";
  $.getJSON(url, function(response){
    var statusHTML = '<ul>';
    $.each(response, function(index, meal){
      statusHTML += meal.prices + '</li>';
    });
    statusHTML += '</ul>';
    $('#Meals').html(statusHTML);
  })//end getJSON


});// end ready

I am running this through Mamp. The problem I am having is the json is not a keyvalue pair and when I run it it says

[object Object]

Does this function work this kind of formatted json file?

Welcome to the Treehouse Community

Looking to learn something new?

Brian Patterson

Brian Patterson

Extracting data.