Question

我使用php脚本生成json数组。 json数组由jquery ajax脚本检索，该脚本然后尝试读取它并将其嵌入到html表中。但是，由于它不断在表格中生成“未定义”数据，因此我陷入困境。我想在ajax成功返回后在我的表中显示json数组的信息。请帮忙......

JSON数组格式

[{"fullname":"Frank Robsinga","gender":"Male","email":"n\/a","phone":"n\/a","status":"1"}]

javascript

<script>
$("#lookup").click(function() {

var key = $("#search").val();

$.ajax({
    type : 'POST',
    url : 'scripts/search-user-script.php',
    data : {
        key : key
    },
    success : function(obj) {

        $("#usersdata").html("");
        for (var i = 0; i < obj.length; i++) {
            var tr = "<tr>";
            var td0 = "<td>" + (i + 1) + "</td>";
            var td1 = "<td>" + obj[i]["fullname"] + "</td>";
            var td2 = "<td>" + obj[i]["gender"] + "</td>";
            var td3 = "<td>" + obj[i]["email"] + "</td>";
            var td4 = "<td>" + obj[i]["phone"] + "</td>";
            var td5 = "<td>" + obj[i]["status"] + "</td></tr>";
            $("#usersdata").append(tr + td0 + td1 + td2 + td3 + td4 + td5);

        }

    }
});
// .ajax
});
</script>

结果的屏幕截图

Answer 1

你的ajax调用返回一个String。在使用之前，您需要将其解析为Object。

在obj = JSON.parse(obj)循环之前尝试for。

喜欢：

function(obj) {
  obj = JSON.parse(obj); // Add this line
  $("#usersdata").html("");
  for (var i = 0; i < obj.length; i++) {
    var tr = "<tr>";
    var td0 = "<td>" + (i + 1) + "</td>";
    var td1 = "<td>" + obj[i]["fullname"] + "</td>";
    var td2 = "<td>" + obj[i]["gender"] + "</td>";
    var td3 = "<td>" + obj[i]["email"] + "</td>";
    var td4 = "<td>" + obj[i]["phone"] + "</td>";
    var td5 = "<td>" + obj[i]["status"] + "</td></tr>";
    $("#usersdata").append(tr + td0 + td1 + td2 + td3 + td4 + td5);

  }

}

Answer 2

＆＃13;

var obj = [{
  "fullname": "Frank Robsinga",
  "gender": "Male",
  "email": "n\/a",
  "phone": "n\/a",
  "status": "1"
}]

for (var i = 0; i < obj.length; i++) {
  console.log(obj[i].fullname)
  console.log(obj[i].gender)
  console.log(obj[i].email)
  console.log(obj[i].phone)
  console.log(obj[i].status)
}

＆＃13;

<table id='usersdata'></table>

＆＃13;

您必须.删除[""]

之类的obj[i].status 你应该看起来像ajax：

$.ajax({
    type : 'POST',
    url : 'scripts/search-user-script.php',
    dataType:'json',
    data : {
        key : key
    },
    success : function(obj) {

        $("#usersdata").html("");
        for (var i = 0; i < obj.length; i++) {
            var tr = "<tr>";
            var td0 = "<td>" + (i + 1) + "</td>";
            var td1 = "<td>" + obj[i].fullname + "</td>";
            var td2 = "<td>" + obj[i].gender + "</td>";
            var td3 = "<td>" + obj[i].email + "</td>";
            var td4 = "<td>" + obj[i].phone + "</td>";
            var td5 = "<td>" + obj[i].status + "</td></tr>";
            $("#usersdata").append(tr + td0 + td1 + td2 + td3 + td4 + td5);

        }

    }
});

Answer 3

尝试以下代码，确保您的json属性具有值。它不应包含NULL值。

public Role()
{
    Id = Guid.NewGuid();
}

          
var obj = [{"fullname": "Fname Lname",
  "gender": "M"},{"fullname": "Name2 name",
  "gender": "F"}]


for (var i = 0; i < obj.length; i++) {
  
  
            var tr = "<tr>";
            var td0 = "<td>" + (i + 1) + "</td>";
            var td1 = "<td>" + obj[i].fullname + "</td>";
            var td2 = "<td>" + obj[i].gender + "</td>";
 
            $("#usersdata").append(tr + td0 + td1 + td2 );

        }

Answer 4

我尝试了您的代码，并且能够看到正确的输出。我想，你必须有一些错误，请看控制台进行检查。

请找到demo。

请参阅以下代码：

<强> HTML：

<table id="dataTable">

</table>

<强> JS：

$(function() {
  var data = [{
    "fullname": "Frank Robsinga",
    "gender": "Male",
    "email": "lorem@234.com",
    "phone": "3243434343",
    "status": "1"
  }, {
    "fullname": "Lorem ipsum",
    "gender": "Male",
    "email": "lorem@123.com",
    "phone": "3445656565",
    "status": "2"
  }, {
    "fullname": "ex eam dictas",
    "gender": "Female",
    "email": "lorem@435.com",
    "phone": "87878676",
    "status": "1"
  }];

  for (i = 0; i < data.length; i++) {
    var tr = "<tr>";
    var td0 = "<td>" + (i + 1) + "</td>";
    var td1 = "<td>" + data[i]["fullname"] + "</td>";
    var td2 = "<td>" + data[i]["gender"] + "</td>";
    var td3 = "<td>" + data[i]["email"] + "</td>";
    var td4 = "<td>" + data[i]["phone"] + "</td>";
    var td5 = "<td>" + data[i]["status"] + "</td></tr>";
    $("#dataTable").append(tr + td0 + td1 + td2 + td3 + td4 + td5);

  }
});

<强> CSS：

table {
  border-collapse: collapse;
}

table,
td {
  border: 1px solid;
}

无法在html表中显示json数组

4 个答案: