尝试在 JS 中加载 JSON 样式数据答案

【问题标题】：Trying to Load JSON style data in JS尝试在 JS 中加载 JSON 样式数据
【发布时间】：2018-08-09 16:34:36
【问题描述】：

我正在尝试学习 JS，但对 JAVA 的经验有限。我希望（从长远来看）开发一个网络应用程序来帮助我的学生完成物理入门作业。在创建此应用程序的第一步中，我将一些基本方程式（作为 TeX 格式的字符串，以便稍后显示为格式良好的方程式）和数据放在一个 .json 文件中，该文件与将调用我的 .js 的 html 文件位于同一文件夹中文件来执行一些功能。

我已经搜索了一些关于如何在 javascript 中上传/读取 json 文件的信息，但大多数文章似乎都在讨论使用 AJAX 或 jquery（我不熟悉这些，$.function() 调用让我感到困惑）。大多数其他人都适合加载本地文件，因为 js 是服务器端，而 json 数据是客户端。谁能指出我的应用程序有用代码的方向？我想将方程数据保存在一个单独的文件中以使其易于修改，并且我计划为应用程序提供类似的 json 格式数据，以导入一组可选的物理概念。

JSON 数据示例如下所示，存储在同一文件夹中名为“equations.json”的文件中

{
"equationGroup": [{
        "equationGroupName": "Kinematics",
        "equation": [{
                "equationName": "Final Velocity Squared",
                "equationTeX": "v_{f}^{2}=v_{i}^{2}+2a(x-x_{0})",
                "equationVariables": [{
                        "variableTeX": "v_{f}",
                        "variableDescription": "The final velocity"
                    },
                    {
                        "variableTeX": "v_{0}",
                        "variableDescription": "The starting velocity"
                    },
                    {
                        "variableTeX": "a",
                        "variableDescription": "Acceleration in the same plane as velocity\""
                    },
                    {
                        "variableTeX": "x",
                        "variableDescription": "The final displacement"
                    },
                    {
                        "variableTeX": "x_{0}",
                        "variableDescription": "The starting point (initial displacement)"
                    }
                ]
            },
            {
                "equationName": "displacement",
                "equationTeX": "x_{f}=x_{0}+v_{0}t+\\frac{1}{2}at^{2}",
                "equationVariables": [{
                        "variableTeX": "x_{f}",
                        "variableDescription": "The final displacement"
                    },
                    {
                        "variableTeX": "x_{0}",
                        "variableDescription": "The initial displacement (starting point)"
                    },
                    {
                        "variableTeX": "v_{0}",
                        "variableDescription": "The initial velocity"
                    },
                    {
                        "variableTeX": "t",
                        "variableDescription": "The time elapsed"
                    },
                    {
                        "variableTeX": "a",
                        "variableDescription": "acceleration"
                    }
                ]
            }
        ]
    }

这是我目前拥有的 HTML：

<!DOCTYPE html PUBLIC "testPage">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Testing javscript stuff</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML' async></script> <!-- call for TeX reader -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Call for JSON getter -->
  </head>
  <body>    
    \[v_{f}^{2}=v_{i}^{2}+2a(x-x_{0})\]
    <script src="SECAPS.js"></script>

  </body>
</html>

SECAPS.js 文件在这里

var equations ={};
  $.getJSON('equations.json', function(data) { 
    equations=data;
  }); 
document.write("The equation group name is:" + equations.equationGroup[0].equationGroupName);

【问题讨论】：

$.getJSON 是异步的，您的document.write 在服务器返回数据之前运行。 stackoverflow.com/questions/14220321/…
我了解您所链接的文章所说的内容以及您在返回任何内容之前对文档写作所说的内容。可悲的是，我认为到目前为止我对 JS 的能力不足以在没有更多帮助和解释的情况下解决这个问题。是否有一种不太优雅的同步方式来解析我可以使用的同一根文件夹中的 JSON，然后在我开发更多应用程序时返回此问题？
不，没有：同步 ajax 请求在几年前已被弃用，因为如果服务器没有响应，它们会导致无休止的挂起。以教学为目的？无需进入客户端与服务器、同步与异步，我只需将 JSON 数据作为对象文字包含在操作它的代码中。但是，如果不考虑这两个二分法，您将无法构建任何可以合理地称为“网络应用程序”的东西。
好的，我正在研究它。我现在看到的问题是离线的本地网页甚至不显示 document.write() 函数的字符串的第一部分。这会是异步问题的结果还是其他原因？另外，这不在网络服务器上是否重要？我只是直接从文件夹在浏览器上运行它。
你需要运行一个网络服务器，否则你会得到subtle bugs。至于您遇到的特定问题，是的，您仍然会遇到这个问题：即使您可以在浏览器中打开文件，浏览器也无法访问文件系统上的其他文件（想象一下广告商正在浏览您的硬盘）。

标签： javascript json

【解决方案1】：

您的 JSON 格式错误。在最后一行添加“]}”。在enter link description here检查您的 JSON

$.getJSON 是异步的。所以需要异步false。

    $.ajaxSetup({
        async: false
    });

    var equations = {};
    $.getJSON('test1.json', function(data) { 

        equations = data;
                                            console.log(data.equationGroup);
                                            console.log(equations);
                                            console.log(equations.equationGroup);

    });

    console.log(equations);

    document.write("The equation group name is:" + equations.equationGroup[0].equationGroupName);

【讨论】：

用火狐打开它。 Chrome 无法从文件位置打开 JSON。

【解决方案2】：

我想你正在寻找这个：

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');

或

var obj = JSON.parse('path/to/json/file.json');

在此之后，您可以访问数据。示例：alert(obj.name)

【讨论】：

我尝试了您描述的第二种方法。如果它与 html 文件位于同一文件夹中，那么它是否只是 /equations.json 内的单引号？
@Robert 这个“答案”是完全错误的，不要尝试。