We Keep Coding

Connecting firebase to Angular JS - possible json issue

The question is how to format firebase to work with angular. I have a view that works with ng as a static view. In the $scope it is defined like this
$scope.standardItems = [{
name: "The Name",
sizeX: 2,
sizeY: 1,
row: 0,
col: 0
}, {......etc
But if I try and supply data from firebase it does not work probably because the output is not formatted correctly. The connection seems fine and I can add data but firebase adds it own id. This is the how the data looks exported from the firebase console
{
"-KdJVcYUXMfeym3jPy04" : {
"att" : "grid",
"col" : 0,
"id" : 1487476528646,
"name" : "This is a test grid",
"row" : 0,
"sizeX" : 2,
"sizeY" : 1
},
The extra parameters are not important but the nesting probably is. I have logged the out put of the firebase array using this
var todosRef = new Firebase('https://xxxxxxxxxx.firebaseio.com/');
$scope.todos = $firebaseArray(todosRef);
console.log($scope.todos);
And I get this in the chrome debug console
Array[0]
0:Object
$id: "-KjhbuvgtVvFUnbfbmj04"
$priority:null
att:"grid"
col:0
id:1487476528646
name:"This is a test grid"
row:0
sizeX:2
sizeY:1
__proto__
Here is the important line from the view using angular ng-repeat
<li gridster-item row="item.position[0]" col="item.position[1]" size-x="item.size.x" size-y="item.size.y" ng-repeat="item in todos">
//..
</li>
My question is how do I pass to angular (the view) exactly what is being passed in the static example above from the controller? How can I "print" exactly what is being passed to angular from the array - the export from firebase console and chrome log console are not totally the same. It does not help that all the parent nodes are unique non sequential IDs such as -KdJVcYUXMfeym3jPy04 as it is not obvious how to strip them off again - or how to use a word such as "grid". Do I need a wildcard in the path and if so what is it? The code works using a static local array so it is all about reading json from firebase.

OK, I hope this answer is helpful. There is nothing wrong with the code posted here! Angular js will read firebase without any changes and the outputs from the chrome console and the firebase console should look like they are here even with the "-adgadhfe445ggh45" added id index. In my case I made a syntax error that excluded the ng-repeat from the the controller because it fell outside and its closing div
But at least we now know that we do not need any code to reformat the firebase.

how to filter (or fetch) a listGrid when autofetchData: false

I have a ListriGrid, I wanted to put autoFetchData : false
because I have a lot of data and I don't want to load it from the launch of the application, but it has caused me problems in the filter list !! example : ListGrid.fetchData ({id: 1})
it doesn't work!
do you have any idea how to resolve this problem

Do you have dataSource attached to the grid?
If you do and it doesn't still load, try .fetchData() and then .filterData({id:1})
Also try first in the browser console .fetchData ({id: 1}) over the dataSource object and see what you get.
If to you have removed dataSource from the grid, try first loading array with .setData() or defining localDataSource with array.

Tell ember.js to use different key for its model's "id"

I am stuck in a situation where I shouldn't return id field in the API endpoint. I need to tell ember to use slug field for / instead of id.
I tried DS.RESTAdapter.map('App.Post', id: {key: 'slug'}). While this works perfectly fine for App.Post.find("a-slug-name"), It messes up for App.Post.find() resulting in adding a new model every time it is called. And also assigning id to null.
So how should I do this.

You need to specify the attribute that should be used as the primaryKey in your Adapter. If you want the slug property to serve as your Post model id, define the primaryKey on your Adapter like this:
DS.RESTAdapter.map('App.Post', {
primaryKey: 'slug'
});
Update
As of Ember-data version 1.0.0-beta.7 canary, you need to do this instead of the above snippet:
App.PostSerializer = DS.JSONSerializer.extend({
primaryKey: 'slug'
});

I'm not an ember pro, but I had wanted to use a slug instead of an ID recently and did this, wondering if this what you're after?
https://stackoverflow.com/a/14967337/472852

How to access generateIdForRecord in Ember-Data?

I'm trying to develop an application using the Fixture Adapter with Ember-Data.
When I try and create a new object (based on a model I've defined), it won't work unless I specify the ID.
If I specify the ID and do this:
var person = SD.Person.createRecord({
id: 234,
name: "test"
});
var person.save();
I get:
Error: assertion failed: An adapter cannot assign a new id to a record
that already has an id. had id: 234 and you
tried to update it with 234. This likely happened because your server
returned data in response to a find or update that had a different id
than the one you sent.
Which makes it sound like somehow I'm updating an existing record (I'm not, there's only 2 fixtures for my Person object with ID's of 1 and 2 respectively).
Is Ember trying to save my object twice somehow?
I thought I may have to try and use generateIdForRecord to set the ID, but I can't reference that function no matter what I try.
newBooking.set('id', this.store.generateIdForRecord(this.store, newBooking));
newBooking.set('id', DS.generateIdForRecord(this.store, newBooking));
newBooking.set('id', this.generateIdForRecord(this.store, newBooking));
newBooking.set('id', generateIdForRecord(this.store, newBooking));
TypeError: this.store.generateIdForRecord is not a function
I'm using the latest releases of Ember and Ember-Data (have tried previous releases too). My model is implemented no differently to the TodoMVC tutorial in the Ember guides and in the tutorial nothing fancy needs to be done to manage ID's with the Fixture adapter so I've really no idea what's going on.
How do I create a new Person object (as per my example, just one 'name' field and persist it using Ember-Data's fixture adapter without the aforementioned errors?

In the end, my first code snippet worked fine.
For some reason, I was expecting to see the new object being persisted in the developer console. My models were being listed in a different view so I didn't realize it was actually working as intended.

Update a property in models of an ArrayController when using jquery-ui sortable with ember.js

Using http://www.lukemelia.com/blog/archives/2012/03/10/using-ember-js-with-jquery-ui/ I'm trying to implement a sortable list in a template loaded by an Ember.ArrayController which has an array of Phonenumbers as content :
{{#collection App.SortableListView contentBinding="phonenumbers" itemViewClass="App.SortableItem"}}
<b>{{phonenumber.cost}}</b>
{{/collection}}
I'm trying to update the 'order' property of each phonenumber after a sort but I can't figure out how to do that :
App.SortableListView = JQ.SortableListView.extend({
items: 'article',
//update is a jquery ui method called when the sort ends and dom has been updated
update: function(event, ui) {
// I would like to update and persist each phonenumbers model here
}
});
I have tried various things : bindAttr on order, data attributes through jquery, using the contentIndex property of each childView (but it's not updated when sorting)... Everything failed, or was too much complexity for such a simple thing.
I guess I'm missing something obvious, thx for your help.

There is sortProperty method on array controller that do what you want