framework7

Open full view…

How to load remote Json to Framework7 Card

yusufadeyemo
Thu, 18 May 2017 11:13:54 GMT

Hi everyone, I want to load to a remote json to framework card or list. Can sommeone show me how to go about this Thanks in advance

proyectodo
Thu, 18 May 2017 14:27:40 GMT

Search in forum there some questions answered.

proyectodo
Fri, 19 May 2017 17:53:00 GMT

This is how I do it. Some code to explian: --- // Load the JSON myApp.showPreloader('Cargando proyectos...'); $$.getJSON("http:// URL TO JSON ", function(json){ myApp.hidePreloader(); var oldproyectos=json; var objproyec=[]; for(var i=0;i<oldproyectos.length;i++){ var tit=oldproyectos[i]["title"]; //... objproyec.push(z); } // ADD THE JSON DATA TO SPECIFIC PAGE Template7.data['page:proyectos'] = objproyec; // CREATE A VIRTUAL LIST var myListProyectos = myApp.virtualList('.virtual-list.list-block.cards-list.lista-proyectos ', { items: objproyec, //JSON.parse(localStorage.getItem("noticias")), // Custom search function for searchbar searchAll: function (query, items) { var found = []; for (var i = 0; i < items.length; i++) { if (items[i].titulo.toLowerCase().indexOf(query) >= 0 || query.toLowerCase().trim() === '') found.push(i); } return found; //return array with mathced indexes }, // GIVE THE CARD STYLE TO VIRTUAL LIST template: '<li class="card demo-card-header-pic">'+ '<a href="#" data-popup="{{id}}" class="create-popup"><div style="background-image:url({{enlace}})" valign="bottom" class="card-header color-white no-border">{{titulo}}</div></a>' + '<div class="card-footer">' + '<a href="#" data-popup="{{id}}" class="create-popup button color-red">Ver proyectos</a>' + '<a onclick="window.plugins.socialsharing.share(&quot;{{titulo}} {{blog}}&quot;)" class="external button button-fill button-raised color-white compartir redes" target="_system"><i class="mdi mdi-share"></i></a>' + '</div>' + '</li>', rowsBefore: 100, rowsAfter: 100, height: 50 }); }); --- You can see the code woking in this [APP](https://play.google.com/store/apps/details?id=ar.com.fabianleguizamon.app) Section Noticias or Proyectos, is the same code with different source.