I am working with the Zuck.js library that allows to create statuses/stories like those of Whatsapp,FB,IG, initially I was able to generate the statuses by replacing the example values, but now I want to create my own statuses with the result of a JSON but I don't know how to pass the data to the function, here is Zuck's code:
/**
* 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),
],
}
],
});
When passing the data manually, the stories are created, but I want to pass the JSON so that they are generated dynamically.
In the same file I have an ajax that returns a json
Ajax code:
$.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");
}
})
The JSON comes like this:
[{
"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"
}]
}]
To this JSON I can add more necessary data to generate the story, what I have not yet been able to understand is how to pass that result to the function const stories = new Zuck()
so that the stories are created
I appreciate any suggestion, comment on how to pass the data. Cheers!
As extra data, I use: Codeigniter and Mysql in the Backend
UPDATE
After implementing the code suggested by the colleague's answer, it generates an error in the library, it seems that it cannot read the items, I attach code:
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");
}
});
The error that generates me is:
zuck.min.js:formatted:596 Uncaught TypeError: Cannot read property 'querySelectorAll' of undefined
at r.d.addItem (zuck.min.js:formatted:596)
at Object.<anonymous> (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.<anonymous> (jquery.js:9785)
The line of library code where it shows the error is:
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 = '<a href="'.concat(e(b, "src"), '" data-link="').concat(e(b, "link"), '" data-linkText="').concat(e(b, "linkText"), '" data-time="').concat(e(b, "time"), '" data-type="').concat(e(b, "type"), '" data-length="').concat(e(b, "length"), '"><img src="').concat(e(b, "preview"), '"></a>');
b = a.querySelectorAll(".items")[0]; //linea con el error
c ? b.appendChild(d) : E(b, d);
U(a)
}
Finally, the JSON comes like this:
[{
"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"
}]
}]