Я работаю с книжным магазином 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),
],
}
],
});
Переместив данные вручную создаются истории, но я хочу переместить его 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"
}]
}]