Better management of json data

static/css/piphone.css

@@ -31,3 +31,7 @@ main {
     height: 48px;
     width: 48px;
 }
+
+.json-data {
+    display: none;
+}

templates/contactslist.html

@@ -19,7 +19,10 @@
                 </repeat>
             </div>
         </nav>
-        <div class="wrapper" data-json='{{ json_encode(@contacts) }}'>
+        <div class="json-data">
+        {{ json_encode(@contacts) }}
+        </div>
+        <div class="wrapper">
         </div>
     </ul>
 </div>
@@ -37,7 +40,6 @@ $(document).ready(function() {
 
     $('select.filter').change(function() {
         var filter_group = $(this).val();
-        var contacts = JSON.parse(wrapper.attr('data-json'));
         contacts = contacts.filter(function(contact) {
             var keep = false
             contact['groups'].forEach(function(group) {
@@ -47,11 +49,10 @@ $(document).ready(function() {
             });
             return keep;
         });
-        list_meps(contacts, $('.contact .wrapper'));
+        list_meps(contacts, wrapper);
     });
 
     $('#search').change(function() {
-        var contacts = JSON.parse(wrapper.attr('data-json'));
         contacts = contacts.filter(function(contact) {
             return contact['full_name'].startsWith($('#search').val());
         });
@@ -59,7 +60,8 @@ $(document).ready(function() {
     });
 
     var wrapper = $('.contact .wrapper');
-    var contacts = JSON.parse(wrapper.attr('data-json'));
+    var contacts_json = $('.contact .json-data').text()
+    var contacts = JSON.parse(contacts_json);
     list_meps(contacts, wrapper);
 
     var random = Math.floor((Math.random() * $('.collection-item').length));