Question

所以，我使用AJAX获取JSON文件。我现在只是想学习并了解它是如何工作的，但我计划将来使用它。到目前为止，我实际上能够获取该文件并在JavaScript中解析它。我不确定的是如何获取我创建的示例的菜单项的名称。此外，我已使用JSONLint.com检查我的JSON文件，因此我认为它与此无关。

的 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();

供审核的代码段

＆＃13;

"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();

＆＃13;

我知道这与specialMenu.day.name有关，但我不明白为什么它不起作用。在设计时，我已经参考了这个W3Schools教程以获得一些帮助。 Click here.

Answer 1

将specialMenu.day.name替换为specialMenu[day].name：

＆＃13;

"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();

＆＃13;

在您的代码中，您正在使用点表示法查找名为＆＃34; day＆＃34;的属性。要使用动态键（变量），请使用括号表示法。

Answer 2

而不是：

specialMenu.day.name;

做的：

specialMenu[day].name;

..因为day是动态的（变量），而不是文字。

Answer 3

如上所述 trincot 使用<span class="title">${ product.title }</span>应该有效。
如果可能的话，你应该避免使用全局变量。

＆＃13;

specialMenu[day].name

＆＃13;

解析JSON无法获取菜单项的名称

3 个答案: