Trying to Load JSON style data in JS

Question

I'm trying to learn JS and have limited experience with JAVA. I am looking to (in the very long term) develop a web app for helping my students with introductory physics homework. In the first steps towards creating this app, I've put some basic equations (as TeX formatted strings to later show as pleasantly formatted equations)and data in a .json file in the same folder as the html file that will call my .js file to execute some functions.

I have searched for a bit on how to upload/read json files in javascript but most articles seem to discuss using AJAX or jquery (I'm unfamiliar with these and the $.function() calls have me confused). Most others are geared towards loading a local file in the sense that the js is server side and the json data is client side. Can anyone point me in the direction of useful code for my application? I want to keep the equation data in a separate file to leave it easily modifiable and I plan on having similar json formatted data for the app to import an array of selectable physics concepts as well.

An example of the JSON data looks like this and is stored in a file in the same folder called '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"
                    }
                ]
            }
        ]
    }

Here is the HTML I have so far:

<!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>

And the SECAPS.js file is here

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

`$.getJSON` is asynchronous, your `document.write` runs before the server returns the data. https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Jared Smith, Aug 09 '18 at 16:53
I understand the jist of what what the article you linked is saying and what you said about the document writing before anything is returned. Sadly, I dont think my competence with JS thus far is enough to remedy the issue without significantly more help and explanation. Is there a less elegant, synchronous way to parse a JSON in the same root folder that I can use and then return to this issue when I have more of the app developed? — Robert, Aug 09 '18 at 17:29
No there isn't: synchronous ajax requests were deprecated years ago as they cause endless hangs if the server doesn't respond. For the purpose of teaching? without getting into client-vs-server, sync-vs-async, I'd just include the JSON data as an object literal in the code that manipulates it. But you're not going to be able to build anything that could reasonably be called a 'web app' without wrapping your brain around those two dichotomies. — Jared Smith, Aug 09 '18 at 17:38
Okay, I'm looking into it more then. The problem I'm seeing now is the offline, local webpage doesn't even display the first part of the string for the document.write() function. Would that be a result of the asynchronous issue or something else? Also, does it matter that this isn't on a webserver? I'm just running it on a browser directly from a file folder. — Robert, Aug 09 '18 at 18:44
You need to be running a webserver, otherwise you will get [subtle bugs](https://stackoverflow.com/questions/27680329/mouseout-and-mouseover-events-not-firing-properly-in-chrome-39). As for the particular issue your encountering, yes you'll still have that problem: even though you can open a file in a browser the browser cannot access other files on your filesystem (imagine an advertiser munging through your hard drive). — Jared Smith, Aug 09 '18 at 19:41
Note that it doesn't have to be a production ready, industrial strength webserver like nginx or apache, the built in one with python works well enough for simple stuff. — Jared Smith, Aug 09 '18 at 19:48

score 0 · Answer 1 · answered Oct 17 '18 at 17:13

Your JSON format is wrong. Add "]}" in last line. Check your JSON at enter link description here

$.getJSON is asynchronous. So need to asynchronous 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);

Open it Firefox. Chrome not able to open JSON from file location. — Sajadur Rahman, Oct 17 '18 at 17:15

Trying to Load JSON style data in JS

1 Answers1