How do jsonEncode owl carousel 2 responsive config

Question

case 'carousel':
return $helper->jsonEncode(array(
    'dots'                  => (bool) $this->getData('paging'),
    'autoPlay'              => is_numeric($this->getData('autoplay')) ? true : false,
    'autoplayTimeout'       => is_numeric($this->getData('autoplay')) ? (int) $this->getData('autoplay') : false,
    'autoplayHoverPause'    => true,
    'loop'                  => true,
    'lazyLoad'              => true,
    'responsive'            => '{
        0:{items:1,nav:true},
        768:{items:2,nav:false},
        992:{items:3,nav:true}
    }',
    'nav'                   => (bool) $this->getData('navigation'),
    'navText'               => array($this->getData('navigation_prev'), $this->getData('navigation_next'))
));

This is error:

Uncaught TypeError: Cannot use 'in' operator to search for 'length' in { 0:{items:1,nav:true}, 768:{items:2,nav:false}, 992:{items:3,nav:true} }

How do fix this? Thanks.

Answer 1

json_encode() works with array, you should not pass a JSON string

Change :

 'responsive'            => '{
        0:{items:1,nav:true},
        768:{items:2,nav:false},
        992:{items:3,nav:true}
    }',

to:

 'responsive'=> array(
        0=>array('items'=>1,'nav'=>true),
        768=>array('items'=>2,'nav'=>false),
        992=>array('items'=>3,'nav'=>true)
    ),