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"
}]
}]
The problem you are having in your update is because you are using the addItem method:
which is to add/remove items from a story.
While the method to add/update a story is:
I think the name of the methods gives way to confusion.
I tried changing the method in your code:
by:
and it worked without problems.
Once zuck.js is started, you can add new stories like this:
Make the JSON format similar to the one shown in the zuck.js web example itself:
I haven't been able to test the code, but with these changes and adding the stories while running the JSON it should work: