How to populate X-Editable select list from the database in jQuery

I am trying to populate an X-Editable select list from the flairs table in the database which has this simple structure.

flairs: id, name, created_at, updated_at

I am also receiving a JSON response with all the records when I visit http://localhost/r2/public/data/flairs

{"1":"Misleading Title","2":"Rumor","3":"Old News"}

But I am not seeing the flairs in the select list. If I change flair.id and flair.name to manually values, they appear in the select list. So there must be something wrong with my function.

Route

Route::get('data/flairs', 'PostsController@getFlairs');

getFlairs() method in PostsController

public function getFlairs() {
    $flairs = Flair::lists('name', 'id');
    return Response::json($flairs);
}

HTML

<a href="#" id="flair" class="flair" data-type="select" data-pk="{{ $post->id }}" data-url="data/flairs" data-title="Flair">Flair</a>

jQuery

$.get( "http://localhost/r2/public/data/flairs", function(flair) {
    $('.flair').editable({
        value: 0,
        source: [
            {value: flair.id, text: flair.name}
        ]
    });
});

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/1Wcq5eV
via IFTTT