使用js在html中显示json响应

时间:2015-10-31 07:24:43

标签: javascript html json

我正在使用mobilefirst.i中的soap wsdl调用应用程序从soap wsdl获取响应为json。响应存储在结果变量中。我正在使用 result.length < / strong>但它显示长度未定义错误。浏览了许多stackoverflow后,我发现json响应不是数组[],它是{}。我使用了 Object.keys()并打印了我的json值(名称,电子邮件,等等)的长度,现在我需要打印所有单独的值,请帮助如何做到这一点

{
   "Envelope":{
      "Body":{
         "processResponse":{
            "JOB":"Manager",
            "NAME":"Rahul Sashanka",
            "PHOTO":"\/9j\/4AAQSkZJRgABAQAAAQABAAD"
              "POSITION":"Sales Support Manager",
            "SUPERVISOR_NAME":"Ashraf Tarabulsy",
            "USER_ID":"44",
            "client":"http:\/\/xmlns.oracle.com\/InternetMobile\/AbsManagement\/BPELProcessUserProfile",
            "xmlns":"http:\/\/xmlns.oracle.com\/InternetMobile\/AbsManagement\/BPELProcessUserProfile"
         }
      },
      "Header":{
         "FaultTo":{
            "Address":"http:\/\/www.w3.org\/2005\/08\/addressing\/anonymous"
         },
         "MessageID":"urn:D9785BB07F9011E5BF8B25E60F40847D",
         "ReplyTo":{
            "Address":"http:\/\/www.w3.org\/2005\/08\/addressing\/anonymous"
         }
      },
      "env":"http:\/\/schemas.xmlsoap.org\/soap\/envelope\/",
      "wsa":"http:\/\/www.w3.org\/2005\/08\/addressing"
   },
   "errors":[

   ],
   "info":[

   ],
   "isSuccessful":true,
   "responseHeaders":{
      "Content-Length":"8207",
      "Content-Type":"text\/xml; charset=utf-8",
      "Date":"Sat, 31 Oct 2015 05:33:00 GMT",
      "SOAPAction":"\"\"",
      "X-ORACLE-DMS-ECID":"9e10a9dcf92c80fa:38c0ef04:150b8318e90:-8000-0000000000022100",
      "X-Powered-By":"Servlet\/2.5 JSP\/2.1"
   },
   "responseTime":163,
   "statusCode":200,
   "statusReason":"OK",
   "totalTime":216,
   "warnings":[

   ]
}

function displayFeeds(result){
	
		
	 var ul = $('#page1display');
	 
     for (var i= 0; i< Object.keys(result).length; i++) {
    	 
       alert(Object.keys(result).length);//displays 8 as it contain 8 elements in result
         
         var li = $('<li/>').html("NAME" +(Object.keys(result[i])).NAME);
         //li.append($('<li/>').html("PERSONNAME:" +));
 
          li.append($('<hr>'));
          ul.append(li);
    }
}
<script>
 	$.getScript(path + "js/Page1.js");
</script>

<p id="currentPage"> </p>



<input type="button" id="hr" class="appButton" value="HR" onclick="funchr();" />
<ul id="page1display"> </ul>

3 个答案:

答案 0 :(得分:1)

首先你的回复在第七行得到一个错误

之后没有逗号
<<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <title></title>
</head>
<body>

</body>

