时间戳

首页 > 解决方案 > 尝试在 JS 中加载 JSON 样式数据

javascript - 尝试在 JS 中加载 JSON 样式数据

问题描述

我正在尝试学习 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);

标签： javascriptjson

解决方案

您的 JSON 格式错误。在最后一行添加“]}”。在此处输入链接描述检查您的 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);

推荐阅读