Cannot use 'in' operator to search for 'length'

Question

My Website receives the following string from my WCF Service:

[
    {
        "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"
    }
]

But for some reason I can't use $.each but I swear that I've called that on a similar structure before. It just gives me the following error:

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)
> 

From what I understand I can't use $.each on a string but I thought I made it into an Object. My JavaScript looks like this:

$.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);
});

The C# code that is run for the example that doesnt't work:

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);
    }

Solution

You have 3 $.each in your code.

The first one takes the JSON instance named object and populates the array parsedData just fine.

The problem is in your rest of the iterators, you are passing data(the string of JSON) to them. You should rather pass parsedData instance to them.

$.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;
});