var request = new XMLHttpRequest()

request.open('GET', 'json/renglones.json', true)

request.onload = function() {
  // begin accessing JSON data here
  var info = JSON.parse(this.response)
        
  var list = document.getElementById("list");
    
    for (var i = 0; i < info.length; i++) {

            var item = ons.createElement(`<ons-list-item expandable>
                        <div class="center">${info[i].Renglones}</div>
                        <div class="right"><img class="list-item__thumbnail" src="img/${info[i].Renglones}.png"></div>
                        <div class="expandable-content">
                        <ons-list>
                        <ons-list-item onclick="fn.pushPage({'id':'artesanos.html','title':'${info[i].Renglones}','esp': '${info[i].Especificaciones}'})">Artesanos</ons-list-item>
                        <ons-list-item onclick="fn.pushPage({'id':'artesanias.html','title':'${info[i].Renglones}','esp': '${info[i].Especificaciones}'})">Productos</ons-list-item>
                        </ons-list></div>
                    </ons-list-item>`);
            list.appendChild(item);
            }
        }
    
request.send()  /*`<ons-card onclick="fn.pushPage({'id':'artesanias.html','title':'${info[i].Renglones}','esp': '${info[i].Especificaciones}'})">
                        <div class="title">${info[i].Renglones}</div>
                        <div class="content"><img class="list-item__thumbnail" src="img/${info[i].Renglones}.png"></div>
                    </ons-card>`*/