JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<div data-role="page" id="home_page">
    <div data-role="header" data-theme="a">
         <h1>Header</h1>

    </div>
    <!-- Header -->
    <div data-role="content">
        <ul data-role="listview" data-inset="true" id="searchFood"></ul>
    </div>
</div>

JavaScript

var data = [{
    "name": "test",
        "calories": "1000",
        "fat": "100",
        "protein": "100",
        "carbohydrates": "800",
}, {
    "name": "test2",
        "calories": "10000",
        "fat": "343",
        "protein": "3434",
        "carbohydrates": "4343",
}];
var output = '';
$.each(data, function (index, value) {
    output += '<li><a href="#">' + value.name + '</a></li>';
});
$('#searchFood').html(output).listview("refresh");