create array object with $.each doesn't work

Question

I'm trying to create local table with JQGrid, It's all working great until Im changing the array, here is the Working code:

HTML Code:

<div id=main style="width: 350px; height:200px;background-color:orange;">
<table id="grid"></table>
</div>

JS code

$(document).ready(
    function()
    {        
        jQuery("#grid").jqGrid({
         datatype: 'local',
         colNames:["User Name","Meet","Time"],
         height:"100%",
         autowidth: true,
         colModel :[
                    {name:"name",index:"name"},
                    {name:"to_meet",index:"to_meet"},
                    {name:"time",index:"time"}
                    ],
                    gridview: true,
                    viewrecords: true    });

    });

var mydata = [
              {name:"test",to_meet:"111",time:"0500"},
              {name:"test2",to_meet:"112",time:"0530"},
              {name:"test3",to_meet:"113",time:"0600"},
              {name:"test4",to_meet:"114",time:"0630"},
              {name:"test5",to_meet:"115",time:"0700"},
              {name:"test6",to_meet:"116",time:"0730"},
              {name:"test7",to_meet:"117",time:"0800"},
              {name:"test8",to_meet:"118",time:"0830"},
              {name:"test9",to_meet:"119",time:"0900"},
              {name:"test10",to_meet:"120",time:"0930"},
              {name:"test11",to_meet:"121",time:"1000"},
              {name:"test12",to_meet:"122",time:"1030"},
              {name:"test13",to_meet:"123",time:"1100"},
              {name:"test14",to_meet:"124",time:"1130"},
              {name:"test15",to_meet:"125",time:"1200"},
              {name:"test16",to_meet:"126",time:"1230"}
    ];
    console.log(mydata.length)
    for(var i=0; i<mydata.length;i++)
{

  alert(mydata);
        jQuery("#grid").jqGrid('addRowData',i+1,mydata[i]); ;

}

you can also run it from here: http://jsfiddle.net/bYQn6/2/

Now, When I'm changing the Obj array to:

$.each(myarray, function(i, val){
gridi.push('{name:"' + val.Name + '",to_meet:"' + val.meet + '",time:"' + val.time + '"}');
    });

var mydata = [gridi.toString()];

printing this 'mydata' will looks exactly like the 'mydata' above, but it doesn't work :(

What am i doing wrong??

Thank you!!!

Answer 1

Why are you creating string and push into gridi?

You can create new object like:

$.each(myarray, function(i, val){  
    gridi.push({'name': val.name, 'to_meet': val.meet, 'time':val.time});  
}  
});

Answer 2

The right way to convert one array into another is to use $.map:

var mydata = $.map(myarray, function(val) {
    return {
        name: val.Name,
        to_meet: val.meet,
        time: val.time
    };
});

The callback function is given each element of the original array in turn, and the function's return values are accumulated into a new array.