Page is displaying plain html text instead of rendering the html table

Question

I want to display html table by assigning the html text to one variable and returning that variable and passing the html code in an json array format like below.

[{
  "fruit": "apple",
  "flower": "jasmine",
  "capacity": "0",
  "flavor": "jasm",
  "numbers": "1",
  "nic": "1",
  "ram": "4",
  "source": "flower",
  "details": "<table  id=\"details-0\" class=\"table-striped\"><tr><td>type</td><td>static</td></tr><tr><td>template_name</td><td>gold-sti-rh74-stage-use-only</td></tr><tr><td>template_guid</td><td>ec5c9b84c8857bfa91d11d1527250bf7</td></tr><tr><td>flavor</td><td>m1.Small</td></tr><tr><td>num_cpu</td><td>1</td></tr><tr><td>ram</td><td>4</td></tr><tr><td>num_nic</td><td>1</td></tr></table>",
  "id": 0
}]

But when page loads, I am getting the plain html text with tr> etc... and I am not getting the table format. Please help me with this issue.

var _list_data = [];
var details = '<table  id="details-'+i+'" class="table-striped">';

          details += '<tr><td>type</td><td>static</td></tr><tr><td>template_name</td> </tr>';
      details += '</table>';

      _list_data['details'] = (details);
    return _list_data;

This returns the plain html code in page. I need to make it as proper table format. we can use v-html in vue js, but this response is sending to library. How can we edit library file by adding v-html, that should not be proper way right? I am confused.

var _list_data = [];
var details = '<table  id="details-' + i + '" class="table-striped">';
details += '<tr><td>type</td><td>static</td></tr><tr><td>template_name</td> </tr>';
details += '</table>';

_list_data['details'] = (details);
return _list_data;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

return _list_data; to where? Can you make a working example by updating the snippet I made for you — mplungjan
– mplungjan, Commented Oct 31, 2019 at 6:10
its returning to vuejs data table library. From there table is rendering. This one working in virtual machine, cant copy the code and make it working here — Deepak Kumar
– Deepak Kumar, Commented Oct 31, 2019 at 6:12
Please update the snippet I made you into a minimal reproducible example — mplungjan
– mplungjan, Commented Oct 31, 2019 at 6:12

tony19 · Accepted Answer · 2022-07-16 01:55:29Z

1

Try to use v-html rather than {{}}.

<div v-html="_list_data[0]['details']"></div>

edited Jul 16, 2022 at 1:55

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 31, 2019 at 6:16

ChunTingLin

9705 silver badges14 bronze badges

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

3 Comments

Deepak Kumar Over a year ago

we can use it, but that div loads from vue data table library. we cant edit library file, right? any alternative way please

ChunTingLin Over a year ago

Maybe you should put your .vue in your question. It will more clear what you want to ask.

Piyush Over a year ago

Which library you are using?

Collectives™ on Stack Overflow

Page is displaying plain html text instead of rendering the html table

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related