artesanias/www/js/comp1

  <template id="artesanias.html">
    <ons-page id="artesanias">

      <ons-toolbar>
        <div class="left"><ons-back-button>Atrás</ons-back-button></div>
        <div class="center"></div>
      </ons-toolbar>

    <ons-pull-hook id="pull-hook" threshold-height="120px">
      <ons-icon id="pull-hook-icon" size="22px" class="pull-hook-content" icon="fa-arrow-down"></ons-icon>
    </ons-pull-hook>

    <ons-list id="artesania-list" src="">
      <ons-list-header>Artesanias</ons-list-header>
    </ons-list>

    <ons-list id="artesanos-list" src="">
      <ons-list-header>Artesanos</ons-list-header>
    </ons-list>

    <script>

      ons.getScriptPage().onInit = function () {
        this.querySelector('ons-toolbar div.center').textContent = this.data.title;

    //var File = this.data.title.toUpperCase() + '.json' ;
    var Esp = this.data.esp.split(', ');
    var artesanos_json = this.data.json;

    //Convertir en mayuscula primera letra del string.
    for(var i=0; i<Esp.length; i++) { 
      Esp[i] = Esp[i].charAt(0).toUpperCase() + Esp[i].slice(1);
    };

    var pullHook = document.getElementById('pull-hook');
    var icon = document.getElementById('pull-hook-icon');
    pullHook.addEventListener('changestate', function (event) {
      switch (event.state) {
        case 'initial':
          icon.setAttribute('icon', 'fa-arrow-down');
          icon.removeAttribute('rotate');
          icon.removeAttribute('spin');
          break;
        case 'preaction':
          icon.setAttribute('icon', 'fa-arrow-down');
          icon.setAttribute('rotate', '180');
          icon.removeAttribute('spin');
          break;
        case 'action':
          icon.setAttribute('icon', 'fa-spinner');
          icon.removeAttribute('rotate');
          icon.setAttribute('spin', true);
          break;
      } 
    });
var getArtesania = function (num) {

          var Artesanos = ``,
              ArtesanosInfo = ``;

          //console.log('Filtrado de ',Esp[num])

          var results = [];
          var searchVal = "my Name";
          for (var i=0 ; i < artesanos_json.length ; i++)
          {
              if (artesanos_json[i].Especificaciones.includes(Esp[num])) {
                  results.push(artesanos_json[i]);
              }
          }

          /*var arr1=artesanos_json.filter(function(item){
              return item.Nombre=="Ana";       
          });*/

          for(var i=0; i<results.length; i++) {

            //if(Esp[num] in artesanos_json.) {}
            Artesanos+=`${results[i].Nombre}|`
            ArtesanosInfo+=`${results[i].Municipio}|${results[i]["Tel\u00e9fono 1"]}|${results[i]["E-mail"]}|${results[i].Especificaciones}&&`
            //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
          }

          return {
            name: Esp[num],
            artesan: Artesanos,
            info: ArtesanosInfo
          };
        };

        var getData = function () {
          const data = [];
          for (var i = 0; i < Esp.length; i++) {
            data.push(getArtesania(i));
          }
          return data;
        };
        var createArtesania = function (Artesania) {

        //console.log('Devuelto elemento')
        var listaArt=``;
        var arts = Artesania.artesan.split('|');
        var artsInfo = Artesania.info.split('&&');

        for(var i=0; i<arts.length; i++) {
          var lot = artsInfo[i].split('|'),
              mun = lot[0],
              tel = lot[1],
              email = lot[2],
              esp = lot[3];

          listaArt += `<ons-item tappable onclick="myNavigator.pushPage('artesano.html', {data: {title:'${arts[i]}', mun: '${mun}', tel: '${tel}', email: '${email}', esp: '${esp}'}} )" ><div class="center">`+ arts[i] +`</div></ons-item><br>`;
        }


            return ons.createElement(`
              <ons-list-item expandable tappable>
                <div class="center" >${Artesania.name}</div>
                <div class="expandable-content">Artesanos que trabajan con ${Artesania.name}
                <ons-card>${listaArt}</ons-card></div>
                </ons-list-item>` 
          );
        };
                
        var Artesanias = getData();

        for (Art of Artesanias) {
        
          var Artesania = createArtesania(Art);
          document.getElementById('artesania-list').appendChild(Artesania);
        };
        pullHook.onAction = function (done) {
          
        setTimeout(function() {
            document.getElementById('artesania-list').appendChild(createArtesania(getArtesania()));
            done();
          }, 400);
        }



         var createArtesano = function (Artesano) {

            return ons.createElement(`
              <ons-list-item expandable tappable>
                <div class="center" >${Artesano.Nombre}</div>
                <div class="expandable-content"> Municipio: ${Artesano.Municipio}<br>
                                                 Tel\u00e9fono: ${Artesano["Tel\u00e9fono 1"]}<br>
                                                 Correo Electr\u00f3nico: ${Artesano["E-mail"]}<br>
                                                 Trabaja con: ${Artesano.Especificaciones}<br>
                                                 </div>
              </ons-list-item>` 
          );
        };

        //var Artesanias = getData();
        //artesanos_json

        
        for (Artesano of artesanos_json) { 

          var cont = 0;
          var lista = document.getElementById('artesanos-list');

          //Recopilar datos no vacios.
          if (Artesano.Municipio.trim().length != 0) {
            cont ++;
          }
          if (Artesano["Tel\u00e9fono 1"].trim().length != 0) {
            cont ++;
          }
          if (Artesano["E-mail"].trim().length != 0) {
            cont ++;
          }
          if (Artesano.Especificaciones.trim().length != 0) {
            cont ++;
          }


          //info a pasar
          //'title':'${Artesano.Nombre}','esp': '${info}'
          var item = ons.createElement(`<ons-list-item onclick="myNavigator.pushPage('artesano.html', { data: { title: '${Artesano.Nombre}', mun: '${Artesano.Municipio}', tel: '${Artesano["Tel\u00e9fono 1"]}', email: '${Artesano["E-mail"]}', esp: '${Artesano.Especificaciones}' } })" tappable>
                        <div class="title">${Artesano.Nombre}</div>
                    </ons-list-item>`);


          if(cont == 0){
            console.log(Artesano.Nombre+' no tiene ningun tipo de informacion.');
            //return ons.createElement(``);
          }
          else {
            lista.appendChild(item);
          }

        };
        
      };
     </script>

        <style>
          .pull-hook-content {
            color: #333;
            transition: transform .25s ease-in-out;
          }
        </style>
      </ons-page>
    </template>