遍历返回的JSON以创建我的图表

Question

我正在尝试动态创建CanvasJs图表所需的数据系列，到目前为止还没有高兴。 不知何故，我的代码无法正常工作。 我收到以下错误：

SyntaxError: missing : after property id for(var i=0; i<dataPoints.length; i++){

这是我的JSON数据

[
    {
        "t": "t3",
        "y": 6.8,
        "x": "2004-07-05"
    },
    {
        "t": "t4",
        "y": 29,
        "x": "2004-07-05"
    },
    {
        "t": "tsh",
        "y": 0.01,
        "x": "2004-07-05"
    },
    {
        "t": "thyroglobulin level",
        "y": 0.5,
        "x": "2004-07-05"
    },
    {
        "t": "t3",
        "y": 5.2,
        "x": "2005-06-15"
    },
    {
        "t": "t4",
        "y": 30,
        "x": "2005-06-15"
    },
    {
        "t": "tsh",
        "y": 0.02,
        "x": "2005-06-15"
    },
    {
        "t": "thyroglobulin level",
        "y": 0.5,
        "x": "2005-06-15"
    }
]

这是我的代码，用于检索JSON和创建我的数据系列

$(document).ready(function(){ 

    $("#find").click(function(e){

        e.preventDefault();

            $.ajax({
                // the URL for the request
                url: "bloodTest.php",
                // the data to send (will be converted to a query string)
                data: {pnhsno: "1001001002"},
                // whether this is a POST or GET request
                type: "GET",
                // the type of data we expect back
                dataType : "json",
                // code to run if the request succeeds;
                // the response is passed to the function
                success: function(json){

                if(json.length !=0){

                    var dataPoints = json.map(function (p) {
                        p.x = new Date(p.x);

                        return p;
                    });


                    $("#chart").CanvasJSChart({ //Pass chart options
                         title:{text:"Blood Test Results"},
                         axisX:{valueFormatString:"DD-MM-YYYY",labelAngle:-45},

                        data: [{
                          type: "line", //change it to column, spline, line, pie, etc

                            for(var i=0; i<dataPoints.length; i++){
                                if(dataPoints[i].t =="t3"){

                                    dataPoints:[
                                    {X:dataPoints.x, y:dataPoints.y}]
                                }
                            }
                        ]

                    });
                }

            }

        });

    });
});

Answer 1

在代码中发生语法错误的位置，您正在尝试创建一个内部带有for循环的对象文字。 编译器只是在浪费时间，因为它无法解释您的程序。 它需要一个对象属性标识符，而不是for循环。

具体来说，这是非法的部分：

data: [{
   type: "line",
   for(...)              <----- Javascript doesn't allow a 'for' loop here...

Answer 2

我想在图表数据表达式中内联生成数据，则需要使用lambda函数，例如；

...
data: [{
   type: "line", //change it to column, spline, line, pie, etc
   dataPoints: (function(){
               var arr = [];
               for(var i=0; i<dataPoints.length; i++){
                   if(dataPoints[i].t =="t3"){
                       arr.push( [ X:dataPoints.x, y:dataPoints.y ] );
                   }
               }
               return arr;
           })()
}]