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>

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

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