BackboneJS .get() and .at() undefined after .fetch()

localhost:3000

[{"idrooms":1,"roomname":"red","occupants":0},    {"idrooms":2,"roomname":"green","occupants":0},{"idrooms":3,"roomname":"blue","occupants":0},   {"idrooms":4,"roomname":"yellow","occupants":0},    {"idrooms":5,"roomname":"purple","occupants":0},{"idrooms":6,"roomname":"cyan","occupants":0}]

On the client side I started with the basics I know so far: Title

            <script src="jslib/jquery.js"></script>
            <script src="jslib/underscore.js"></script>
            <script src="jslib/backbone.js"></script>
            <script>
            // Your code goes here
            var Room = Backbone.Model.extend({
                defaults: {
                idrooms: 0,
                roomname: "default",
                occupants: 0
                }
            });

            var RoomList = Backbone.Collection.extend({
                model: Room,
                url: 'http://localhost:3000'
            });

            var roomlist = new RoomList();
            roomlist.fetch();

            console.log(roomlist);
            console.log(roomlist.at(1));
            console.log(roomlist.get(1));
            </script>
            </body>
            </html>

There is all kind of data in roomlist and if I drill into it I see the attributes of all six Room model objects. roomlist.at(1) and roomlist.get(1) are returning an undefined. Perhaps I made a mistake somewhere.

The server is short enough perhaps I should post it:

            var express = require('express')
              , cors = require('cors')
              , get = require('./routes/get')
              , http = require('http')
              , path = require('path')
              , mysql = require('mysql')
              , app = express();

            var connection = mysql.createConnection({ host: 'localhost', user: 'root',  
                                                      password: 'oilwell123', database: 'multiroomchat'});

            app.get('/', cors(), function(req, res, next){
                if (connection) {
                    connection.query('select * from rooms', function(err, rows, fields) {
                        if (err) throw err;
                        res.contentType('application/json');
                        //res.write(JSON.stringify(rows));
                        res.send(rows);
                        res.end();
                    });
                }
            });

            app.listen(3000, function(){
              console.log('CORS-enabled web server listening on port 80');
            });

jsonlint says its valid json...

Thank you for posting...

Answers


The fetch method is asynchronous, so the output variable won't have been assigned by the time you use it.

Try this.

roomlist.fetch({
    success : function(collection, respone) {
        console.log(collection);
        console.log("collection.at(1)", collection.at(1));
        console.log("collection.get(c0)", collection.get("c0"));        
    }
});

Need Your Help

Browser response Timeout

html perl cgi

I am doing a Perl CGI scripting on HTML . In my Perl script i have used send expect statements and print statements . I have used $exp->log_user(0) do that the browser will not display those send