嵌套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

您需要一個附加級別（ [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 2

您也可以這樣使用

 $.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 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);
    });
     }
});