Phonegap – Foreach de datos recibidos mediante Json

Para mostrar en el template un listado que recibimos vía Json haremos lo siguiente.

En este ejemplo envíamos una serie de registros de una base de datos desde Laravel a javascript vía json y el template basado en Framework 7.

Al acceder a la APP, se gaurda en el Storage de PhoneGap el objeto que recibimos relativo a car_registrations.

storage.setItem("car_registration", JSON.stringify(response.car_registrations));

Una vez en la sección “car-registrations.html” se pasa al template el Json recibido parseado.

var myApp = new Framework7({
    modalTitle: "SmartParking",
    material: true,
    template7Pages: true,
    preprocess: function (content, url, next) {       
        if(url == 'car-registrations.html') {
            var template = Template7.compile(content);
            var resultContent = template({
                car_registrations: JSON.parse(storage.getItem("car_registration"))
            })
            return resultContent;
        }else{
            return content;
        }
    }
});

Y en el template mostramos todos los registros

<div class="content-block-title">Tus matrículas</div>
      <div class="list-block">
        <ul>
          {{#each car_registrations}}
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">{{car_registration}}</div>
            </div>
          </li>
          {{else}}
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Todavía no has registrado ninguna</div>
            </div>
          </li>
          {{/each}}
        </ul>
      </div>