嵌套的 JSON 数组对象代码不起作用

Question

在 ajax 调用之后，我在数据中有 json 对象

[
  {
    "_id": {
      "$id": "58d8e2831d7859e80d000033"
    },
    "broadcast_id": 70,
    "studentList": "",
    "employeeList": "999",
    "mailTitle": "adsf",
    "broadcastMessage": "dsfsdf dsd fgd",
    "emailSent": "0",
    "userdetails": []
  },
  {
    "_id": {
      "$id": "58d8eaba1d7859c81300002e"
    },
    "broadcast_id": 72,
    "studentList": "",
    "employeeList": "999|788",
    "mailTitle": "Hekjh",
    "broadcastMessage": "hhyky jk",
    "emailSent": "0",
    "userdetails": []
  },
  {
    "_id": {
      "$id": "58dde8ed1d78597011000029"
    },
    "user_id": 1,
    "broadcast_id": 76,
    "studentList": "",
    "employeeList": "999|788",
    "mailTitle": "Hello",
    "broadcastMessage": "How are u ",
    "emailSent": "0",
    "dateSent": "31/03/2017",
    "userdetails": [
      {
        "_id": {
          "$id": "568f95dc99fbadb016000029"
        },
        "uid": 1,
        "username": "test",
        "password": "LeLafe#7861",
        "email_id": "sales@lelafe.com",
        "creation_date": "",
        "role": "admin",
        "is_enabled": 1
      }
    ]
  }
]

现在我正在尝试解析嵌套的 json 属性 userdetails 以便在表格中扮演角色并将其显示。我试过以下几行

 $.ajax({
         url: 'index.php?action=fetchBroadcastedMessageList',
         type: 'POST',
         dataType: 'JSON',
         data: { usertype: usertype },
         success: function(data) {
             for (var i in data) {
                 $("#broadcastedmessagelist").append('<tr>' +
                     '<td style="text-align: center;">' +
                     '' + data[i].userdetails["role"] + '' +
                     '</td>'...
                 );
             }
         });
 }

data[i].userdetails["role"] 行没有检索到对应的角色 只要有可用的用户详细信息，就值。请帮我 ！！！

Answer 1

你也可以这样使用

 $.ajax({
       url: 'index.php?action=fetchBroadcastedMessageList',
       type: 'POST',
       dataType: 'JSON',
       data: {usertype: usertype},
       success: function (data) {
            $.each(data , function(key,value)) {
                       $("#broadcastedmessagelist").append('<tr>' +
                              '<td style="text-align: center;">' +
                              '' + value.userdetails[0]["role"] + '' +
                              '</td>'...
           );
           }
       });  
      }

Answer 2

您需要一个额外的级别 ([0])，因为 userdetails 返回一个数组。为此，您必须首先检查数组是否有元素：

   $("#broadcastedmessagelist").append('<tr>' +
      '<td style="text-align: center;">' +
          (data[i].userdetails.length ? data[i].userdetails[0]["role"] : '') +
      '</td>'
   );

也许您希望更早地检查数组长度，以便在数组没有元素时完全省略append。取决于你的期望......

if (data[i].userdetails.length) {
   $("#broadcastedmessagelist").append('<tr>' +
      '<td style="text-align: center;">' +
          data[i].userdetails[0]["role"] +
      '</td>'
   );
}

Answer 3

宁可使用 forEach，然后只使用该对象。无论如何，这似乎就是您要实现的目标。

$.ajax({
                    url: 'index.php?action=fetchBroadcastedMessageList',
                    type: 'POST',
                    dataType: 'JSON',
                    data: {usertype: usertype},
                    success: function (data) {
                 data.forEach(function(obj) {
                  $("#broadcastedmessagelist").append('<tr>' +
                   '<td style="text-align: center;">' +
                   '' + obj.userdetails.role + '' +
                   '</td>'...
           );
       });
       });  
      }

Answer 4

应该是

data.userdetails[0].role

Answer 5

