如何通过解析JSON文件分配JavaScript变量？

Question

I have a database server that will be running a script to generate this given file daily:

{"data": [
{"variable":"var1","value": "123"},
{"variable":"var2","value": "456"},
{"variable":"var3","value": "789"}]}

I am trying to parse this file to set three javascript variables for a HTML canvas element.

So far, I'm thinking I'll parse the JSON file

var JSONfile = './file.json';
var getData = JSON.parse(JSONfile);

Then a for loop to assign the variables

for (i = 0; i < getData.length; i++) {
    var getData.variable=getData.Value;
}

And I'm hoping to get results of:

var var1 = 123;
var var2 = 456;
var var3 = 789;

But var getData.variable=getData.Value; breaks. What am I missing?

Answer 1

JSON.parse() expects a JSON string, when you are passing it a file.

The first thing you need to do is use AJAX to get the contents of the file into a variable. Either use a library like jQuery (see http://api.jquery.com/jquery.getjson/ ) or from scratch in JavaScript. But don't waste your time on the "from scratch" version unless you have to.

Use jQuery to get the contents of the file into an object, and pass the inner data (an array) to a function called doSomething():

    $(function () {
        $.getJSON("./file.json", function (data) {
        }).success(function (data) {
            myArr = data.data;
            doSomething(data.data);
        });
    });

Here, you iterate through the passed array, which contains elements that have a .variable and a .value property. This writes both properties of each element to the console, for your viewing pleasure:

    function doSomething(arr) {
        for (i = 0; i < arr.length; i++) {
            console.log(arr[i].variable + ': ' + arr[i].value);
        }
    }

You can also access the properties directly by the index as follows:

alert(jsonFromFile.data[2].variable);  // Will alert "var3"
alert(jsonFromFile.data[2].value);     // Will alert "789"