JQGrid not loading data from array variable - jqgrid

Question

I have a problem that is confounding me for a few days. Initially, I tested a hard-coded approach within my javascript function which loads local variable containing a simple array as follows:
var myGridData = [
{ ID: "55505", Item: "Mortgage foreclosure", Class: "36", Status: "Pending" },
{ ID: "55506", Item: "Food truck parks", Class: "43", Status: "Pending" }];
for (var i = 0; i <= myGridData.length; i++)
jQuery("#popGrid").jqGrid('addRowData', i + 1, myGridData[i]);
And the above hard-coded approach works. But when I assign the data dynamically to the my GridData variable (based on user selections from another grid, my grid populates with empty rows, one row for each character in the variable (i.e. 154 rows using the above - instead of the two expected). I've double checked the two strings and they are identical (including the correct qualifiers, brackets, etc. so I am at a loss. Any ideas?
Thanks in advance,
Neale
Thanks Oleg, I can look into filling grid during its creation…once I understand everything a bit better. I’m kind of stabbing in the dark. Below, I’ve included code I use to obtain the array data string from the “main” page – which is then passed to the dialog via a hidden field. I’ve followed that up with my JQGrid parameters and colModel:
var temp = document.getElementById('<%=txtArray.ClientID%>').value;
var myGridData = temp;
jQuery("#popGrid").jqGrid({
multiselect: true,
data: myGridData,
datatype: 'local',
colNames: [
'ID',
'Item',
'Class',
'Status',
],
colModel: [
{ name: 'ID', index:'ID', key: true, width:50 },
{ name: 'Item', index: 'Item', key: true, width:100 },
{ name: 'Class', index: 'Class', key: true, width: 150 },
{ name: 'Status', index: 'Status', key: true, width: 250 },
],
multiSort: true,
sortable: true,
loadonce : true,
rownum: 5,
width: 850,
height: 100,
scrollOffset: 1,
shrinkToFit: true,
sortname: 'ID',
viewrecords: true,
gridview: true,
sortorder: "desc",
pager: '#popPager'
});