How to import a recipe from a website to a collection

help
1

Hi everyone,

This is a bit of an open ended request but I’m just looking for some general direct as I’ve never done anything like this before. I want to be able to browse the web through a view in my app then, if they are on a compatible site, be able to import the webpages recipe into the app.

There are a couple of formats that I’ve found that some websites follow to allow this kind of thing
http://microformats.org/wiki/hrecipe
http://schema.org/Recipe

I just don’t really know where to start with this or even where to look to learn it. Any input or even just tell me where or what to look for would be much appreciated!

Thanks so much in advance!

2

Hello,

You could use NPM package like :

You will get the HTML code with HTTP request and find informations with the HTML parser.

3
4

@aurelienc @crapthings Thanks so much, those suggestions are all super helpful.

I’ve used Got to get the DOM and I’ve used Parse5 to convert it into json(I’m not sure if that’s the correct thing to do or if I should be pulling out each part from the DOM with Parse5 rather than converting the whole lot?)

So now I’m just not quite sure what to do next. For some reason terminal only displays part of the json when I console.log it just outputs this:

{ nodeName: '#document',
  mode: 'no-quirks',
  childNodes: 
  [ { nodeName: '#documentType',
      name: 'html',
      publicId: null,
      systemId: null,
      parentNode: [Circular] },
      { nodeName: 'html',
      tagName: 'html',
      attrs: [Object],
      namespaceURI: 'http://www.w3.org/1999/xhtml',
      childNodes: [Object],
      parentNode: [Circular] } ] }

I don’t know if there is a better way to show the whole json so I can see what is contains? Then I can pull stuff out of that (not that I know how to do that lol) or if it is better to do it a different way? I need to be able to pull the content of an object with a class, like <p class="ingredient"><span class="value">125</span><span class="type">ml</span> milk</p>

Sorry, these are all very newbie open questions but thanks so much for your help!

5

Here, you have the first level : the document node.

You can see the direct child node html for the balise <html> of the page.

You must be browse the entire JSON until you find a tagName == 'p' wih a class equal ‘ingredient’.

Try to output this :
console.log(yourJson.childNodes[1].childNodes);

6

I don’t know if there is a better way to show the whole json so I can see what is contains?

console.dir ?