CODEWITHSUNDEEP
javascripthtmljson
Katie
Katie

Reputation: 773

How to format JSON Key values in HTML

I want to format my JSON Document neatly in to an HTML page. My Javascript code is: 

 xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          // Optionally, here you can update the dom to have a table in "responseDiv"
        //  var html = ''
          var text = xmlhttp.responseText;
          var newStr = text.substring(1, text .length-1);

          document.getElementById("myDiv").innerHTML = "<pre> <code>" + newStr + "</code> </pre>";

      }
  }

My HTML code is as below:

<table class="table">
  <thead>
    <tr>
     <th>Digits</th>
     <th>Probability</th>
   </tr>
  </thead>
  <tbody>
  </tbody>
  <div id="myDiv"></div>
  </div></div>

JSON Array:

{0: 0.99, 1: 0.8, 2: 0.6, 3: 0.4, 4: 0.2, 5: 0, 6: 0.12, 7: 0.09, 8: 0.001, 9: 0.0025}

I was able to remove the "{ }" from the JSON code but I want to display the Key Values in a neat format, which I am not sure how to. Please help. Thanks.

Upvotes: 2

Views: 3241

Answers (3)

Sidd
Sidd

Reputation: 1397

Edit: You can check the code below, which now creates a table row and two column elements for each key-value pair in the object, and assigns their innerHTML to key and value respectively. Then it appends the columns to the row, and the row to the tbody element that exists in your document. (Until a newly created element is appended to something that already exists in the document, you won't see it.)

--

Once you receive JSON data via AJAX, you should use JSON.parse on it, which will turn it into an object, so that you can run a for...in loop on it and access its keys and values.

So your code would look something like:

  //ajax call etc

  xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

      var obj = JSON.parse(xmlhttp.responseText);

      //find the tbody element on the table element with class "table":
      var tbody = document.querySelector('table.table tbody'); 

      for(var objKey in obj){ // this will loop through all the keys in the object

           //create a table row element and two column elements:
           var row = document.createElement('tr'),
               td1 = document.createElement('td'),
               td2 = document.createElement('td');

           //assign object key to first column and value to second column:
           td1.innerHTML = objKey;
           td2.innerHTML = obj[objKey];

           //append the columns to the row, and the row to the tbody element:
           row.appendChild(td1).appendChild(td2);
           tbody.appendChild(row);          

      }
  }

Upvotes: 2

Jafar Akhondali
Jafar Akhondali

Reputation: 1537

That's not the way to use JSON. You'll need to parse JSON into a variable and use it like an object.

var obj = JSON.parse(text);

alert(obj.YourKeyOfJSONArrayHere);

Upvotes: 2

dfsq
dfsq

Reputation: 193261

You can use JSON.stringify function, which allows formatting options. In your case you could use it like this:

// Mock xmlhttp.responseText 
var xmlhttp = {responseText: '{"0":0.99,"1":0.8,"2":0.6,"3":0.4,"4":0.2,"5":0,"6":0.12,"7":0.09,"8":0.001,"9":0.0025}'};

// Your code
var text = xmlhttp.responseText;

var newStr = JSON.stringify(JSON.parse(text), null, 4);
document.getElementById("myDiv").innerHTML = "<pre> <code>" + newStr + "</code> </pre>";
<div id="myDiv"></div>

Upvotes: 2

Related Questions