zuck js library cannot read property 'id' of null at new window.ZuckitaDaGalera.window

user_6455516 0
Viewed 983

I'm trying to implement stories using zuck.js in my ionic 3 app and I get this error

Cannot read property 'id' of null at new window.ZuckitaDaGalera.window.Zuck (http://localhost:8100/build/vendor.js:115204:23) at new HomePage

I checked in docs and it looks like I send the right data but I get this error and actually stuck with it.

HomePage component

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import 'zuck.js/zuck.js';
declare var Zuck;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  stories = new Zuck('stories', {
    backNative: true,
    autoFullScreen: 'false',
    skin: 'Snapgram',
    avatars: 'true',
    list: false,
    cubeEffect: 'true',
    localStorage: true,
    stories: [
      {
        id: 'vision',
        photo: 'https://cnet4.cbsistatic.com/img/QJcTT2ab-sYWwOGrxJc0MXSt3UI=/2011/10/27/a66dfbb7-fdc7-11e2-8c7c-d4ae52e62bcc/android-wallpaper5_2560x1600_1.jpg',
        name: 'Tech',
        link: '',
        lastUpdated: 1492665454,
        items: [
          this.buildItem('1', 'photo', 3, 'https://pbs.twimg.com/profile_images/782474226020200448/zDo-gAo0_400x400.jpg', '', false, 1492665454,''),
          this.buildItem('2', 'photo', 3, 'https://vignette4.wikia.nocookie.net/ironman/images/5/59/Robert-Downey-Jr-Tony-Stark-Iron-Man-3-Marvel-Disney.jpg/revision/latest?cb=20130611164804', '', '', false, 1492665454),
          this.buildItem('3', 'video', 0, 'https://scontent-gru2-2.cdninstagram.com/t50.2886-16/14965218_193969377722724_482497862983221248_n.mp4', 'https://scontent-gru2-2.cdninstagram.com/t51.2885-15/e15/10597412_455246124639813_1360162248_n.jpg', '', false, 1492665454),
        ],
      }],
  });

  constructor(public navCtrl: NavController) {

  }
  buildItem(id, type, length, src, preview, link, seen, time) {

    // Using object short-hand (id: id)
    return {id,type,length,src,preview,link,seen,time,
    };

    }

}

the html view

<div id="stories"></div>
ionic-framework javascript
1 Answers

You need to put your Zuck related code somewhere where the current template with your div is already available. Currently it is null because you are trying to access the template before the component is even ready. Putting the code into ionViewDidEnter() should work.

Also declare the stories variable like this then:

let stories = ...

And move the buildItem() method out of the constructor-body, thats not where a function belongs.

user_61842030
Related