Dynamic json listview trouble

Dynamic json listview trouble

Hi 
here is my code. 
----------------------------------
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Page Title</title>

  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <link rel="stylesheet" href="jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.css" />
  8.     <link rel="stylesheet" href="css/app-3.css">
  9.     <script src="js/jquery-1.9.1.min.js"></script>
  10.     <script src="jquery.mobile-1.3.2/jquery.mobile-1.3.2.js"></script>
  11.     <title>test 4</title>
  12. </head>
  13. <body>
  14.     <div data-role="Page" id="mainPage">
  15.      <div data-role="header"><h1>Welcome!</h1></div>
  16.      <div data-role="content">
  17.      <ul data-role="listview" data-inset="false" data-filter="true" id="movieList">
  18.                 
  19.             </ul>
  20.      </div>
  21.     </div>
  22.     <script>
  23.      $(document).ready(function(){
  24.             $.ajax({
  25.                 url: "data/alarsin.json",
  26.                 dataType: "json",
  27.                 success:function(data){
  28.                     $(data.products).each(function(key, value){
  29.                         let records = '<li>'+value.product+'</li>';
  30.                         $('ul').append(records);
  31.                     });
  32.                 }
  33.             });
  34.         });
  35.     </script>
  36. </body>
  37. </html>
--------------------------------------
output is not in listview..

how can i get to work in listview with auto refresh as well. please help.
kristtee