If Key in Object erroring in IE11 - Unexpected Identifier, string or number

Question

I have tested this code and it works perfectly in Edge, Firefox and Chrome in all versions but will not work in IE11 or older. I am looking to either find my issue or create better version that will work in older browsers. I have a few clients that refuse to upgrade dont ask lol.

Error Received: Unexpected Identifier, string or number

The only thing on google I could find is that it references trailing commas but I dont have any in the code below. I commented out the sections that are broken.

// Slideshow System
var s =  Foundation.MediaQuery.get('medium').match(/\(([^)]+)\)/)[1].replace('em','').split(' ');
var small = (s[(s.length-1)]*16);
var m = Foundation.MediaQuery.get('large').match(/\(([^)]+)\)/)[1].replace('em','').split(' ');
var medium = (m[(m.length-1)]*16);
$('.omada-ss').each(function(){
    var x  = $(this); 
    if(x.attr("id") !== undefined){ var id = x.attr('id'); }else{
        var id = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        for (var i = 0; i < 5; i++){ id += possible.charAt(Math.floor(Math.random() * possible.length));}           
        x.attr('id',id);
    }
    if (!x.hasClass("swiper-container")){ x.addClass('swiper-container'); }
    if(x.find('div.swiper-wrapper').length == 0){ x.wrapInner('<div class="swiper-wrapper"></div>'); }
    x.find('.swiper-wrapper>div').each(function(){ if(!$(this).hasClass("swiper-slide")){ $(this).addClass('swiper-slide');} });
    if(x.hasClass('has-text')){ x.find('.spiper-slide').each(function(){ $(this).wrapInner('<div class="swiper-text"></div>'); }); }
    if(x.data("options") !== undefined){ var options = film = x.data("options"); }
    else{ var options = film = {autoplay: { delay: 2500, disableOnInteraction: true } } }
    /*
    if('breakpoints' in options){ options.breakpoints = { [medium] :options.breakpoints.medium, [small] : options.breakpoints.small }; }
    if('spaceBetween' in options){ options.spaceBetween = parseInt(options.spaceBetween); }
    if('pagination' in options){ x.append('<div class="swiper-pagination"></div>'); }
    if('navigation' in options) { x.append('<div class="swiper-button-next"></div><div class="swiper-button-prev"></div>'); }
    if('speed' in options){ options.speed=film.speed=parseInt(options.speed); }
    */
    var swiper = new Swiper('#'+id,options);
    if('filmstrip' in film){
        delete film.navigation;
        delete film.pagination;
        /*
        if('breakpointsbs' in film){
            film.breakpoints={ [medium] :film.breakpointsbs.medium, [small] : film.breakpointsbs.small };
            film.slidesPerView = parseInt(film.breakpointsbs.large.slidesPerView);
            film.centeredSlides=true;
            delete film.breakpointsbs;
        }
        */
        film.touchRatio=0.2;
        film.slideToClickedSlide=true;  
        var thumbs = new Swiper('#'+id+'-filmstrip', film);
        swiper.controller.control = thumbs;
        thumbs.controller.control = swiper;
    }
    if('pauseonhover' in options){ x.hover(function(){swiper.autoplay.stop();},function(){swiper.autoplay.start();}); }
});

Below is a sample div with the class and options attached

<div id="UBMoSlzKfT" class="swiper-container omada-ss" data-options='{"pauseonhover":true,"autoplay":{"delay":"5000","disableOnInteraction":false},"loop":true,"speed":"2000","navigation":{"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"},"keyboard":{"enabled":true}}'>
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
</div>

You'll need to share some more code so we can reproduce the issue and try to help out. See How to create a Minimal, Complete, and Verifiable example. — cabrerahector
– cabrerahector, Commented Apr 20, 2018 at 18:47
Object assignations and in operators are not well supported in old versions of IE. What are the values for medium and small? — muecas
– muecas, Commented Apr 20, 2018 at 18:47

Alexander Staroselsky · Accepted Answer · 2018-04-20 19:20:01Z

4

The issue is your are using "computed properties" of Object Initializer Spec in the film.breakpoints object which is NOT supported in IE11. IE11 will not be able to dynamically resolve the object property keys such as [medium] and [small]. You would need to replace that if you are planning to support IE11 or use a tool such as Babel to transpile that feature.

You could instead try something along the lines of the lines of bracket notation in combination with your "dynamic" variables to set values accordingly. In the example below [small] and [medium] are evaluated prior to setting a property on the film.breakpoints object:

film.breakpoints[medium] = film.breakpointsbs.medium;
film.breakpoints[small] = film.breakpointsbs.small;

var small = 600;

var film = {
  breakpoints: {
    1024: {
      "name": "desktop"
    },
    768: {
      "name": "tablet"
    }
  }
};

film.breakpoints[small] = { name: 'phablet' };

console.log(film.breakpoints);

Hopefully that helps!

edited Apr 20, 2018 at 19:20

answered Apr 20, 2018 at 18:49

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alexander Staroselsky Over a year ago

The code provided in the question has drastically changed since answering this question. Regardless, computed properties without transpile to ES5 will not work in IE11. Thanks!

James Over a year ago

the issue is that medium can change for example film.breakpoints[600] is what I need. Is there a method in which I can do this in IE11

Alexander Staroselsky Over a year ago

The code provided would be able to handle any valid string that medium or small or similar evaluates to. You can use the variable medium with this syntax and it would work with IE11 and older browsers.

Collectives™ on Stack Overflow

If Key in Object erroring in IE11 - Unexpected Identifier, string or number

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related