<script type="text/javascript">
$(document).ready(function(){
      var jsonresponse = {
                           "Envelope":{
                              "Body":{
                                 "processResponse":{
                                    "JOB":"Manager",
                                    "NAME":"Rahul Sashanka",
                                    "PHOTO":"\/9j\/4AAQSkZJRgABAQAAAQABAAD",
                                      "POSITION":"Sales Support Manager",
                                    "SUPERVISOR_NAME":"Ashraf Tarabulsy",
                                    "USER_ID":"44",
                                    "client":"http:\/\/xmlns.oracle.com\/InternetMobile\/AbsManagement\/BPELProcessUserProfile",
                                    "xmlns":"http:\/\/xmlns.oracle.com\/InternetMobile\/AbsManagement\/BPELProcessUserProfile"
                                 }
                              },
                              "Header":{
                                 "FaultTo":{
                                    "Address":"http:\/\/www.w3.org\/2005\/08\/addressing\/anonymous"
                                 },
                                 "MessageID":"urn:D9785BB07F9011E5BF8B25E60F40847D",
                                 "ReplyTo":{
                                    "Address":"http:\/\/www.w3.org\/2005\/08\/addressing\/anonymous"
                                 }
                              },
                              "env":"http:\/\/schemas.xmlsoap.org\/soap\/envelope\/",
                              "wsa":"http:\/\/www.w3.org\/2005\/08\/addressing"
                           },
                           "errors":[

                           ],
                           "info":[

                           ],
                           "isSuccessful":true,
                           "responseHeaders":{
                              "Content-Length":"8207",
                              "Content-Type":"text\/xml; charset=utf-8",
                              "Date":"Sat, 31 Oct 2015 05:33:00 GMT",
                              "SOAPAction":"\"\"",
                              "X-ORACLE-DMS-ECID":"9e10a9dcf92c80fa:38c0ef04:150b8318e90:-8000-0000000000022100",
                              "X-Powered-By":"Servlet\/2.5 JSP\/2.1"
                           },
                           "responseTime":163,
                           "statusCode":200,
                           "statusReason":"OK",
                           "totalTime":216,
                           "warnings":[

                           ]
               };

for (var i= 0; i< Object.keys(jsonresponse).length; i++) {
   console.log(jsonresponse.Envelope.Body.processResponse.NAME);
};

})
</script>
</html>

这只是单一响应所以它只打印单个名称七次。你可以根据自己改变它。

onload

答案 1 :(得分:1)

大卫 试试这个

@Rule
@JvmField
var exception = ExpectedException.none()

希望这有帮助。

答案 2 :(得分:1)

您可以使用递归方法迭代整个JSON,该方法创建与JSON结构相对应的嵌套<ul> <li>元素。这是一个例子:

var ul, li;
function renderJSON(jsonItem, ulElement) {
    for (index in jsonItem) {
        li = document.createElement('li');
        li.textContent = index; 
        ulElement.appendChild(li); 

        if (typeof jsonItem[index] == 'object') {
            //recursively iterate over child object
            ul = document.createElement('ul');
            ulElement.appendChild(ul);
            renderJSON(jsonItem[index], ul);
        }     
    }
}

var ulRoot = document.createElement('ul');
document.body.appendChild(ulRoot);

renderJSON(json, ulRoot);

上述函数产生如下标记:

<ul>
    <li>Envelope</li>
    <ul>
        <li>Body</li>
        <ul>
            <li>processResponse</li>
            <ul>
                <li>JOB</li>
                <li>NAME</li>
                <li>PHOTO</li>
                <li>POSITION</li>
                <li>SUPERVISOR_NAME</li>
                <li>USER_ID</li>
                <li>client</li>
                <li>xmlns</li>
            </ul>
        </ul>
        <li>Header</li>
        <ul>
            <li>FaultTo</li>
            <ul>
                <li>Address</li>
            </ul>
            <li>MessageID</li>
            <li>ReplyTo</li>
            <ul>
                <li>Address</li>
            </ul>
        </ul>
        <li>env</li>
        <li>wsa</li>
    </ul>
    <li>errors</li>
    <ul></ul>
    <li>info</li>
    <ul></ul>
    <li>isSuccessful</li>
    <li>responseHeaders</li>
    <ul>
        <li>Content-Length</li>
        <li>Content-Type</li>
        <li>Date</li>
        <li>SOAPAction</li>
        <li>X-ORACLE-DMS-ECID</li>
        <li>X-Powered-By</li>
    </ul>
    <li>responseTime</li>
    <li>statusCode</li>
    <li>statusReason</li>
    <li>totalTime</li>
    <li>warnings</li>
    <ul></ul>
</ul>

演示 - &gt;的 http://jsfiddle.net/s2adfn3b/2/