var data= [{"_id":{"$id":"58d8e2831d7859e80d000033"},"broadcast_id":70,"studentList":"","employeeList":"999","mailTitle":"adsf","broadcastMessage":"dsfsdf dsd fgd","emailSent":"0",
            "userdetails":[]},
     {"_id":{"$id":"58d8eaba1d7859c81300002e"},"broadcast_id":72,"studentList":"","employeeList":"999|788","mailTitle":"Hekjh","broadcastMessage":"hhyky jk","emailSent":"0",
          "userdetails":[]},
     {"_id":{"$id":"58dde8ed1d78597011000029"},"user_id":1,"broadcast_id":76,"studentList":"","employeeList":"999|788","mailTitle":"Hello","broadcastMessage":"How are u ","emailSent":"0","dateSent":"31\/03\/2017",
           "userdetails":[{"_id":{"$id":"568f95dc99fbadb016000029"},"uid":1,"username":"test","password":"LeLafe#7861","email_id":"sales@lelafe.com","creation_date":"",
           "role":"admin",
           "is_enabled":1}]}]
           
           $.each(data,function(i,item){
           if(item.userdetails.length > 0)
           {
           $.each(item.userdetails,function(i,userdetail){
           $("#broadcastedmessagelist").append('<tr>' +'<td style="text-align: center;">' +userdetail.role +'</td>');
           });
           }
           else
           {
           $("#broadcastedmessagelist").append('<tr>' +'<td style="text-align: center;">' +'not available' +'</td>');
           }
           });
           
          
           

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="broadcastedmessagelist">

</table>

Answer 6

如上所述，您需要一个额外的级别嵌套。还建议使用 es6 模板字符串进行更清晰的字符串插值。

data.map((i)=>{
  if(i.userdetails.length >0){
    $("#broadcastedmessagelist")
    .append(`<tr><td style="text-align:center;">${i.userdetails[0].role}</td>`);
  } 
})

Answer 7

观察： userdetails 是一个数组，因此要访问数组中的任何元素，您必须像这样使用 ： data[i].userdetails[0]["role"]

试试这个：

for (var i in data) {
                 $("#broadcastedmessagelist").append('<tr>' +
                     '<td style="text-align: center;">' +
                     '' + data[i].userdetails[0]["role"] + '' +
                     '</td>'...
                 );
             }

Answer 8

/* 下面的代码将调用 index.php，捕获 json 响应并渲染 HTML */

$.ajax({
  url: 'index.php?action=fetchBroadcastedMessageList',
  type: 'POST',
  dataType: 'JSON',
  data: {usertype: usertype},
  success: function (data) {
 $("#broadcastedmessagelist").append('<tr><td>broadcastMessage</td><td>broadcast_id</td><td>emailSent</td><td>employeeList</td><td>mailTitle</td><td>studentList</td><td>userdetails</td></tr>');
    $.each(data, function(key,value){
      var stringBuilder = '<tr><td>' + value.broadcastMessage + '</td><td>' + value.broadcast_id + '</td><td>' + value.emailSent + '</td><td>' + value.employeeList + '</td><td>' + value.mailTitle + '</td><td>' + value.studentList + '</td>';

      if(value.userdetails.length > 0){
        stringBuilder = stringBuilder + '<td><table border="1"><tr><td>uid</td><td>username</td><td>password</td><td>email_id</td><td>creation_date</td><td>is_enabled</td><td>role</td></tr>';
        $.each(value.userdetails, function(k,v){
          stringBuilder =  stringBuilder + '<tr><td>' + v.uid + '</td><td>' + v.username + '</td><td>' + v.password + '</td><td>' + v.email_id + '</td><td>' + v.creation_date + '</td><td>' + v.is_enabled + '</td><td>' + v.role + '</td></tr>';
        });
        stringBuilder =  stringBuilder + '</table></td>';
      }else{
        stringBuilder =  stringBuilder + '<td></td>';
      }
      stringBuilder =  stringBuilder + '</tr>';
      $("#broadcastedmessagelist").append(stringBuilder);
    });
     }
});