Backbone - Collection not populating from JSON

Question

I'm trying to populate a Backbone collection from the JSON that spotify API return me. However, after I try populating the collection I'm getting this with a console.log() : playlistSpotify child {length: 1, models: Array[1], _byId: Object}. But my collection should contain 3 objects (3 objects in the JSON returned).

Any ideas of what's going on?

JS:

• Model :

  module.exports = Backbone.Model.extend({
  
      defaults: {
          id: null,
          selected : false,
          name: null
      },
  
      initialize: function() {
  
      }
  });
  

• Collection :

  module.exports = Backbone.Collection.extend({
  
      model : Playlist,
  
      initialize: function() {
  
      }
  });
  

• View (Just the function that load the JSON):

  loadSpotifyPlaylists : function() {
      var that = this;
      $.ajax({
          url: 'https://api.spotify.com/v1/users/'+ this.user.get('spotifyId') +'/playlists',
          headers: {
              'Authorization': 'Bearer ' + this.user.get('spotifyToken')
          },
          success: function(response) {
              var playlistCollection = new Playlists2({ collection : JSON.stringify(response.items) });
              var playlistView = new PlaylistSpotifyView({ collection : playlistCollection });
              that.$playListsSpotify.append(playlistView.render().el);
          }
      });
  },
  

• The JSON Spotify return me (I volontary remove one item to make it shorter) :

  {
      "href": "https://api.spotify.com/v1/users/loco/playlists?offset=0&limit=20",
      "items": [
          {
              "collaborative": false,
              "external_urls": {
                  "spotify": "http://open.spotify.com/user/loco/playlist/6MpEay73SWJzyJHGu5u6bK"
              },
              "href": "https://api.spotify.com/v1/users/loco/playlists/6MpEay73SWJzyJHGu5u6bK",
              "id": "6MpEay73SWJzyJHGu5u6bK",
              "images": [
                  {
                      "height": 640,
                      "url": "https://mosaic.scdn.co/640/dc8743ffb149138cfe29334147b835532dbee0ddf3320826…dc7e917657c7982eab6ed5126307c6c3a67e1a3fb78245a8477312eeaec1621a2849969219",
                      "width": 640
                  },
                  {
                      "height": 300,
                      "url": "https://mosaic.scdn.co/300/dc8743ffb149138cfe29334147b835532dbee0ddf3320826…dc7e917657c7982eab6ed5126307c6c3a67e1a3fb78245a8477312eeaec1621a2849969219",
                      "width": 300
                  },
                  {
                      "height": 60,
                      "url": "https://mosaic.scdn.co/60/dc8743ffb149138cfe29334147b835532dbee0ddf33208261…dc7e917657c7982eab6ed5126307c6c3a67e1a3fb78245a8477312eeaec1621a2849969219",
                      "width": 60
                  }
              ],
              "name": "quizz musical",
              "owner": {
                  "external_urls": {
                      "spotify": "http://open.spotify.com/user/loco"
                  },
                  "href": "https://api.spotify.com/v1/users/loco",
                  "id": "loco",
                  "type": "user",
                  "uri": "spotify:user:loco"
              },
              "public": false,
              "snapshot_id": "1OUgCAhN+ZsJo6whDez1kVA/R2DooVY4Rzw+Vij5HYHgz/PDFpjbUaiXz+fkapX7",
              "tracks": {
                  "href": "https://api.spotify.com/v1/users/loco/playlists/6MpEay73SWJzyJHGu5u6bK/tracks",
                  "total": 64
              },
              "type": "playlist",
              "uri": "spotify:user:loco:playlist:6MpEay73SWJzyJHGu5u6bK"
          },
          {
              "collaborative": false,
              "external_urls": {
                  "spotify": "http://open.spotify.com/user/loco/playlist/2KlAANyACpjJZmZfVGK0Mb"
              },
              "href": "https://api.spotify.com/v1/users/loco/playlists/2KlAANyACpjJZmZfVGK0Mb",
              "id": "2KlAANyACpjJZmZfVGK0Mb",
              "images": [
                  {
                      "height": 640,
                      "url": "https://i.scdn.co/image/24e6e9aac4ea49d92e260bb6875f4882c65c7f48",
                      "width": 640
                  }
              ],
              "name": "Playlist2",
              "owner": {
                  "external_urls": {
                      "spotify": "http://open.spotify.com/user/loco"
                  },
                  "href": "https://api.spotify.com/v1/users/loco",
                  "id": "loco",
                  "type": "user",
                  "uri": "spotify:user:loco"
              },
              "public": true,
              "snapshot_id": "fqLltawhg+mMNV+nVEl5Rmj94uDI1kdbbzoZLPbs7uVtZclbYJqyEtIAvIacExVe",
              "tracks": {
                  "href": "https://api.spotify.com/v1/users/loco/playlists/2KlAANyACpjJZmZfVGK0Mb/tracks",
                  "total": 1
              },
              "type": "playlist",
              "uri": "spotify:user:loco:playlist:2KlAANyACpjJZmZfVGK0Mb"
          }
      ],
      "limit": 20,
      "next": null,
      "offset": 0,
      "previous": null,
      "total": 3
  }
  

After some exploration I see this thing when I console.log the collection. I can't really understand what's happened.

Any help would be appreciated ! :)

Answer 1

You have a wrong creation of the instances. Change it to the next:

var playlistCollection = new Playlists2(response.items);
var playlistView = new PlaylistSpotifyView({ model : playlistCollection });

To initialize collection, you need just simply pass an array of objects as the argument to the constructor of collection