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

【问题标题】：How to use a JavaScript to load and parse a static JSON file in the server如何使用 JavaScript 在服务器中加载和解析静态 JSON 文件
【发布时间】：2013-04-29 21:15:43
【问题描述】：

我刚刚开始使用 javascript 和 json。

在处理 javascript 函数中的事件时，我需要从 json 文件中读取数据（getInformation 函数）。所以我需要它是同步的。我不知道我是否在代码中遗漏了一些东西，或者我是否必须创建一个请求并处理回调，或者我是否需要导入额外的 javascript 来使用 json。因为我不知道如何让它工作。它不起作用，因为最后数组是空的。感谢您提供任何帮助。

json文件：

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

选项 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; 
}

选项 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; }

我看到了以下线程并尝试了其中的内容，但对我不起作用。我想知道我的代码哪里出了问题，或者是否需要任何特殊配置。

线程：Is there a version of $getJSON that doesn't use a call back?

【问题讨论】：

问题是什么？什么不工作？
当您说您正在尝试解析本地文件时，您是指在客户端还是服务器上？如果它在服务器上，则需要使用文件的 URL 而不是路径。
JSON 是动态生成的，还是来自.json 文件？因为 JSON 只是 JavaScript，所以它也可以像脚本一样被加载，并存储在本地内存中进行交互。只是一个想法。
问题是哪里出错了，因为我打算包含json文件数据的数组在函数末尾是空的。我的意思是解析或访问 json 文件的元素。它不是动态的，是固定的信息。服务器中的本地json文件是的，我应该如何指定url？很好，如何加载脚本来动态存储，不会导致效率问题？
我真的不明白为什么请求需要同步。服务器通信始终应该是异步的。

标签： javascript ajax json

【解决方案1】：

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

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

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

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

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

【讨论】：

我正在使用 - //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js - jquery-ui-1.8.17.custom.min.js更改为 1.9.1/禁用其余功能。这可能是数组为空的原因吗？谢谢。
不太可能。可能是因为您的 JSON 对象没有“项目”属性，所以您得到了一个空数组。看起来您想要“用户”属性。

【解决方案2】：

要加载 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);

【讨论】：

谢谢。我现在收到这个错误。未捕获的类型错误：无法读取未定义的属性“0”。顺便问一下，有没有办法动态设置url？
它不起作用，j 数组为空。我需要配置一些额外的库吗？
是的，您可以动态设置 URL，您只需像上面的“选项 2”一样将其设为 var。你用的是什么网址？如果您在浏览器中输入它，应该会显示 JSON。
当我在工作站中测试并使用 Netbeans 时，我写的 URL 是 localhost:8383/Project/data/users.json
当您将 JSON 文件放入 Firefox 或您使用的任何浏览器时，该 URL 是否会加载它？