Question

我正在尝试使用托管网络服务器上的文件中的JSON值，并且相信我正在正确地解析这些值并在我的Chartjs数组中使用它们，但由于某种原因，我收到了错误消息，我可以不太好调试。

错误1：Uncaught SyntaxError: Unexpected token h

代码参考：var gaValues = JSON.parse(url);

错误2：Uncaught SyntaxError: Unexpected token :

代码参考：labels: [ga:dayOfWeekName],

JSON：

{"kind": "analytics#gaData", "rows": [["Friday", "2"], ["Monday", "3"], ["Saturday", "0"], ["Sunday", "1"], ["Thursday", "4"], ["Tuesday", "4"], ["Wednesday", "4"]], "containsSampledData": false, "profileInfo": {"webPropertyId": "UA-22222-1", "internalWebPropertyId": "222222", "tableId": "ga:22222", "profileId": "2222", "profileName": "All Web Site Data", "accountId": "222222"}, "itemsPerPage": 50, "id": "https://www.googleapis.com/analytics/v3/data/ga?ids=ga:222222&dimensions=ga:dayOfWeekName&metrics=ga:sessions&start-date=7daysAgo&end-date=yesterday&max-results=50", "totalResults": 7, "query": {"max-results": 50, "dimensions": "ga:dayOfWeekName", "start-date": "7daysAgo", "start-index": 1, "ids": "ga:22222", "metrics": ["ga:sessions"], "end-date": "yesterday"}, "totalsForAllResults": {"ga:sessions": "18"}, "columnHeaders": [{"dataType": "STRING", "columnType": "DIMENSION", "name": "ga:dayOfWeekName"}, {"dataType": "INTEGER", "columnType": "METRIC", "name": "ga:sessions"}], "selfLink": "https://www.googleapis.com/analytics/v3/data/ga?ids=ga:22222&dimensions=ga:dayOfWeekName&metrics=ga:sessions&start-date=7daysAgo&end-date=yesterday&max-results=50"}

图表-options.js：

    var url = 'https://test.appspot.com/query?id=ahJzfmNvbm5vcnBoaWxsaXBzMjtetssesestestststRyFQsSCEFwaVF1ZXJ5GICAgICAgIAKDA';

    var gaValues = JSON.parse(url);

    var barChartdata = {
        labels: [ga:dayOfWeekName],
        datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.5)",
                strokeColor: "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: [gaValues.ga:sessions]
            }
        ]
    };


    var options = {

        //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
        scaleBeginAtZero : true,

        //Boolean - Whether grid lines are shown across the chart
        scaleShowGridLines : true,

        //String - Colour of the grid lines
        scaleGridLineColor : "rgba(0,0,0,.05)",

        //Number - Width of the grid lines
        scaleGridLineWidth : 1,

        //Boolean - If there is a stroke on each bar
        barShowStroke : true,

        //Number - Pixel width of the bar stroke
        barStrokeWidth : 2,

        //Number - Spacing between each of the X value sets
        barValueSpacing : 5,

        //Number - Spacing between data sets within X values
        barDatasetSpacing : 1,

        //Boolean - Set if responsive or not
        responsive : true

    }

window.onload = function(){

    // Get the context of the canvas element
    var ctx = document.getElementById("sessions-graph").getContext("2d");
    var sessionsGraph = new Chart(ctx).Bar(barChartdata, options); //Create a chart with "data" array

};

的index.html：

<!doctype html>
<html>

    <head>
        <title>Google Super Proxy Test</title>

        <script src="chart-options.js"></script>
         <script src="Chart.min.js"></script>
         <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>

<body>

    <div style="width: 50%">
        <canvas id="sessions-graph" height="450" width="600"></canvas>
    </div>


</body>

</html>

Answer 1

JSON.parse需要一个json字符串，而不是您需要自己加载数据的URL，即使用XMLHTTPRequest。尽管gaValues未定义，但您还需要使用以下表示法访问包含特殊字符的对象键：

gaValues["ga:sessions"]

Answer 2

您正试图在代码第var gaValues = JSON.parse(url);行解析网址 JSON.parse（）方法将字符串解析为JSON。您需要将响应作为参数传递而不是URL。

将webserver JSON值解析为data属性

2 个答案: