JSFiddle - React, Tailwind, and code Playground

by KyleMuir

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<div id="source"></div>
<div id="results">
     <h1>Entire BurgerFuel Menu</h1>

    <div data-bind="template: { name: 'burger-template',
                                  foreach: burgers,
                                  as: 'burger' }"></div>
</div>
<script type="text/html" id="burger-template">
    <h2 data-bind="text: product"></h3>
    <p><b>Price</b > : <span data-bind="text: price"> </span></p> 
    <p><b> Description </b>: <span data-bind="text: description"></span ></p>
</script>

CSS

#source {
    display: none;
}

JavaScript

url = 'http://www.burgerfuel.com/mobile/nz/';
window.cbfunc = function (html) {
    $('#source').text(html.results[0]);
    parseStuff();
};

var viewModel = {
    burgers: ko.observableArray([])
};
ko.applyBindings(viewModel);


$.getScript('http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22' + encodeURIComponent(url) + '%22&format=xml&diagnostics=true&callback=cbfunc');

function parseStuff() {
    var htmlString = $('#source').text();
    htmlString = htmlString.replace(/<img[^>]*>/g, "");
    var elements = $(htmlString);
    var items = $('#menu .panel .menu .item', elements);

    $.each(items, function (index, value) {
        var product = $(value).find('.product strong').text();
        var price = $(value).find('.price').text();
        var description = $(value).find('.product p').text();
        if (price !== "") {
        viewModel.burgers.push({
            product: product,
            price: price,
            description: description
        });
        }
    });
}