Question

我正在使用jquery方法从数据库加载JSON对象。然后，我想在HTML表格中逐行显示记录。从我的JS文件中可以看出，我曾尝试使用for和for循环来遍历数据记录，但它们都没有显然正常工作。我的表似乎没有在表上显示任何内容，甚至在结果/控制台日志上都没有显示错误。但是，我的网络日志中有数据。

网络日志中的json记录是：

data: [
      0:{
        "id": "1",
        "name": "John",
        "type": "Client"
      },
      1:{
        "id": "2",
        "name": "Damen",
        "type": "Agent"
      },
      2:{
        "id": "3",
        "name": "Aiden",
        "type": "Admin"
      }
    ]

HTML页面是：

<table id="report" class="table table-bordered table-striped table-hover js-basic-example dataTable">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Type</th>           
            </tr>
        </thead>
        <tbody>         
        </tbody>
</table>
<script>
    app.viewReport();      
</script>

我的JS页面是：

viewReport : function() {
               $.ajax({
                url: "/FIS/back-api/client/transaction/view",
                dataType: "json",
                method : 'GET',
                success : function(data){
                 for (var i = 0; i < data.length; i++) {
                    tr = $('<tr/>');
                    tr.append("<td>" + data[i].id+ "</td>");
                    tr.append("<td>" + data[i].name+ "</td>");
                    tr.append("<td>" + data[i].type+ "</td>");  
                    $('#report tbody').append(tr);
                }               
                }           
                /*$.each(data,function(i,item){
                            $('#report tr.odd').remove();
                            $("#report tbody").append(
                                "<tr>"
                                    +"<td>"+item.id+"</td>"
                                    +"<td>"+item.name+"</td>"
                                    +"<td>"+item.type+"</td>"                                                       
                                +"</tr>" )
                            })  
                }*/
    })
    },

Answer 1

John，你的JSON无效，这是我从你上面分享的样本中准备的最接近的有效JSON：

[
  {
    "id": "1",
    "name": "John",
    "type": "Client"
  },
  {
    "id": "2",
    "name": "Damen",
    "type": "Agent"
  },
  {
    "id": "3",
    "name": "Aiden",
    "type": "Admin"
  }
]

请注意，对于一组对象0 : {}格式无效，因此当您在循环中查询它时，您没有收到任何结果。

不正确：

   0:{
        "id": "1",
        "name": "John",
        "type": "Client"
      }

正确：

    {
        "id": "1",
        "name": "John",
        "type": "Client"
      }

如何验证您的JSON

以下网站将帮助您验证您的json：

jsonlint

jsoneditoronline

<强>答案

重新生成JSON，然后按照其他答案中的说明继续。

另外，我建议不要将结果解析为字符串！在我看来，正确的做法是从后端/服务器返回有效的json

Answer 2

尝试像这样追加它

 for (var i = 0; i < data.length; i++) {
    var htm = '';
    htm += '<tr>';
    htm += "<td>" + data[i].id.toString() + "</td>";
    htm += "<td>" + data[i].name.toString() + "</td>";
    htm += "<td>" + data[i].type.toString() + "</td>";  
    htm += '</tr>';
    $('#report tbody').append(htm);
 }

Answer 3

正确处理您的JSON数据，就像Winnie在这个问题的另一个答案中所说的那样。那么你还没有正确定义表格行。

for (i = 0; i < data.length; i++) {
    $('#report tbody').append(
        $('<tr>').append(
            $('<td>').text(data[i].id),
            $('<td>').text(data[i].name),
            $('<td>').text(data[i].type)
        )
    );
}

Answer 4

您的数据数组有密钥，这是不正确的json格式，如果它的数组应该是：

[
    {
        "id": "1",
        "name": "John",
        "type": "Client"
    },
    {
        "id": "2",
        "name": "Damen",
        "type": "Agent"
    },
    {
        "id": "3",
        "name": "Aiden",
        "type": "Admin"
    }
]

Answer 5

＆＃13;

public function index(){
    $this->load->view("some_view"); //Doesnt matter
    $this->createPDF(); //In wich order i place them, the result is the same
}

public function createPDF(){
 // settings
    $pdf->writeHTML($html, true, false, true, false, '');
    ob_clean();
    $pdf->Output(dirname(__FILE__).'/pdf/file.pdf', 'F');      
}

＆＃13;

var data = [{
    "id": "1",
    "name": "John",
    "type": "Client"
  },
  {
    "id": "2",
    "name": "Damen",
    "type": "Agent"
  },
  {
    "id": "3",
    "name": "Aiden",
    "type": "Admin"
  }
];

for (var i = 0; i < data.length; i++) {
  var body = document.getElementById("tableBody");
  var row = body.insertRow();
  for (var item in data[i]) {
    var cell = row.insertCell();
    cell.innerHTML = data[i][item];
  }
}

＆＃13;

尝试将JSON对象解析为HTML表

5 个答案: