Uncaught Error: Every row given must be either null or an array

Question

I'm facing the issue while trying to iterate and add the dynamic data. Below is the exception faced:

Uncaught Error: Every row given must be either null or an array.

Demo:https://plnkr.co/edit/vvY6Bg3uzVDSMwDh3EI6?p=preview

js code:

var list = [
            {id:'January',min: 10, max:20, start:15,end:10},
            {id:'Feb',min: 11, max:4, start:15,end:4},
            {id:'March',min: 10, max:20, start:15,end:10},
            {id:'APril',min: 5, max:20, start:55,end:10}
        ];

       angular.forEach(list, function (value, key) {
     // data.addRows([{"v":value.min}, {"v":value.max},{"v":value.start},{"v":value.end}]);       
     data.addRows([value.min,value.max,value.start,value.end]);
       });

Any inputs on how to resolve the above exception?

Answer 1

You need to pass in an array of arrays to addRows so you can get rid of the forEach. You could use map to convert the array of objects to an array of arrays.

It also appears that you have 5 columns but are passing in only 4 values.

The fixed code would be something like this:

var list = [
    {id:'January',min: 10, max:20, start:15,end:10},
    {id:'Feb',min: 11, max:4, start:15,end:4},
    {id:'March',min: 10, max:20, start:15,end:10},
    {id:'April',min: 5, max:20, start:55,end:10}
];

data.addRows(list.map(function(value) {
  return [value.id,value.min,value.max,value.start,value.end];
}));

Or

data.addRows(list.map(value => [value.id,value.min,value.max,value.start,value.end]));

Demo: https://plnkr.co/edit/QGlz4fQ81vpmhvxyt4kB?p=preview

Answer 2

It looks like you have 5 columns and 4 values in each row?

var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Nescafe Instant');
data.addColumn('number', 'Folgers Instant');
data.addColumn('number', 'Nescafe Beans');
data.addColumn('number', 'Folgers Beans');

   var list = [
        {id:'January',min: 10, max:20, start:15,end:10},
        {id:'Feb',min: 11, max:4, start:15,end:4},
        {id:'March',min: 10, max:20, start:15,end:10},
        {id:'APril',min: 5, max:20, start:55,end:10}
    ];

   angular.forEach(list, function (value, key) {
        var weekData = {};
  // data.addRows([{"v":value.min}, {"v":value.max},{"v":value.start},{"v":value.end}]);       
 data.addRows([value.min,value.max,value.start,value.end]);

Do you need to add a Topping value to each row?

The format looks slightly different in this DataTable example but it looks like the same principle applies.

Edit:

It's expecting an array of arrays. You're giving it a single array. Here's a forked version that works:

   var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Nescafe Instant');
    data.addColumn('number', 'Folgers Instant');
    data.addColumn('number', 'Nescafe Beans');
    data.addColumn('number', 'Folgers Beans');

       var list = [
            {id:'January',min: 10, max:20, start:15,end:10},
            {id:'Feb',min: 11, max:4, start:15,end:4},
            {id:'March',min: 10, max:20, start:15,end:10},
            {id:'APril',min: 5, max:20, start:55,end:10}
        ];

        var allRows = [];

       angular.forEach(list, function (value, key) {
            var weekData = {};
            allRows.push([value.id,value.min,value.max,value.start,value.end]);
      // data.addRows([{"v":value.min}, {"v":value.max},{"v":value.start},{"v":value.end}]);       
       });
            data.addRows(allRows);