Search code examples
jsonjquery-mobilegetjson

parsed json object only returning last element

looping through getJSON results to display json object in <li> - only returns last element - json object has full results? looping through data[i] should give me all? 

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <link href="http://jqmdesigner.appspot.com/gk/lib/jquery.mobile/1.4.2/flatui/jquery.mobile.flatui.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    <title>get the html from a website</title>
    <script>
        $( document ).ready(function() {
        $.getJSON("tt_json.php", function(data){
            for (var i = 0; i < data.length; i++) {
                $.each(data[i], function(key, val) {
                    //alert(key + ":" + val); 
                    $('#myUL').html("<li>" + key + " : " + val + "</li>");  
                });
            } 
        });

    </script>
</head>    
<body>          
<!-- Page: home  -->
    <div id="home" data-role="page">
        <div data-role="header" data-position="fixed" data-theme="b">
        <h3>GET WEB DATA</h3>
        </div>
        <div role="main1" id="mainone" class="ui-content"> 
            <ul data-role='listview' id='myUL' data-inset='true' class='ui-listview ui-listview-inset ui-corner-all ui-shadow'>
            </ul>
        </div>
        <div role="main" id="mainzero" class="ui-content"> 
        </div>
    </div>           
</body>

Solution

  • you seem to set the html tag with id myUL in the loop of your javascript function. this overwrites the inner html of that tag each time. Try to add the li element instead of overwriting.