将 JSON 代码传输到外部文件的问题

Question

我对一些 JSON 代码有疑问。我在这里尝试随机附加一个 <p> 一些位于外部 JSON 文件中的字符串。我成功地使它在 codepen 上工作：http://codepen.io/ChucKN0risK/pen/LcFop

问题是我没有成功让我的代码在外部 JSON 文件上运行。当我刚开始学习 JSON 时，我什至不确定我是否需要一个表格或只需要 3 个具有各自价值的标题。

经过搜索，我发现要使其正常工作，我必须将代码放入 Jquery 中的每个事件中。

$.each(data, function(i, item) {
    alert(data[i].PageName);
});​

但是，无论我把代码放在哪里，它似乎都没有被计算在内，因为我的 console.log 测试不起作用。

这是我的 javascript 代码：

// Sentences

var p = $('#sentences-wrapper');

$.getJSON('src/js/data.json', function(data) {
    var random = data.sentences[Math.floor(Math.random() * data.sentences.length)];
    p.append("<span>" + random.title + "</span>");
});

这是我的 JSON 代码：

{
    "sentences": [{
        "title": "la big data"
    }, {
        "title": "développer des applications ergonomiques, simples et sur mesure"
    }, {
        "title": "chorégraphier des services et orchestrer de la donnée"
    }]
};

Answer 1

var p = $('#sentences-wrapper');

$.getJSON('src/js/data.json', function(data) {
    var random = data.sentences[Math.floor(Math.random() * data.sentences.length)];
    p.append("<span>" + random.title + "</span>");
});

getJSON 回调中的 data 参数应该是您的 JSON 文件的内容，已经解析为 JS 对象。在这种情况下，data.sentences 应该与您的 codepen 示例中的 jsonContent.sentences 相同。

Answer 2

在您的代码笔中，json 位于“jsonContent”中，其中包含带有标题的“句子”。

在您的 getJSON 语句中，data.json 文件的内容被分配给 var 'data'

所以你的标题存在于 data.sentences.title 中，正确的代码应该是：

$.each(data, function(index, value){
    var random = data.sentences[Math.floor(Math.random() * data.sentences.length)];
    console.log(random.title); // <= should work now
    p.append("<span>" + random.title + "</span>");
});

我不确定你为什么添加 $.each 函数。您的原始 codepen 示例从 json 中打印 1 个随机句子。 使用 $.each 语句，您可以为 json 中的每个元素（每个句子）附加一个随机句子。这应该会导致双打和其他一些无法打印的结果。 （编辑：这是不正确的，因为您的 json 仅包含一个 itmes 列表（句子）。当然您没有使用值或索引。在这种情况下：data.sentences, value, data[index] 将全部是相同的标题列表。）

如果要以随机顺序打印所有句子，则必须重新考虑代码。

Answer 3

查看控制台后，我发现我的 JSON 文件格式不正确。我不得不删除“;”在我的代码末尾。 http://jsonformatter.curiousconcept.com/。不管怎样，谢谢你们的帮助:)