Append content dynamic with Json

Hi,

I’m trying to append content dynamically from a Json file but I cannot find a work around to make it work.

import Glide from '@glidejs/glide';

function slider() {
  let ul = document.querySelector('.glide__slides');
  let card = '';
  var glide = new Glide('.glide').destroy();

  const photo = import('../metadata/photos.json').then((module) => {
    const data = module.default;
    data.forEach((photo) => {
      console.log(photo);
      card += `<li class="glide__slide"><img src="${photo.thumbnailUrl}" alt="${photo.title}">${photo.id}</li>`;
    });
    ul.innerHTML = card;
  });

  glide.mount();
}

slider();

[albanyacademy]

Looks like youre inserting dynamic content through an event listener but mounting glide outside of it. You need to mount glide after each time, but its more complicated - on each change, destroy previous glide, insert content, then construct a new glide and then mount. You need to do that last part because destroy and mount aren’t opposites, once youve destroyed mount wont reinit event listeners etc.

On Mon, Sep 7, 2020, 12:09 PM Nicolas Deyros, [e-mail] wrote:

1. why are you destroying an unmounted Glide?
2. you don’t need to construct Glide before you’ve inserted your dynamic content. Shouldn’t cause a problem but its unnecessary to construct as a variable, do stuff, then mount in your current example. Better safe than sorry.

import Glide from ‘@glidejs/glide’;

function slider() { let ul = document.querySelector(‘.glide__slides’); let card = ‘’;

const photo = import(‘…/metadata/photos.json’).then((module) => { const data = module.default; data.forEach((photo) => { card += <li class="glide__slide"><img src="${photo.thumbnailUrl}" alt="${photo.title}">${photo.id}</li>; }); ul.innerHTML = card; });

// you don’t really need to use Glide as a const unless you’re accessing it elsewhere (e.g. construct, do stuff, then mount) new Glide(‘.glide’, {options??}).mount(); }

slider();

see: https://codepen.io/wearingalampshade/pen/BaKmMWR

Thanks for your help. I try to replicate the code but for some reason I cannot make it work

let ul = document.querySelector(‘.glide__slides’); let card = ‘’;

var init = { method: ‘GET’, headers: { ‘Content-Type’: ‘application/json’ }, mode: ‘cors’, cache: ‘default’, }; const url = new Request(‘/metadata/folletos.json’, init);

const fetchUrl = fetch(url).then((data) => { return data.json(); });

const provincias = ‘/metadata/dropdown.json’;

const provinciasSelect = document.querySelector(‘#provinciasSelect’); let provinciasSelected = ‘’;

fetch(provincias) .then((response) => { return response.json(); }) .then((data) => { data.forEach(function (str) { provinciasSelected += <option value="${str.id}">${str.provincia}</option>; }); //OUTPUT JSON DROPDOWN LIST provinciasSelect.innerHTML = provinciasSelected; });

provinciasSelect.addEventListener(‘change’, (e) => { provinciasSelectValue = e.target.value; let tmp = Promise.resolve(fetchUrl); fetchUrl.then((datas) => { datas[provinciasSelectValue].forEach((data) => { console.log(data); card += <li class="glide__slide">${data.title}</li>; }); ul.innerHTML = card; }); });

new Glide(‘.glide’).mount();

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/glidejs/glide/issues/515#issuecomment-688478756, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFW3OSD2UQLWHICEAH2LGDSEUVWBANCNFSM4QL5UMLQ .

[nicolas-deyros]

I thinks I resolve the issue thank to you @albanyacademy doing this:

let ul = document.querySelector('.glide__slides');
let glide = document.querySelector('.glide');

var init = {
  method: 'GET',
  headers: { 'Content-Type': 'application/json' },
  mode: 'cors',
  cache: 'default',
};
const url = new Request('/metadata/folletos.json', init);

const fetchUrl = fetch(url).then((data) => {
  return data.json();
});

const provincias = '/metadata/dropdown.json';

const provinciasSelect = document.querySelector('#provinciasSelect');
let provinciasSelected = '';

fetch(provincias)
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    data.forEach(function (str) {
      provinciasSelected += `<option value="${str.id}">${str.provincia}</option>`;
    });
    //OUTPUT JSON DROPDOWN LIST
    provinciasSelect.innerHTML = provinciasSelected;
    new Glide('.glide').destroy();
  });

provinciasSelect.addEventListener('change', (e) => {
  provinciasSelectValue = e.target.value;
  let card = '';
  fetchUrl.then((datas) => {
    datas[provinciasSelectValue].forEach((data) => {
      card += `<li class="glide__slide">${data.title}</li>`;
    });
    ul.innerHTML = card;
    new Glide('.glide', {
      type: 'carousel',
      startAt: 0,
      perView: 3,
    }).mount();
  });
});