javascript - How to format JSON Key values in HTML - Stack Overflow

admin管理员组

文章数量:1422446

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.

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.

• javascript
• html
• json

Share Improve this question Follow edited Apr 19, 2015 at 21:07 Mr. Polywhirl 48.9k1212 gold badges9494 silver badges145145 bronze badges asked Apr 19, 2015 at 20:34 KatieKatie 77311 gold badge99 silver badges2121 bronze badges 6

• 1 Please post the json or text content – Pedro Lobito Commented Apr 19, 2015 at 20:35
• Sure, Updated my question with the JSON array. – Katie Commented Apr 19, 2015 at 20:40
• which of the value do you wan to use ? – Pedro Lobito Commented Apr 19, 2015 at 20:41
• Are order of values important? If yes – you should use array of object instead of object with properties – Krzysztof Safjanowski Commented Apr 19, 2015 at 20:44
• Yeah, order is important. I want to display a table with heading as: Digits Probability. And under those heading each digit and its probability should display row wise. It should display from 0 to 9. – Katie Commented Apr 19, 2015 at 20:54

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 2

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>

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

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

      }
  }

本文标签： javascriptHow to format JSON Key values in HTMLStack Overflow