Setting Javascript values from values in mySQL database

Question

I've searched thoroughly for an answer and haven't been able to track anything down that clears this up for me.

I'm building a simple webapp that has a java/mySQL backend and html/js front end. In my front end, I'm using values from my database in tandem with the chart.js library to visualize data. I'm using the Jersey framework on the backend and have written code that will return a desired value when the appropriate url is passed - for example:

http://localhost:8080/rest/database/chart/get/labels

returns

["test","test2","test3","test4","test5"]

I need to pass my chart an array of names for the axis on the chart.

Right now, my chart axis are names with placeholders, which is dictated by the .js script:

function loadChartLabels() {
    var xhttp = new XMLHttpRequest();
    var returnArray = [];
    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            returnArray = xhttp.responseText;
        }
    };
    xhttp.open("GET", "http://localhost:8080/rest/database/chart/get/labels", true);
    xhttp.send();

    return ["Eating", "Drinking", "21Test", "21Test1", "21Test2", "21Test3", "21Test4"];
    //window.alert(returnArray.toString);
    //return returnArray;
}

and here is my chart script:

    var testArray = loadChartLabels();

 var radarData = {
                    labels: testArray,
                    datasets: [
                        {
                            label: "My First dataset",
                            fillColor: "rgba(140,70,120,0.5)",
                            strokeColor: "#ACC26D",
                            pointColor: "#fff",
                            pointStrokeColor: "#9DB86D",
                            data: [65, 59, 90, 81, 56, 55, 40]
                        },
                        {
                            label: "My Second dataset",
                            fillColor: "rgba(172,194,132,0.4)",
                            strokeColor: "#ACC26D",
                            pointColor: "#fff",
                            pointStrokeColor: "#9DB86D",
                            data: [28, 48, 40, 19, 96, 27, 100]
                        }
                    ]
                };

                var habits = document.getElementById("habits").getContext("2d");

                new Chart(habits).Radar(radarData);

I'm assuming some variant of AJAX will allow me to call and return the database values and set them as the chart axis values, but how exactly do I accomplish this?

Any help is much appreciated!

Answer 1

If you need to process the data from AJAX, you can change the way the server outputs it. I would recommend a JSON - easy to use within JS and on server too. However, If you need to work with data format as '["test","test2","test3","test4","test5"]', you can try using something like this

var myarray=eval('["test","test2","test3","test4","test5"]');

But remember! Eval might not be safe! See https://stackoverflow.com/a/86580/3129342