displaying records on vf page using remote action

Question

kindly let me know how to display list tabres on vf page . actually in alert box its displaying all the 5 values. but when i am calling it in div tag having id mytable1 its displaying undefined. i think i am very close. kindly help. apex class code:-

    public class javascriptremoting {
  @remoteAction
    public static List<Account> loadaccs(){

        return [select Id,Name,Phone from Account where Phone !=null];


        }

vf page code:-

    <apex:page controller="javascriptremoting" >
     <script>
          Visualforce.remoting.Manager.invokeAction(
        '{!$RemoteAction.javascriptremoting.loadaccs}',
        function(result, event){
            var tabres= [];
    alert(result);
            for(i=0;i<5;i++){
            tabres.push(result[i].Name);
            }
             alert(tabres);

 for(i in tabres){
        firstnames = firstnames + tabres[i].Name;
        }
     document.getElementById('mytable1').innerHTML = firstnames;

      }, 
        {escape: true}
    );
    </script>

      <div  id="mytable1" >
                </div>

Answer 1

You can't show the JavaScript array directly in HTML. You have to create the HTML table String then insert inside the div element.

var firstnames = "<table>"
for(i in tabres){
    firstnames = firstnames + "<tr><td>" +tabres[i]+ "</td></tr>";
}
firstnames = firstnames+"</table>";
document.getElementById('mytable1').innerHTML = firstnames;

Answer 2

Make your controller Global. Please check modified code below:

VF:

<apex:page controller="javascriptremoting" >
     <script>
          Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.javascriptremoting.loadaccs}',
            function(result, event){
                var l = result.length;

                if(l === 0) {
                    document.getElementById('mytable1').innerHTML = "<p> No result </p>";
                } else {
                    var markUp = "<table border=1><tr><th>Id</th><th>Name</th><th>Phone</th></tr> ";
                    for(var i=0; i < l; i++) {
                        markUp += "<tr>" +
                                        "<td>" + result[i].Id + "</td>" +
                                        "<td>" + result[i].Name + "</td>" +
                                        "<td>" + result[i].Phone + "</td>" +
                                   "</tr> ";
                    }
                    markUp += "</table>";
                    document.getElementById('mytable1').innerHTML = markUp;
                }
      }, 
        {escape: true}
    );
    </script>

      <div  id="mytable1" >  </div>
</apex:page>

Controller:

global class javascriptremoting {
    @remoteAction
    public static List<Account> loadaccs() {

        return [select Id,Name,Phone from Account where Phone != null];


    }
}