JSON数据在网页上没有正确显示

时间:2017-01-29 14:47:21

标签: php html json

这是我正确显示的控制台上的数据

ResponseText {
    "user":
    {
        "userId":"1",
        "userName":"Khizer",
        "profile_Img":"Khizar.jpg"
    },
    "comment": {
            "comment_id":21,
            "comment":"checking 9",
            "userId":1
            },
    "error":false
}

但它没有出现在网页上 在评论框中代替名称显示“未定义” 它代替评论文本显示“[object Object]”

这是我在网页上打印的代码

function comment_insert(data)
{
  var t = '';
  t += '<li class="comment-holder" id="_'+data.comment.comment_id+'">';
  t += '<div class="user-img">';
  t += '<img src="'+data.user.profile_Img+'" class="user-img-pic"/>';
  t += '</div>';
  t += '<div class="comment-body">';
  t += '<h3 class="username-feild">'+data.user.userName+'</h3>';
  t += '<div class="comment-text">'+data.comment.comment+'</div>';
  t +=  '</div>';
  t +=  '<div class="comment-buttons-holder">';
  t += '<ul>';
  t +=   '<li class="delete-btn">';
  t +=          'X';
  t +=   '</li>';
  t +='</ul>';
  t +='</div>';
  t +='</li>';
  $('.comment-holder-ul').prepend(t);

};

1 个答案:

答案 0 :(得分:1)

如果您尝试使data.user.profile_Img可行,data应首先成为对象:data应首先解析为JSON对象。

jsonData = JSON.parse(data)

然后,您将能够通过dataObj.user.profile_Img或对象中的其他键访问数据。

[编辑]您的示例的测试代码:

<html>
<body>
<div id="test">
</div>
</body>
<script>
var data = JSON.parse('{"user":{"userId":"1","userName":"Khizer","profile_Img":"Khizar.jpg"},"comment":{"comment_id":21,"comment":"checking9","userId":1},"error":false}')
function comment_insert(data)
{
  var t = '';
  t += '<li class="comment-holder" id="_'+data.comment.comment_id+'">';
  t += '<div class="user-img">';
  t += '<img src="'+data.user.profile_Img+'" class="user-img-pic"/>';
  t += '</div>';
  t += '<div class="comment-body">';
  t += '<h3 class="username-feild">'+data.user.userName+'</h3>';
  t += '<div class="comment-text">'+data.comment.comment+'</div>';
  t +=  '</div>';
  t +=  '<div class="comment-buttons-holder">';
  t += '<ul>';
  t +=   '<li class="delete-btn">';
  t +=          'X';
  t +=   '</li>';
  t +='</ul>';
  t +='</div>';
  t +='</li>';
  return t;
}
document.getElementById('test').innerHTML = comment_insert(data)
</script>
</html>