CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.js
JustStartedProgramming
JustStartedProgramming

Reputation: 327

Reading HTML response in Vuejs to display it in a Dialog box

I am getting a response from the server with the REST request in an HTML format. I have stored this in a data:[] and when I print it on a console it looks like this i.e. HTML. This reply is a String and now my problem is to filter it in JavaScript to make it an array of objects 

 <table border='1' frame = 'void'>
    <tr>
    <th>name</th>
    <th>age</th>
    <th>date of birth</th>
    </tr>
    <tr>
     <td>John</td>
     <td>30</td>
     <td>10.09.1987</td>
    </tr>
    </table>

My question is how can I show this HTML data in a dialog box using vuejs. I want this values as an array of objects like this

   [
     name,
     age,
     data of birth,
    john,
    30,
    10.09.1987
   ]

Upvotes: 0

Views: 745

Answers (1)

acdcjunior
acdcjunior

Reputation: 135752

This is not a Vue.js problem, but an HTML/JavaScript one. You can iterate the cells text content and convert into an array like below.

var stringFromREST = "<table border='1' frame='void'><tr><th>name</th><th>age</th><th>date of birth</th></tr><tr><td>John</td><td>30</td><td>10.09.1987</td></tr></table>";

var tempDiv = document.createElement('div');
tempDiv.innerHTML = stringFromREST;

var cells = tempDiv.querySelectorAll('th,td');

var contentArray = [];
for (var i = 0; i < cells.length; i++) {
  contentArray.push(cells[i].innerText);
}

console.log(contentArray);

Upvotes: 1

Related Questions