Parse HTML payload to JSON

Question

I am facing a problem with the following payload.

The payload I am receiving on my Node.js backend on API call is as follows.

{
  "id": "1",
  "content":{
     "text": "
         <body>
           <div>
             <table>
               <thead>
                <tr>
                    <th><strong>Header 1</strong></th>
                    <th><strong>Header 2</strong></th>
                </tr>
               </thead>
                <tbody>
                 <tr>
                    <td>question 1</td>
                    <td>answer 1</td>
                 </tr>
                 <tr>
                    <td>question 2</td>
                    <td>answer 2</td>
                 </tr>
                 <tr>
                    <td>question 3</td>
                    <td>answer 3</td>
                 </tr>
                </tbody>
             </table>
           </div>
         </body>
         "
   }
}

so here I am storing the response as following:

var response = data

i.e. data is the JSON response

And I am saving the HTML data as follows

var HTMLContentText = response.content.text

As a result I will get this:

         <body>
           <div>
             <table>
               <thead>
                <tr>
                    <th><strong>Header 1</strong></th>
                    <th><strong>Header 2</strong></th>
                </tr>
               </thead>
                <tbody>
                 <tr>
                    <td>question 1</td>
                    <td>answer 1</td>
                 </tr>
                 <tr>
                    <td>question 2</td>
                    <td>answer 2</td>
                 </tr>
                 <tr>
                    <td>question 3</td>
                    <td>answer 3</td>
                 </tr>
                </tbody>
             </table>
           </div>
         </body>

Here I want to perform the following operations

parse the HTML text into an object
get the table from the response i.e. select("table").first();
get the rows of the table i.e. select("tr")

I am having the same code in JAVA.

Here it is just for reference. Here, I used Jsoup parser for doing all the operations. I want to perform all in Javascript now.

        // HTML as text (from JSON)
        String HtmlFormattedText = (String)((JSONObject)JsonObject.get("content")).get("text");

        // parse the html text into an object
        Document HtmlFormattedDocumentObject = Jsoup.parse(HtmlFormattedText);

        // get the table from the response
        Element allRowsFromTable = HtmlFormattedDocumentObject.select("table").first();

        // get the rows of the table
        return allRowsFromTable.select("tr");

I edited your question, so it tells others that it's not just about JavaScript, but Node.js. In your case, it means a lot. (The edit waits for peer review, if you couldn't see it.) — muka.gergely, Aug 22 '19 at 15:11

score 2 · Answer 1 · answered Aug 22 '19 at 14:36

2

I created a snippet for this. The return value of the function contains all tr elements of the table - you don't need to select the table first.

const response = {
  "id": "1",
  "content": {
    "text": `
         <body>
           <div>
             <table>
               <thead>
                <tr>
                    <th><strong>Header 1</strong></th>
                    <th><strong>Header 2</strong></th>
                </tr>
               </thead>
                <tbody>
                 <tr>
                    <td>question 1</td>
                    <td>answer 1</td>
                 </tr>
                 <tr>
                    <td>question 2</td>
                    <td>answer 2</td>
                 </tr>
                 <tr>
                    <td>question 3</td>
                    <td>answer 3</td>
                 </tr>
                </tbody>
             </table>
           </div>
         </body>
         `
  }
}

// logging the result of the function
console.log(parseTable(response.content.text))

function parseTable(string) {
  // creating an HTML element
  const el = document.createElement('html')

  // adding the string to the HTML element
  el.innerHTML = string

  // selecting and returning all tr elements
  return el.getElementsByTagName('tr')
}

Note: I changed the single quote to backtick in your data, as it allows multiline strings.

answered Aug 22 '19 at 14:36

muka.gergely

8,063
2
17
34

I am getting this error: `document is not defined` maybe because I am coding in one single JS file which has no HTML body or not attached to any HTML file – Siddharth Thakor Aug 22 '19 at 14:58
Because of this reason: [click here](https://stackoverflow.com/questions/32126003/node-js-document-is-not-defined) – Siddharth Thakor Aug 22 '19 at 15:06
1

If you work in the backend (like with Node.js), then there's no **document**. Is that the case? – muka.gergely Aug 22 '19 at 15:07
1

Now I see your next comment - Node.js it is. – muka.gergely Aug 22 '19 at 15:08
Yes... that's the case. I am working on the script without any front end! – Siddharth Thakor Aug 22 '19 at 15:08
1

Then this answer may help you more: https://stackoverflow.com/questions/21617468/node-js-generate-html – muka.gergely Aug 22 '19 at 15:12
1

An other solution could be to use regexp on the string. – muka.gergely Aug 22 '19 at 15:13
Should I add [this](https://www.npmjs.com/package/node-html-parser) extra package? – Siddharth Thakor Aug 22 '19 at 15:24
Here are more modules for HTML parsing with node.js: https://stackoverflow.com/questions/7977945/html-parser-on-node-js But the one you referenced (node-html-parse) might do it. – muka.gergely Aug 22 '19 at 15:28

Parse HTML payload to JSON

1 Answers1