Convert json to html table output in javascript/JQuery

Question

I get the JSON output on the UI using the below function

$("#idvar").click(function(){
  var d1 = document.getElementById("dText");
  var d2 = document.getElementById("dJson");
  var mytext = d1.textContent;
  alert(mytext);
  $.post(
    url,
    {doc: mytext},
    function(data) {
      console.log(Object.keys(data).length);
      d2.textContent = data;
    }
  );
});

where d1 is the displaying the uploaded input document, d2 for the output generated from processing the document on a model. Currently, I am getting json format. I tried to implement the codes in these posts (Parsing JSON objects for HTML table, Convert json data to a html table), but I get [object, Object] in the text area. Is there a way to convert the json to table.

In the URL text area i get

 [{"tag":"a1","relevance":0.5},
  {"tag":"a2","relevance":0.3},
  {"tag":"c3","relevance":0.2},{"tag":"d3,
   ...

Instead, I was hoping to get

enter image description here

@nikunjMnage I tried the example on stackoverflow.com/questions/17066636/…, but it gives [object, Object] as display. Inside the function(data), the 'tr' variable was created — user8954059
– user8954059, Commented Nov 16, 2017 at 20:42
Share with us what the returned JSON looks like. You can see it by changing d2.textContent = data; for d2.textContent = JSON.stringify(data); — Piyin
– Piyin, Commented Nov 16, 2017 at 20:48
@Piyin I added the 'plugin json2html', with transform, now i get output like <li>a1 (0.2)</li><li> a2 (0.3)</li> used $('#d2').html(json2html.transform(data, transform)); where var transform = {'<>':'li','html':'${tag} (${relevance})'}; Is it possible to remove those tags from the output — user8954059
– user8954059, Commented Nov 16, 2017 at 21:03

Piyin · Accepted Answer · 2017-11-16 22:23:12Z

1

You should traverse the data and print it in table format. First, make sure the element with id dJson is a <table> element. Then, you can change your success callback to something like:

function(data) {
  console.log(Object.keys(data).length);
  var html = '<tr><th>Tag</th><th>Relevance</th></tr>';
  for(var i=0; i<data.length; i++){
    html +=
      '<tr>' +
        '<td>' +
          data[i].tag +
        '</td>' +
        '<td>' +
          data[i].relevance +
        '</td>' +
      '</tr>'
    ;
  }
  d2.innerHTML = html;
}

Here you have a working example (without the $.post call): https://jsfiddle.net/cLbqmwa4/

answered Nov 16, 2017 at 22:23

Piyin

1,8341 gold badge18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user8954059 Over a year ago

The <table id="dJson"></table> was not working. So, i changed it to div <div id="dJson"></div> and also $('#dJson').html(html); Now, it works, thanks

Piyin Over a year ago

It looks like you have CSS problems in the code, the <table> should work without problems. If you check the JSFiddle link you see how it works with <table> but not with <div>. Anyway, glad it worked for you and you're welcome

Collectives™ on Stack Overflow

Convert json to html table output in javascript/JQuery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related