在jQuery中加载表中的JSON文件

Question

我的表格脚本有问题。

我只喜欢02列和5行，你可以从下面的代码中看到错误的结果。

这是json文件，文件名为：myfile.json

[ 
  {'id': 1, 'name': 'Name1', email: 'Name1@email.com'},
  {'id': 2, 'name': 'Name2', email: 'Name2@email.com'},
  {'id': 3, 'name': 'Name3', email: 'Name3@email.com'},
  {'id': 4, 'name': 'Name4', email: 'Name4@email.com'},
  {'id': 5, 'name': 'Name5', email: 'Name5@email.com'}
 ]

以下是我的插件文件的代码：jquery.table.plugin.js

    // JavaScript Document
    (function($){
        $.fn.table = function(options){

            var defaults = {headerTable:
                    [
                        {name:'Ten', field:'name'},
                        {name:'Email', field:'email'}
                    ],
                };

            var settings = $.extend({},defaults,options);

            return this.each(function(){
                var table = $('<table border=1>');
                 $.getJSON("myfile.json", function(data) {
                    var tr = $('<tr>').appendTo(table);
                    var str = ""
                    for (var i=0;i<settings.headerTable.length;i++)
                    {
                        $(tr).append($('<th>'+ settings.headerTable[i].name +'</th>')); 
                        str += '<tr>';
                        for(var j=0;j<data.length;j++)
                        {
    $('<td>' + data[j][settings.headerTable[i].field] + '</td>').appendTo(table);
                        }
                        str += '</tr>';
                    }

                    $(str).appendTo(table);

                });
                $(this).append(table);
            });
        };
    }(jQuery));

这是我不期望的结果，任何人都可以提供帮助吗？

<table border="1" >
  <tr>
    <td>Ten</td>
    <td>Email</td>

  </tr>
  <tr>
    <td>Name1</td>
    <td>Name2</td>
    <td>Name3</td>
    <td>Name4</td>
    <td>Name5</td>
    <td>Name1@email.com</td>
    <td>Name2@email.com</td>
    <td>Name3@email.com</td>
    <td>Name4@email.com</td>
    <td>Name5@email.com</td>
  </tr>
</table>