Question

我正在尝试更新当前使用内部对象数组的程序

var questions = [
    {
     question: "What is 2*5?",
     choices: [2, 5, 10, 15, 20],
     correctAnswer: 2
    }
];

让它使用具有对象数组的外部JSON文件

{ 
   "questions" :[
       {
           "questionNum":1,
           "question": "Which list contains words that are NOT names of shoe types:"
           "choices":[ "A. Oxford, jelly, boat, clogs, stiletto, mary jane",
                       "B. Loafer, gladiator, wedge, mule, platform",
                       "C. Pump, moccasin, wingtip, sneaker, derby, monk",
                       "D. Chalupa, dogler, hamster, croonley, frankfurt",
                       " "
                     ],
                      "correctAnswer" : "D. Chalupa, dogler, hamster, croonley, frankfurt"
                 }
            ]
       }

目前，程序将内部数组中的值传递给div对象和无线电列表：

  function createQuestionElement(index) {
        var qElement = $('<div></div>', {
            id: 'question'
        });

        var header = $('<h2>Question ' + (index + 1) + ':</h2>');
        qElement.append(header);

        var question = $('<p>').append(questions[index].question);
        qElement.append(question);

        var radioButtons = createRadios(index);
        qElement.append(radioButtons);

        return qElement;
    }

  // Creates a list of the answer choices as radio inputs
    function createRadios(index) {
        var radioList = $('<ul>');
        var item;
        var input = '';
        for (var i = 0; i < questions[index].choices.length; i++) {
      item = $('<li>');
      input = '<input type="radio" name="answer" value=' + i + ' />';
      input += questions[index].choices[i];
      item.append(input);
      radioList.append(item);
    }
    return radioList;
  }

从JSON文件获取数据的最佳方法是什么？

Answer 1

目前还不清楚你在问什么。您在寻找如何下载JSON文件吗？或者如何在下载后在JavaScript中处理它？或者如何编写与JSON数据而不是原始数据对象一起使用的代码？或者以上所有？

我会发表评论，但我想提一下其他内容，因为它涉及代码格式化，唯一的方法就是回答 - 尽管这不会回答你的问题。： - ）

原始数据对象和JSON数据的缩进和格式化都是在原地。这使得很难遵循数据的实际结构。如果使用一致的格式，则更容易阅读。事实上，你的questions对象中有一个额外的}因此它甚至不会编译 - 但是不一致的格式会掩盖这一点。

这里有一件事可以帮助你使用缩进来显示嵌套。不要尝试按照JSON数据中“choices”数组的布局方式对列进行排序。只需使用缩进即可。

当然，JSON解析器不关心格式化;它忽略了空白。但对于阅读代码和数据的人来说，这将使他们更容易。

对于原始数据，请尝试：

var questions = [
    {
        question: "What is 2*5?",
        choices: [ 2, 5, 10, 15, 20 ],
        correctAnswer: 2
    }
];

对于JSON数据：

{
    "questions": [
        {
            "questionNum": 1,
            "question": "Which list contains words that are NOT names of shoe types:"
            "choices": [
                "A. Oxford, jelly, boat, clogs, stiletto, mary jane",
                "B. Loafer, gladiator, wedge, mule, platform",
                "C. Pump, moccasin, wingtip, sneaker, derby, monk",
                "D. Chalupa, dogler, hamster, croonley, frankfurt",
                " "
            ],
            "correctAnswer": "D. Chalupa, dogler, hamster, croonley, frankfurt"
        }
    ]
}

也就是说，您的JSON数据在格式上几乎与原始数据对象相同。我看到的唯一区别是：

还有一个questionNum属性，如果您不使用它，可以忽略它。
choices和correctAnswer是字符串，而不是数字。
JSON数据里面有一个questions数组，原始数据对象在最外层有这个数组。

因此，假设您可以处理数字与字符串的差异，并假设您已将JSON数据下载到名为json的对象中，您可能只需要这样做：

var questions = json.questions;

现在处理questions数据的所有代码应该大致相同。（或者您可以将questions更改为json.questions您使用它的每个地方。）

现在关于如何下载JSON数据的问题：让我们假设您在https://www.example.com/yourjson拥有JSON数据文件，或者您的服务器在该URL处生成JSON数据。由于您使用的是jQuery，因此可以使用以下命令下载此数据：

var url = 'https://www.example.com/yourjson';
$.getJSON( url, function( json ) {
    // Here the JSON data is in your 'json' variable.
    // jQuery has already converted it to a JavaScript object for you.
    // So in your code here you can use:
    var questions = json.questions;
    // And now here you can use 'questions' like in your original code.
});

请注意，json数据仅在里面回调（上面有几条评论），或者从这个回调中调用的任何函数（并将问题数据作为参数传递给它。）

作为具有更多选项的另一种选择，您可以使用jQuery的$.ajax()代替$.getJSON()。执行此操作时，您必须指定更多参数，但它使您能够执行处理服务器错误以及成功下载等操作。

从JSON onject数组中检索并传递值

1 个答案: