Question: I've been playing around with YouTube API to display playlist on a side bar as explained in the [thread](https://stackoverflow.com/questions/57459015/how-to-embed-a-youtube-playlist-with-a-sidebar). I have given the full code as well in the [codepen link](https://codepen.io/skyrocker/pen/jONrvwO).

However, IE failing to display the playlist. the below is the console error. 

![IE Console Error](https://i.stack.imgur.com/dsYyA.png)

This the line it triggers the error

```
function getPlaylistItems(pageToken) {
        return gapi.client.youtube.playlistItems.list({
            "part": "snippet,contentDetails",
            "maxResults": 50,
            "playlistId": PLAYLIST_ID, 
            pageToken //Error is in this line
        }).then(function(response) {
        const {items, nextPageToken} = response.result;

        playlistItems.push(...items);

        var index = 0;
        items.forEach(function(item) {
            const thumbnailItem = createPlaylistItem(item, index);
            playlist.appendChild(thumbnailItem);
            index++;
        });
        maxVideoVisible = index - 3;

        if (nextPageToken) {
            getPlaylistItems(nextPageToken);
        }
    }, function(err) {
        console.error("Execute error", err);
    });
}

```

Can someone help me to understand this issue?

Thanks

Answer: 
If you want to have the most recent item first but the rest in ascending order, then you can just sort normally in ascending order. Since the last element would be the most recent, you can then rotate it to the front of the array with [`Array#pop`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) and [`Array#unshift`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift):

```js
let result = [
  { modifiedDate: "2019-02-01", name: "february" },
  { modifiedDate: "2019-04-01", name: "april" },
  { modifiedDate: "2019-01-01", name: "january" },
  { modifiedDate: "2019-03-01", name: "march" }
];

//sort ascending
let notesInfo = _.sortBy(result, ['modifiedDate']);

//take the most recent (last)
var lastElement = notesInfo.pop();

//place it first
notesInfo.unshift(lastElement);

console.log(notesInfo);
```

```html
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
```

If you want the items in descending order, then you should use [`_.orderBy`](https://lodash.com/docs/4.17.15#orderBy) instead of `_.sortBy`:

```js
let result = [
  { modifiedDate: "2019-02-01", name: "february" },
  { modifiedDate: "2019-04-01", name: "april" },
  { modifiedDate: "2019-01-01", name: "january" },
  { modifiedDate: "2019-03-01", name: "march" }
];

//sort descending
let notesInfo = _.orderBy(result, ['modifiedDate'], ['desc']);

console.log(notesInfo);
```

```html
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
```
```js
let notesInfo = []

if (_.isArray(result)) {
  console.log(result, '-----------');
  notesInfo = _.sortBy(result, ['modifiedDate']).reverse();
} else {
  notesInfo = result;
}

console.log(notesInfo)
```

This works as expected. Thanks