Retrieve datas with MySQL & Backbone JS

Question

I hope you can help me. I'm trying to fetch datas from my database with mysql and backbone. The thing is that I can create a « user », and I can get all of them. But when I try to make :

var user = new User({id: 10});

I always have this type of result, wichever the given id :

Object {id: "10", nom: "", age: "", prenom: ""}

But I get a response from my server:

[{"id":"10","nom":"test","prenom":"test","age":"12"}]

So, the GET request is executed, and return something not saved in the « user » variable.

For more explanations, here is my script

// The model
var User = Backbone.Model.extend({
    defaults: {
        id:"",
        nom:"",
        age:"",
        prenom:""
    },

    url: function(){
    if (this.isNew()){
      return "./users.php";
    } else {
      return "./users.php?id=" + this.id;
    }
  }
});

// The collection
var Users = Backbone.Collection.extend({
    models:"user",
    url:"./users.php"
});

// The view
var EditUser = Backbone.View.extend({
    el: ".page",
    render: function(options) {
        var that = this
        if (options.id) {
            var user = new User({id: options.id});
            console.log(user.toJSON());
            user.fetch({
                success: function(user){
                    var template = _.template($('#edit-user-template').html(), {user: user});                   
                    that.$el.html(template);
                }
            })
        } else {
            var template = _.template($('#edit-user-template').html(), {user:null});
            this.$el.html(template);
        }

    },
    events: {
        'submit .edit-user-form' : 'saveUser',
    },

    saveUser: function(ev){
        data = $(ev.currentTarget).serializeObject();
        var user = new User();
        user.save(data, {
            success: function(user) {
                router.navigate('', {trigger:true})
            }
        });
        return false;
    }
});

And my users.php

<?php 

    $request_method = strtolower($_SERVER['REQUEST_METHOD']);


    switch($_SERVER['REQUEST_METHOD']){
        case 'POST':
        save();
        break;
        case 'GET':
        fetch();
        break;
        case 'PUT':
        save();
        break;
        case 'DELETE':
                    // delete item
        destroy();
        break;
    }


    function fetch() {
        $pdo=new PDO("mysql:dbname=nomade;host=localhost","","");
        $sql = "SELECT * FROM users";
        if (isset($_GET['id'])) $sql .= " WHERE id =".$_GET['id'];
        $statement=$pdo->prepare($sql);
        $statement->execute();
        $results=$statement->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($results);
    }


    function save() {
        $pdo=new PDO("mysql:dbname=nomade;host=localhost","","");
        $data = json_decode(file_get_contents('php://input'));
        $nom = $data->{'nom'};
        $prenom = $data->{'prenom'};
        $age = $data->{'age'};
        $statement=$pdo->prepare("INSERT INTO users (prenom, nom, age) VALUES ('".$nom."','".$prenom."',$age)");
        $statement->execute();
        $results=$statement->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($results);
    }
?>

EDIT When I make a

var user = new User({id: options.id});
        user.fetch({
            success: function(user){
                console.log(user.attributes[0]);
                // var template = _.template($('#edit-user-template').html(), {});
                // that.$el.html(template);
            }
        });

I get this :

 Object {id: "5", nom: "dsfsdfqds", prenom: "qsdfqsdf", age: "12"}

Why ?

Answer 1

I finally did it.

If you make a

$results=$statement->fetchAll(PDO::FETCH_ASSOC); 

You'll get an model attributes with an object which contains what you need. And you can parse it like that :

Here is my view :

var EditUser = Backbone.View.extend({
    el: ".page",
    render: function(options) {
        var that = this
        if (options.id) {
            var user = new User({id: options.id});
            user.fetch({
                success: function(user){
                    var template = _.template($('#edit-user-template').html(), {user: user.attributes['0']});
                    that.$el.html(template);
                }
            });
        } else {
            var template = _.template($('#edit-user-template').html(), {user:null});
            this.$el.html(template);
        }

    },
    events: {
        'submit .edit-user-form' : 'saveUser',
    },

    saveUser: function(ev){
        data = $(ev.currentTarget).serializeObject();
        var user = new User();
        user.save(data, {
            success: function(user) {
                router.navigate('', {trigger:true})
            }
        });
        return false;
    }
});

And the template associated :

<script type="text/template" id="edit-user-template">
<form  class="edit-user-form">
<legend><%= user ? "Créer" : "Mettre à jour" %> un user</legend>
<label>Prenom</label>
<input type="text" name="prenom" value="<%= user ? user['prenom'] : '' %>" placeholder="">

<label>Nom</label>
<input type="text" name="nom" value="<%= user ? user['nom'] : '' %>" placeholder="">

<label>Age</label>
<input type="text" name="age" value="<%= user ? user['age'] : '' %>" placeholder="">

<hr>
<input type="submit" name="submit" value="Envoyer" placeholder="" class="btn">

</form>
</script>

But if you make

$results=$statement->fetchObject();

It'll return the user. Thanks @WiredPrairie , I was just too silly and changed my « save » function instead of the « fetch » function.