如何使用JavaScript加载和解析服务器中的静态JSON文件

I'm just starting to use javascript and json.

我刚刚开始使用javascript和json。

I need to read data (getInformation function) from a json file when processing an event in a javascript function. So I need it to be synchronic. I don't know if I am missing something in the code, or if I have to create an Request and handle the callback, or if I need to import additional javascript to use json. Because I don't know how to make it work. It doesn't work because at the end the array is empty. Any help is aprreciated.

我需要在javascript函数中处理事件时从json文件中读取数据（getInformation函数）。所以我需要它是同步的。我不知道我是否遗漏了代码中的内容，或者我是否必须创建一个Request并处理回调，或者我是否需要导入其他javascript来使用json。因为我不知道如何让它发挥作用。它不起作用，因为最后数组是空的。任何帮助都是值得赞赏的。

The json file:

json文件：

{"Users": [
    {"Name": "Jane",
        "Points": 67,
        "age": 23},
    {
        "Name": "Sam",
        "Points": 65,
        "age": 21}
]}

Option 1 - Function called by another function which is processing an event:

选项1 - 处理事件的另一个函数调用的函数：

var getInformation = function() 
{
    var path = "./data/users.json";
    var informationArray= [];
    console.log("Loading ....");
    $.getJSON(path, function(data) 
    {
        $.each(data, function(key, val) 
        {
            informationArray.push(key + '-' + val);
        });
    }); 
    return informationArray; 
}

Option 2 - Function called by another function which is processing an event:

选项2 - 处理事件的另一个函数调用的函数：

var getInformation = function() { 
var path = "./data/users.json";
var informationArray= [];
$.ajax({
         url: path,
         async: false,
         dataType: 'json',
         success: function(response) {
         $.each(response.items,
         function(item) {
         informationArray.push(item);
         });
         informationArray.push("success");
         }
         }); 
   return informationArray; }

I have seen the following thread and tried what is there but doens't work for me. I would like to know where is the problem in my code or if require any special configuration.

我已经看到了以下线程，并尝试了什么，但不适合我。我想知道我的代码中的问题在哪里或者需要任何特殊配置。

Thread: Is there a version of $getJSON that doesn't use a call back?

线程：是否有一个不使用回调的$ getJSON版本？

2 个解决方案

#1

When JavaScript is running in a browser it needs to make an AJAX request to the server to access a JSON file. It is possible to write the AJAX request by hand but that is complex and difficult to make work in all browsers. Instead most people use a library like jQuery. You will need to include jQuery in your web page with something like:

当JavaScript在浏览器中运行时，它需要向服务器发出AJAX请求以访问JSON文件。可以手动编写AJAX请求，但这在所有浏览器中都很复杂且难以实现。相反，大多数人使用像jQuery这样的库。您需要在网页中包含jQuery，例如：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

Then in any script tag lower in the html page you should be able to do something like:

然后在html页面中较低的任何脚本标记中，您应该能够执行以下操作：

$.ajax({
  url: "data/users.json",
  dataType: "json",
  success: function(response) {
    $.each(response.Users, function(item) {
      informationArray.push(item);
    });
    informationArray.push("success");
  }
});

see http://api.jquery.com/jQuery.ajax/

见http://api.jquery.com/jQuery.ajax/

#2

To load a JSON file (and not require a callback) you'd use:

要加载JSON文件（并且不需要回调），您可以使用：

var url = 'http://yoursite.com/data/users.json';
var j = [];
$.ajax({
  type: 'GET',
  url: url,
  dataType: 'json',
  success: function(data) { j = data;},
  async: false
});

alert(j.Users[0].Name);

#1

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>