Adding new list to existing java script object

Question

I'm trying to populate the dataset for a barchart. I would like to add 'dataset' to existing barData1 object.

But I'm getting following error. What am I doing wrong here?

error: jquery-3.1.1.min.js:2 Uncaught TypeError: Cannot read property 'splice' of undefined

<script type="text/javascript">
var jsprojStatList = @Html.Raw(ViewBag.projStatList);

    $(document).ready(function () {
        var barData1 = {
            labels: ["No. Of Line Items", "Line Items Ordered", "( % )", "Line Items to be Ordered", "( % )", "PO Generated", "PO Approved", "PO Waiting for Approval"]
        };
        //var obj = JSON.parse(barData1);
        //var parse_obj = JSON.parse(barData1);
        var i = 0;
        for (var key in jsprojStatList) {
            if (jsprojStatList.hasOwnProperty(key)) {
                var val = jsprojStatList[key];
                barData1['datasets'].splice(i, 0, {
                    "label": val.BudgetTypeTitle, "backgroundColor": "rgba(220, 220, 220, 0.5)", "rgba(220, 220, 220, 0.5)": "#fff"
                    , "data": [val.NoOfBudgetItems, val.NoOfBudgetItemsOrdered, val.NoOfBudgetItemsOrderedPercentage, val.NoOfBudgetItemsToBeOrdered
                        , val.NoOfBudgetItemsToBeOrderedPercentage, val.POGenerated, val.POApproved, (val.POGenerated - val.POApproved)]
                });
                i++;
                };
        };
        //}

        var barOptions1 = {
            responsive: true
        };

        var ctx21 = document.getElementById("barChart1").getContext("2d");
        new Chart(ctx21, { type: 'bar', data: barData1, options: barOptions1 
    });
</script>

Jonathan Lonowski · Accepted Answer · 2018-02-24T22:05:35.527

You'll have to define barData1['datasets'] itself as an array before you can add values to it:

var barData1 = {
    datasets: [], // populated below
    labels: ["No. Of Line Items", "Line Items Ordered", "( % )", "Line Items to be Ordered", "( % )", "PO Generated", "PO Approved", "PO Waiting for Approval"]
};

.splice() won't/can't automatically create the array for you with the first use.

Side notes:

Since it doesn't appear you're using i for anything else, .push(value) can be used in place of .splice(i, 0, value). That'll let you discard var i = 0 and i++.
If jsprojStatList is an Array (guessing from List in its name), a for..in loop isn't usually appropriate with them.

Adding new list to existing java script object

1 Answers1