Displaying json response in html using js

Question

i am doing an soap wsdl invocation application in mobilefirst.i get the response as json from the soap wsdl.The response is stored in result variable.i was using result.length but it displayed length undefined error.After surfing many stackoverflow i found out that json response is not array [] it is {}. i used Object.keys() and printed length of my json values(name,email,...so on) now i need to print all the individual values pls help how to do it

{
   "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>

can you paste your json code here?

Tariq Husain
– Tariq Husain

2015-10-31 07:27:50 +00:00
Commented Oct 31, 2015 at 7:27 — Tariq Husain
– Tariq Husain, Commented Oct 31, 2015 at 7:27

Tariq Husain · Accepted Answer · 2015-10-31 07:54:01Z

first of all your response got one error on line seven doesn't have comma after

 "PHOTO":"\/9j\/4AAQSkZJRgABAQAAAQABAAD"

and this is just single response so it only printing single name seven time. you can change it according to yourself.

<<!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>

sorry its not an error i have removed that as its very large binary value to paste here

satishkumar · Accepted Answer · 2015-10-31 08:07:08Z

1

David Try this

function displayFeeds(result){

     var ul = $('#page1display');

     for (var i= 0; i< Object.keys(result).length; i++) {
         // Object.keys(result) returns key names in the json

         var li = $('<li/>').html("NAME" +result[Object.keys(result)[i]]);

          li.append($('<hr>'));
          ul.append(li);
    }
}

Hope this helps.

answered Oct 31, 2015 at 8:07

satishkumar

1467 bronze badges

2 Comments

david Over a year ago

getting NAME undefined 7 times

satishkumar Over a year ago

provide your result data

davidkonrad · Accepted Answer · 2015-10-31 09:03:06Z

1

You can iterate over the whole JSON using a recursive method that creates nested <ul> <li> elements that corresponds to the structure of the JSON. Here is an example :

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);

The above function produces markup like this :

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

demo -> http://jsfiddle.net/s2adfn3b/2/

edited Oct 31, 2015 at 9:03

answered Oct 31, 2015 at 8:08

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

2 Comments

david Over a year ago

thank you anyway i dont want like these i want only particular name to be printed on client side

davidkonrad Over a year ago

@david, OK - by "i need to print all the individual values" I thought you wanted to show the values too, but you only want the key names? Have updated the answer and fiddle to only show the JSON keys names.

Collectives™ on Stack Overflow

Displaying json response in html using js

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related