Книжный магазин Zuck.js с JSON

Я работаю с книжным магазином Zuck.js, который позволяет создавать такие состояния / истории как состояния / истории Whatsapp, FB, IG, изначально я смог производить состояния заменяя стоимость примера, но сейчас я хочу создать мои собственные состояния с результатом JSON, но не знаю, как функция перемещать данные, здесь код Zuck:

 /**
 * This function just returns a nice object with the properties built.
 * This could have also been defined itself in the stories array.
 * @param {*} id 
 * @param {*} type 
 * @param {*} length 
 * @param {*} src 
 * @param {*} preview 
 * @param {*} link 
 * @param {*} seen 
 * @param {*} time 
 */
function buildItem(id, type, length, src, preview, link, seen, time) {
// Using object short-hand (id: id)
  return {
    id,
    type,
    length,
    src,
    preview,
    link,
    seen,
    time,
  };
}

/**
 * Creates Zuck stories. 
 */
const stories = new Zuck('stories', {
  backNative: true,
  autoFullScreen: 'false',
  skin: 'Snapgram',
  avatars: 'true',
  list: false,
  cubeEffect: 'true',
  localStorage: true,
  stories: [
    {//aqui se crea la historia para cada usuario (ref: img1)
      id: 'vision',
      photo: 'logo.jpg', 
      name: 'AIM',
      link: '',
      lastUpdated: 1492665454,
      items: [ //aqui se llena la historia con fotos o videos (ref: img2)
        buildItem('1', 'photo', 3, 'img/1.jpg', '', false, 1492665454),
        buildItem('2', 'photo', 3, 'img/2.jpg', '', '', false, 1492665454),
        buildItem('3', 'photo', 3, 'img/3.jpg', '', '', false, 1492665454),
      ],
    },{
      id: 'visionX',
      photo: 'img/avatar-1.png',
      name: 'PRUEBA',
      link: '',
      lastUpdated: 1492665454,
      items: [
        buildItem('1', 'photo', 3, 'img/1.png', '', false, 1492665454),
        buildItem('2', 'photo', 3, 'img/2.png', '', '', false, 1492665454),
        buildItem('3', 'photo', 3, 'img/3.png', '', '', false, 1492665454),
      ],
    }
    ],
});

IMG1 Ejemplo de listado de historias

Foto dentro de la historia IMG2

Переместив данные вручную создаются истории, но я хочу переместить его JSON для того, чтобы они произвелись dinamicamente.

В том же файле у меня есть ajax, который возвращает мне json

Код Аякс:

    $.ajax({
  url: 'http://localhost/lavecina2/usuarios/historias',
  dataType: 'json',
  contentType: 'application/json; charset=utf-8',
  success: function(data) {
    $.each(data, function(i,item){//aqui pretendo imprimir todos los datos uno a uno dependiendo la cantidad de resultados
      {id = data[i].usuario
      photo = data[i].nick
      }
    })
  },
  error: function() {
        console.log("No se ha podido obtener la información");
    }
})

JSON приходит так:

[{
    "usuario": "12",
    "nick": "milf",
    "items": [{
        "id": "1",
        "ruta": "IMG-20160215-WA0017.jpeg",
        "fecha": "2019-08-02 03:11:18",
        "tipo": "3"
    }, {
        "id": "6",
        "ruta": "IMG-20160409-WA0062.jpg",
        "fecha": "2019-08-02 04:15:00",
        "tipo": "3"
    }]
}, {
    "usuario": "11",
    "nick": "kata",
    "items": [{
        "id": "5",
        "ruta": "IMG-20160409-WA0060.jpg",
        "fecha": "2019-08-02 04:15:00",
        "tipo": "3"
    }]
}]

К этому JSON я могу добавлять ему больше необходимых данных, чтобы производить историю, что мне еще не удалось понять, так это как перемещение этого результата в функцию const stories = new Zuck() для того, чтобы были созданы истории

Я благодарен за любую подсказку, комментарий как перемещать данные. Привет!

Как дополнительная информация, я использую: Codeigniter и Mysql в Backend

ОБНОВЛЕНИЕ

После осуществляя код, предложенный ответом приятеля, меня производит ошибка в книжном магазине, кажется, что он не может читать статьи, присоединенный код:

const stories = new Zuck('stories', {
  backNative: true,
  autoFullScreen: 'false',
  skin: 'Snapgram',
  avatars: 'true',
  list: false,
  cubeEffect: 'true',
  localStorage: true,
});
$.ajax({
  url: 'http://localhost/lavecina2/usuarios/historias',
  dataType: 'json',
  contentType: 'application/json; charset=utf-8',
  success: function(data) {
    console.log(data);

            $.each(data, function(index) {
              //console.log(data[index].items)
                stories.addItem(index, data[index]);
               //buildItem(data[index].items);
               // console.log(stories.addItem(index, data[index]));

            });
        },
  error: function() {
        console.log("No se ha podido obtener la información");
    }
});

Ошибка, которая производит меня:

zuck.min.js:formatted:596 Uncaught TypeError: Cannot read property 'querySelectorAll' of undefined
    at r.d.addItem (zuck.min.js:formatted:596)
    at Object. (main.js:49)
    at Function.each (jquery.js:367)
    at Object.success (main.js:47)
    at fire (jquery.js:3291)
    at Object.fireWith [as resolveWith] (jquery.js:3421)
    at done (jquery.js:9533)
    at XMLHttpRequest. (jquery.js:9785)

Линия кода книжного магазина, где он показывает ошибку:

d.addItem = function(a, b, c) {
                a = f("#".concat(p, ' > [data-id="').concat(a, '"]'));
                var d = v.createElement("li");
                d.className = e(b, "seen") ? "seen" : "";
                d.setAttribute("data-id", e(b, "id"));
                d.innerHTML = '');
                b = a.querySelectorAll(".items")[0]; //linea con el error
                c ? b.appendChild(d) : E(b, d);
                U(a)
            }

В конце концов, JSON приходит так:

[{
"id":"11",
"photo":"http:\/\/localhost\/lavecina2\/assets\/images\/fufa.jpg",
"name":"kata",
"link":"http:\/\/localhost\/lavecina2\/kata",
"lastUpdated":1565242287,
"seen":false,
"items":[
{
"id":"5",
"type":"photo",
"length:":3,
"src":"IMG-20160409-WA0060.jpg",
"preview":"",
"link":"",
"seen":false,
"time":"2019-08-02 04:15:00"
}]
},{
"id":"12",
"photo":"http:\/\/localhost\/lavecina2\/assets\/images\/firma_andrea.png",
"name":"Milf",
"link":"http:\/\/localhost\/lavecina2\/Milf",
"lastUpdated":1565242287,
"seen":false,
"items":[{
"id":"1",
"type":"photo",
"length:":3,
"src":"IMG-20160215-WA0017.jpeg",
"preview":"",
"link":"",
"seen":false,
"time":"2019-08-02 03:11:18"
},{
"id":"6",
"type":"photo",
"length:":3,
"src":"IMG-20160409-WA0062.jpg",
"preview":"",
"link":"",
"seen":false,
"time":"2019-08-02 04:15:00"
}]
}]

6
задан 08.08.2019, 09:36
0 ответов