如何将json数据动态链接到chart.js

Question

I am trying to create a chart using json data. Currently I have the data within my script, but I would like to link it to a separate .json file within the project folder.

This is what I have currently:

    var jsonfile = {
        "jsonarray": [{
            "name": "Joe",
            "age": 12
        }, {
            "name": "Tom",
            "age": 14
        }]
    };

    var labels = jsonfile.jsonarray.map(function(e) {
        return e.name;
    });

    var data = jsonfile.jsonarray.map(function(e) {
        return e.age;
    });

    var ctx = document.getElementById("chart");
    var chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Graph Line',
                data: data,
                backgroundColor: 'rgba(0, 119, 204, 0.3)'
            }]
        }
    });

Ideally, I would like the json data to be in a separate file so that it can be dynamically saved. Thanks :)

Answer 1

You can use the fs module to read and write to a file

var fs = require('fs');
var jsonfile = fs.readFileSync('the/path');
//if you want to write to the file I gave you a link that shows you the way

For more information about the fs module you can check File System | Node.js v12.6.0 Documentation .

You may need to pass by JSON.stringify and JSON.parse to save your object as a string in the file and to parse the string back to an object while reading the file.

Another manner that you may consider is lightweight javascript databases such as IndexedDB which is an embedded database in the browser side, or other databases such as neDB if you want to persist data especially with an electron app.

Answer 2

Have many way to use with your wish

var data = {"a" : "b", "c" : "d"};

then

<script src="data.js" ></script>

or

var json = require('./data.json');

or

$.getJSON("data.json", function(json) {
    console.log(json);
});

Good luck!