Parsing JSON Can't Acquire Name of Menu Item

Question

So, I'm using AJAX to acquire a JSON file. I'm just trying to learn and understand how it works right now, but I'm planning on maybe using it in the future. So far, I'm actually able to acquire the file and parse it in JavaScript. What I'm unsure of is how to get the name of the menu item for the example I've created. Also, I've used JSONLint.com to check my JSON file, so I don't think it has something to do with that.

JSON

{
    "Sunday": {
        "name": "shrimp cocktail",
        "price": "8.99"
    },
    "Monday": {
        "name": "broasted chicken",
        "price": "5.40"
    },
    "Tuesday": {
        "name": "mexicano® tacos",
        "price": "2.99"
    },
    "Wednesday": {
        "name": "ruby's® champaign-cooked beef tacos",
        "price": "3.99"
    },
    "Thursday": {
        "name": "dc's green arrow super nachos",
        "price": "9.99"
    },
    "Friday": {
        "name": "jalapeno poppers",
        "price": "5.99"
    }
}

JAVASCRIPT

"use strict";

var xhttp, specialMenu, day;

function runWhenDone() {
    switch (new Date().getDay()) {
    case 0:
        day = "Sunday";
        break;
    case 1:
        day = "Monday";
        break;
    case 2:
        day = "Tuesday";
        break;
    case 3:
        day = "Wednesday";
        break;
    case 4:
        day = "Thursday";
        break;
    case 5:
        day = "Friday";
        break;
    case 6:
        day = "Saturday";
        break;
    }
    var c = document.createElement('p');
    c.innerHTML = "Special: " + specialMenu.day.name;
    document.body.appendChild(c);
}
if (window.XMLHttpRequest) {
    xhttp = new window.XMLHttpRequest();
} else {
    xhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
        specialMenu = JSON.parse(this.responseText);
        runWhenDone();
    }
};
xhttp.open('GET', 'specials-menu.json', true);
xhttp.send();

Code Snippet for Review

"use strict";

var specialMenu, day;

function runWhenDone() {
    switch (new Date().getDay()) {
    case 0:
        day = "Sunday";
        break;
    case 1:
        day = "Monday";
        break;
    case 2:
        day = "Tuesday";
        break;
    case 3:
        day = "Wednesday";
        break;
    case 4:
        day = "Thursday";
        break;
    case 5:
        day = "Friday";
        break;
    case 6:
        day = "Saturday";
        break;
    }
    var c = document.createElement('p');
    c.innerHTML = "Special: " + specialMenu.day.name;
    document.body.appendChild(c);
}
var specialMenu = JSON.parse('{"Sunday": {"name": "shrimp cocktail", "price": "8.99"}, "Monday": {"name": "broasted chicken", "price": "5.40"}, "Tuesday": {"name": "mexicano® tacos", "price": "2.99"}, "Wednesday": {"name": "ruby\'s® champaign-cooked beef tacos", "price": "3.99"}, "Thursday": { "name": "dc\'s green arrow super nachos", "price": "9.99"}, "Friday": {"name": "jalapeno poppers", "price": "5.99"}}');
runWhenDone();

I know it has something to do with specialMenu.day.name, yet I don't understand why it's not working. When designing, I've referenced this W3Schools tutorial for some help. Click here.

FWIW, it would be cleaner to pass the XHR response *to* `runWhenDone`, instead of using global/shared variables. — Felix Kling, Apr 19 '17 at 21:42

score 1 · Accepted Answer · answered Apr 19 '17 at 21:42

Replace specialMenu.day.name with specialMenu[day].name :

"use strict";

var specialMenu, day;

function runWhenDone() {
    day = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][new Date().getDay()];
    var c = document.createElement('p');
    c.innerHTML = "Special: " + specialMenu[day].name;
    document.body.appendChild(c);
}
var specialMenu = JSON.parse('{"Sunday": {"name": "shrimp cocktail", "price": "8.99"}, "Monday": {"name": "broasted chicken", "price": "5.40"}, "Tuesday": {"name": "mexicano® tacos", "price": "2.99"}, "Wednesday": {"name": "ruby\'s® champaign-cooked beef tacos", "price": "3.99"}, "Thursday": { "name": "dc\'s green arrow super nachos", "price": "9.99"}, "Friday": {"name": "jalapeno poppers", "price": "5.99"}}');
runWhenDone();

In your code, you were looking for a property named "day", using the dot notation. To use a dynamic key (variable), use the bracket notation.

trincot · Answer 2 · 2017-04-19T21:49:11.340

0

Instead of:

specialMenu.day.name;

do:

specialMenu[day].name;

.. since day is dynamic (a variable), not a literal.

edited Apr 19 '17 at 21:49

answered Apr 19 '17 at 21:42

trincot

317,000
35
244
286

`specialMenu[day]name;` does not work. – Apr 19 '17 at 21:48
Thanks for letting me know: Needs the dot of course :) – trincot Apr 19 '17 at 21:49
No problem. Sorry, already gave answer to someone else. Thought I'd give you at least a +1, though. – Apr 19 '17 at 21:50

MaxZoom · Answer 3 · 2017-04-19T22:02:29.677

As noted above by trincot use specialMenu[day].name which should work.
Also you should avoid global variables if possible.

"use strict";

function runWhenDone(menu) {
    var day = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'][new Date().getDay()];
    var c = document.createElement('p');
    c.innerHTML = "Special: " + menu[day].name;
    document.body.appendChild(c);
}

var specialMenu = {"Sunday": {"name": "shrimp cocktail", "price": "8.99"}, "Monday": {"name": "broasted chicken", "price": "5.40"}, "Tuesday": {"name": "mexicano® tacos", "price": "2.99"}, "Wednesday": {"name": "ruby\'s® champaign-cooked beef tacos", "price": "3.99"}, "Thursday": { "name": "dc\'s green arrow super nachos", "price": "9.99"}, "Friday": {"name": "jalapeno poppers", "price": "5.99"}};
runWhenDone(specialMenu);

Parsing JSON Can't Acquire Name of Menu Item

3 Answers3