www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] How to style Javascript Output?

  1. #1
    Join Date
    Apr 2014
    Posts
    13

    resolved [RESOLVED] How to style Javascript Output?

    Hello,

    I am looking for how to style the output of an application i work with called LANDesk Service Desk. They have an unofficial API that allows me to pull back an XMLHttpRequest object for example a list of Incidents assigned to a team.

    I would love to make a web dashboard using this system but i'm not sure how to format the output.

    An example output is on this link: https://docs.google.com/document/d/1...it?usp=sharing

    The API is documented on the following link: https://community.landesk.com/support/docs/DOC-30875

    Any guidance or point in the right direction would be greatly received!

    Thanks,
    Dan

  2. #2
    Join Date
    May 2014
    Posts
    903
    That output looks like JSON -- so google that. You just pass that to the JSON object in modern browsers:
    https://developer.mozilla.org/en-US/...l_Objects/JSON

    or use one of the many polyfills for older browsers...

    Once you have it as a parsed object, you just go through the elements and parse them into the DOM however you want them built in terms of elements and attributes. Just used document.createElement to make the new element and appendChild textNodes to it with the content.

    If you can put together a sample .txt file with a complete data set in it, I'd be willing to toss together a simple example of that with a code breakdown to explain the how/what/why of that. (since a jpeg is pretty much useless for that).
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    Apr 2014
    Posts
    13
    Hi Deathshadow,

    Thanks so much, i have been doing some searching on the net and came to the conclusion that it was JSON.

    This is a link to the full output of doing a call to a query (list of requests): https://docs.google.com/document/d/1...it?usp=sharing

    If you could get me started that would be great as looking on the net it is a little confusing to get started.

    Thanks!
    Dan

  4. #4
    Join Date
    Apr 2014
    Posts
    13

    Question

    Hi All,

    I have had some look and can return the first item in the 'Objects' container with this script, my question is how to i loop all the 'Objects' and list all as rows?

    if i return 'myArray' in an alert i get the value "object Object"

    The output on the page is "1001 / c378a4bd-5564-4565-be95-110d24be3ef2".

    Any guidance would be amazing! I have created a fiddle to demonstrate my issue: [http://fiddle.jshell.net/xY974/1/"]http://fiddle.jshell.net/xY974/1/[/URL]

    Thanks,
    Dan

    Code:
    <!DOCTYPE html>
    <html>
    <body>
    
    <div id="TestOutput"></div>
    <script>
    var myArray = [
    {
       "objects":[
          {
             "className":"RequestManagement.Request",
             "value":"c378a4bd-5564-4565-be95-110d24be3ef2",
             "launchClassName":null,
             "launchValue":null,
             "name":"1001",
             "detail":null,
             "selected":false,
             "activated":false,
             "attributes":{
                "Title":"",
                "Status":"Closed"
             }
          },
          {
             "className":"RequestManagement.Request",
             "value":"959885e5-f1bd-4a4a-9f25-b4bc937b86f3",
             "launchClassName":null,
             "launchValue":null,
             "name":"1002",
             "detail":null,
             "selected":false,
             "activated":false,
             "attributes":{
                "Title":"",
                "Status":"Closed"
             }
          },
          {
             "className":"RequestManagement.Request",
             "value":"9836fe7e-e351-479c-84be-3407eccf9990",
             "launchClassName":null,
             "launchValue":null,
             "name":"1003",
             "detail":null,
             "selected":false,
             "activated":false,
             "attributes":{
                "Title":"",
                "Status":"Closed"
             }
          },
          {
             "className":"RequestManagement.Request",
             "value":"3bc55c9c-7403-44d5-805b-f687c746c37f",
             "launchClassName":null,
             "launchValue":null,
             "name":"1004",
             "detail":null,
             "selected":false,
             "activated":false,
             "attributes":{
                "Title":"",
                "Status":"Closed"
             }
          },
          {
             "className":"RequestManagement.Request",
             "value":"e55e33f1-7d62-4bd0-afbb-9238fe8012a0",
             "launchClassName":null,
             "launchValue":null,
             "name":"1005",
             "detail":null,
             "selected":false,
             "activated":false,
             "attributes":{
                "Title":"",
                "Status":"Closed"
             }
          },
          {
             "className":"RequestManagement.Request",
             "value":"9a9a9710-d361-4136-ab90-4b8e40d18ad7",
             "launchClassName":null,
             "launchValue":null,
             "name":"1050",
             "detail":null,
             "selected":false,
             "activated":false,
             "attributes":{
                "Title":"",
                "Status":"Closed"
             }
          }
       ],
       "objectCount":27758,
       "pageSize":50,
       "pageNumber":0,
       "pageCount":556
    }
    ];
    
    myFunction(myArray);
    
    function myFunction(arr) {
        var out = "";
        var i;
        for(i = 0; i<arr.length; i++) {
            out += '' + arr[i].objects[i].name + ' / ' + 
            arr[i].objects[i].value + '</a><br>';
        }
        document.getElementById("TestOutput").innerHTML = out;
    	alert(myArray)
    }
    </script>
    
    </body>
    </html>

  5. #5
    Join Date
    Nov 2010
    Posts
    1,084
    you're close - notice that myArray is an array with one member which is an object with one key (objects) that has a value of an array of objects, which are the ones you want. Kind of a weird and unintuitive data structure if you ask me. But oh, well. Try this:

    Code:
    function myFunction(bigarr) {
    var arr = bigarr[0].objects;
        var out = "";
        var i;
        for(i = 0; i<arr.length; i++) {
            out += '' + arr[i].name + ' / ' + 
            arr[i].value + '</a><br>';  //what's that closing "a" tag doing there, btw?
        }
        document.getElementById("TestOutput").innerHTML = out;
    	//alert(myArray)
    }

  6. #6
    Join Date
    Apr 2014
    Posts
    13
    Got some help at Treehouse and this is now sorted, for anyone in the future you can see the answer here: http://fiddle.jshell.net/xY974/4/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles