CODEWITHSUNDEEP
javascripthtmljson
wishman
wishman

Reputation: 774

Reading a JSON and output into a HTML Table

I'm trying to read the following JSON and output the result onto a HTML Table. I just want to get all EnvIDs on to the HTML Table. I've tried, but it doesn't seem to work.

Code:

function myFunction(response) {

    var arr = JSON.parse(response);
    var stringified = JSON.stringify(arr);
    stringified.replace(/"\"/gm, '')
    var jsonObject = JSON.parse(stringified);
    var Profile = jsonObject.value[0].PROFILE;
    var jsonProfile = JSON.parse(Profile);

    alert(Profile); //This alert works, and outputs the whole JSON as expected.

    var tbl=$("<table/>").attr("id","mytable");
    $("#id01").append(tbl);
    for(var i=0;i<jsonProfile.length;i++)
    {
        var tr="<tr>";
        var td1="<td>"+obj[i]["EnvId"]+"</td></tr>";
       $("#mytable").append(tr+td1); 
    }   
    document.getElementById("id01").innerHTML = out;
}

HTML:

<!doctype html>
<style type="text/css">
    #mainPopup {
        padding: 10px;
        height: 200px;
        width: 400px;
        font-family: Helvetica, Ubuntu, Arial, sans-serif;
    }
    h1 {
        font-size: 2em;
    }
</style>
<script src=popup.js></script>
<div id="mainPopup">
<h1>Hello extensionizr!</h1>
</div>
<div id="id01"></div>

JSON:

{  
   "Dashboard":1,
   "Theme":0,
   "Groups":[ somedata ],
   "UserInfo":{ somedata },
   "Shortcuts":[  
      {  
         "Dashboard":1,
         "Index":0,
         "EnvId":"1194"
      },
      {  
         "Dashboard":1,
         "Index":1,
         "EnvId":"2715"
      },
      {  
         "Dashboard":1,
         "Index":2,
         "EnvId":"2714"
      },
      {  
         "Dashboard":1,
         "Index":3,
         "EnvId":"2756"
      }
   ]
}

Also I'm a little confused as to why this JSON has different formats, like "Groups":[ somedata ] has Square Brackets [], while "UserInfo":{ }, has the Curly Bracket {}

Upvotes: 1

Views: 425

Answers (3)

wishman
wishman

Reputation: 774

function myFunction(response) { 
    var arr = JSON.parse(response);
    var Profile = arr.value[0].PROFILE;
    var jsonProfile = JSON.parse(Profile);
    var out = "<table>";
    for(var i=0;i<jsonProfile.Shortcuts.length;i++)
    {
       out += "<tr><td>" +
       jsonProfile.Shortcuts[i].EnvId +
       "</td></tr>";
    }  
    out += "</table>";
    document.getElementById("id01").innerHTML = out;
}

After going thru your answers, I was finally able to modify my code and it works fine now.

Upvotes: 0

Yagnesh Agola
Yagnesh Agola

Reputation: 4639

Your codes have so many error as what you have posted.

For your query related to {} and [] bracket in Json string which define the Object and Object Array respectively.If you serialize Object that Json will wrap that into {} and serialization of List or Array of object will result in[].

As per my understanding you need to parse your JSON and traverse through JsonObject to build your HTML, below code shows how to traverse Shortcuts Json Object Array and build the table for that.

Here is code : 

function myFunction(response) 
{
       var arr = $.parseJSON(json);
       var jsonProfile = arr.Shortcuts;

       var tbl=$("<table/>").attr("id","mytable");
       $("#id01").append(tbl);
       for(var i=0;i<jsonProfile.length;i++)
       {
          var tr="<tr>";
          var td1="<td>"+jsonProfile[i]["EnvId"]+"</td></tr>";
          $("#mytable").append(tr+td1); 
       }   
 }

Maybe this will help you.

Upvotes: 1

Tom Solacroup
Tom Solacroup

Reputation: 46

I found a fix.

Firstly, I noticed that in the beginning of you javascript, you parse the JSON response, restringify it, and tamper it. I think you shouldn't do that.

Just use the resulting object of the JSON parsing. You can get all the EnvIds by travelling the Shortcuts array. Here's some code.

function myFunction(response) {
    //here you were parsing, restringifying and tampering with the JSON. I removed the later parts.
    var obj = JSON.parse(response);

    var tbl = $("<table/>").attr("id", "mytable");
    $("#id01").append(tbl);

    //Here I travel through the "Shortcuts" table, to display all the EnvIds as you wanted.
    for (var i = 0; i < obj["Shortcuts"].length; i++) {
        var tr = "<tr>";
        var td1 = "<td>" + obj["Shortcuts"][i]["EnvId"] + "</td></tr>";
        $("#mytable").append(tr + td1);
    }

    // I removed this line. "out" is never defined. I do not know its purpose.
    //document.getElementById("id01").innerHTML = out;
}

Here's a working jsfiddle.

Upvotes: 2

Related Questions