CODEWITHSUNDEEP
javascriptionic-framework
Manspof
Manspof

Reputation: 357

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

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>

Upvotes: 3

Views: 1315

Answers (1)

David
David

Reputation: 7507

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.

Upvotes: 3

Related Questions