Convert HTML to JSON in react-native

Question

I want to convert the HTML I received from a network request to JSON so I can easily read the values.
If there is a way to read values straight from HTML please let me know in a comment
I have found this library: https://github.com/andrejewski/himalaya
but when I try to run the example in my app I get the error Cannot read property prototype of undefined so I assume this library doesn't work in react-native because it contains a core Node JS module.
This was the code:

import {parse} from 'himalaya'
const html = this.state.html
const json = parse(html)
console.log('👉', json)

Some example html could be:

<div class='post post-featured'>
  <p>Himalaya parsed me...</p>
  <!-- ...and I liked it. -->
</div>

The expected output of this html is:

[{
  type: 'element',
  tagName: 'div',
  attributes: [{
    key: 'class',
    value: 'post post-featured'
  }],
  children: [{
    type: 'element',
    tagName: 'p',
    attributes: [],
    children: [{
      type: 'text',
      content: 'Himalaya parsed me...'
    }]
  }, {
    type: 'comment',
    content: ' ...and I liked it. '
  }]
}]

Is there another way/library to convert HTML to JSON in react native?

if you provide the code you have written I might be able to help. It looks like you need to use window.himalaya.parse(html) on the client side. — Paul Fitzgerald
– Paul Fitzgerald, Commented Dec 30, 2018 at 0:45
I don't have access to modify the server's response, this is a 3rd party api. — joshkmartinez
– joshkmartinez, Commented Dec 30, 2018 at 0:49

Siavas · Accepted Answer · 2018-12-30 16:50:22Z

3

There is no issue in using the package you have mentioned in React Native. Everything works as expected given you have followed all required steps:

Install himalaya:

cd project_dir
npm install himalaya

Add the required import at the top of your file:

import {parse} from 'himalaya';

Set the html property in state somewhere in your code, before parsing the HTML result:

this.setState = { html: '<div>Example HTML content</div>' };

Convert the HTML into JSON with parse object:

const html = this.state.html;
const json = parse(html);
alert(JSON.stringify(json));

You can check the code above works as expected in this Snack.

answered Dec 30, 2018 at 16:50

Siavas

5,1102 gold badges28 silver badges38 bronze badges

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

4 Comments

csk Over a year ago

Interesting. It's great that the library works in React Native, though I don't understand how it would try to access prototype. It apparently is associated with that specific line, but I do hope this works!

Siavas Over a year ago

@Arct indeed the error specified in the question does not seem related, but the problem might have been caused by some misplaced code. I hope the linked Snack will guide the OP into getting the additional lines in the right place, and potentially other people googling this very problem to find a quick tutorial.

csk Over a year ago

I guess that's true. I'm curious as to what exactly is causing the error, but it could honestly be anything. However, your answer has proved that the library works, which is great. The example is a great way to gather some example code :) Hope the OP finds this useful!

joshkmartinez Over a year ago

I figured it out! I upgraded expo to v31.0.0 and it started working. Thanks!

Collectives™ on Stack Overflow

Convert HTML to JSON in react-native

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related