无法使用“in”运算符搜索“length”

Question

我的网站从我的 WCF 服务收到以下字符串：

[
    {
        "Value": 5,
        "Color": "#44A9FF",
        "HighlightColor": "#5AD3D1",
        "Label": "N/A"
    },
    {
        "Value": 79,
        "Color": "#009900",
        "HighlightColor": "#5AD3D1",
        "Label": "On Track"
    },
    {
        "Value": 31,
        "Color": "#66FF33",
        "HighlightColor": "#5AD3D1",
        "Label": "Done"
    },
    {
        "Value": 4,
        "Color": "#F3F300",
        "HighlightColor": "#5AD3D1",
        "Label": "Issue"
    },
    {
        "Value": 7,
        "Color": "#FF0000",
        "HighlightColor": "#5AD3D1",
        "Label": "Behind"
    },
    {
        "Value": 9,
        "Color": "#979797",
        "HighlightColor": "#5AD3D1",
        "Label": "Abandoned"
    }
]

但由于某种原因，我不能使用$.each，但我发誓我以前曾在类似的结构上调用过它。它只是给了我以下错误：

Uncaught TypeError: Cannot use 'in' operator to search for 'length' in [{"Value":5,"Color":"#44A9FF","HighlightColor":"#5AD3D1","Label":"N/A"},{"Value":79,"Color":"#009900","HighlightColor":"#5AD3D1","Label":"On Track"},{"Value":31,"Color":"#66FF33","HighlightColor":"#5AD3D1","Label":"Done"},{"Value":4,"Color":"#F3F300","HighlightColor":"#5AD3D1","Label":"Issue"},{"Value":7,"Color":"#FF0000","HighlightColor":"#5AD3D1","Label":"Behind"},{"Value":9,"Color":"#979797","HighlightColor":"#5AD3D1","Label":"Abandoned"}] (10:24:26:561 | error, javascript)
    at s (public_html/js/jquery-2.1.4.min.js:2:4004)
    at n.extend.each (public_html/js/jquery-2.1.4.min.js:2:2737)
    at (anonymous function) (public_html/js/test/chart-test.js:42:11)
    at j (public_html/js/jquery-2.1.4.min.js:2:26925)
    at k.fireWith (public_html/js/jquery-2.1.4.min.js:2:27738)
    at x (public_html/js/jquery-2.1.4.min.js:4:11253)
    at (anonymous function) (public_html/js/jquery-2.1.4.min.js:4:14765)
> 

据我了解，我不能在字符串上使用$.each，但我认为我将它变成了一个对象。我的 JavaScript 看起来像这样：

$.getJSON("http://localhost:52535/PUendeligService.svc/GetStatusOverview", function (data) {
    var object = $.parseJSON(data);
    var parsedData = [];
    $.each(object, function () {
        var value = object["Value"];
        var color = object["Color"];
        var highLight = object["HighlightColor"];
        var label = object["Label"];
        parsedData.push(
                {
                    value: value,
                    color: color,
                    highlight: highLight,
                    label: label
                }
        );
    });
    var ctx = $('#myChart').get(0).getContext('2d');
    var myPieChart = new Chart(ctx).Pie(parsedData, options);
    var myPieChartLegend = $('#pie-chart-legend-tbody');
    var tBodyContent = '';
    var valueTotal = 0;
    $.each(data, function (index) {
        var value = data[index]["value"];
        valueTotal += value;
    });
    $.each(data, function (index) {
        var value = data[index]["value"];
        var color = data[index]["color"];
        var label = data[index]["label"];
        var element =
                '<tr>' +
                '<td>' +
                '<span class="fa fa-square" style="color:' + color + '"></span>\t' + label +
                '</td>' +
                '<td>' +
                value +
                '</td>' +
                '<td>' +
                ((value / valueTotal) * 100).toFixed(2) +
                '</td>' +
                '</tr>';
        tBodyContent += element;
    });
    tBodyContent +=
            '<tr>' +
            '<td>Total</td>' +
            '<td>' + valueTotal + '</td>' +
            '<td>' + 100 + '</td>' +
            '</tr>';
    myPieChartLegend.html(tBodyContent);
});

为不起作用的示例运行的 C# 代码：

public String GetStatusOverview()
    {
        StatusOverviewObject soo = new StatusOverviewObject();
        soo.Value = 5;
        soo.Color = "#44A9FF";
        soo.HighlightColor = "#5AD3D1";
        soo.Label = "N/A";
        StatusOverviewObject soo2 = new StatusOverviewObject();
        soo2.Value = 79;
        soo2.Color = "#009900";
        soo2.HighlightColor = "#5AD3D1";
        soo2.Label = "On Track";
        StatusOverviewObject soo3 = new StatusOverviewObject();
        soo3.Value = 31;
        soo3.Color = "#66FF33";
        soo3.HighlightColor = "#5AD3D1";
        soo3.Label = "Done";
        StatusOverviewObject soo4 = new StatusOverviewObject();
        soo4.Value = 4;
        soo4.Color = "#F3F300";
        soo4.HighlightColor = "#5AD3D1";
        soo4.Label = "Issue";
        StatusOverviewObject soo5 = new StatusOverviewObject();
        soo5.Value = 7;
        soo5.Color = "#FF0000";
        soo5.HighlightColor = "#5AD3D1";
        soo5.Label = "Behind";
        StatusOverviewObject soo6 = new StatusOverviewObject();
        soo6.Value = 9;
        soo6.Color = "#979797";
        soo6.HighlightColor = "#5AD3D1";
        soo6.Label = "Abandoned";

        List<StatusOverviewObject> list = new List<StatusOverviewObject>();
        list.Add(soo);
        list.Add(soo2);
        list.Add(soo3);
        list.Add(soo4);
        list.Add(soo5);
        list.Add(soo6);

        return JsonConvert.SerializeObject(list);
    }

Answer 1

您的代码中有 3 个$.each。

第一个采用名为 object 的 JSON 实例并填充数组 parsedData 就好了。

问题在于您的其余迭代器，您将 data(JSON 字符串) 传递给它们。您应该将parsedData 实例传递给他们。

$.each(parsedData, function (index) {       //"parsedData" instead of "data"
        var value = this[index]["value"];   //you can use "this" to access the object passed in argument
        valueTotal += value;
    });
$.each(parsedData, function (index) {      //"parsedData" instead of "data"
    var value = this[index]["value"];
    var color = this[index]["color"];
    var label = this[index]["label"];
    var element =
            '<tr>' +
            '<td>' +
            '<span class="fa fa-square" style="color:' + color + '"></span>\t' + label +
            '</td>' +
            '<td>' +
            value +
            '</td>' +
            '<td>' +
            ((value / valueTotal) * 100).toFixed(2) +
            '</td>' +
            '</tr>';
    tBodyContent += element;
});