My ember version is 1.13 and I would like to ask if the line of code below is applicable to the version of my ember app above?
console.log(this.get('arrayOfObjects').filterBy('zoneName', ['zoneNameOne', 'zoneNameTwo'])); ?
Sample data of selectedZoneOrCityName is
selectedZoneOrCityName = ['zoneNameOne', 'zoneNameTwo'],
I want to use it something like these
if (selectedZoneOrCityName) {
return this.get('arrayOfObjects').filterBy('zoneName', selectedZoneOrCityName).mapBy('cityName');
} else {
console.log('reads nothing');
return [];
}
you can use simple filter like below code snippet.
var arrayOfObjects = [
{
id: 1,
name: 'one',
zoneName: 'zoneNameOne'
},
{
id: 2,
name: 'two',
zoneName: 'one zoneName'
},
{
id: 3,
name: 'three',
zoneName: 'zoneNameOne'
},
{
id: 4,
name: 'four',
zoneName: 'zoneNameTwo'
}
];
var selectedZoneOrCityName = ['zoneNameOne', 'zoneNameTwo'];
arrayOfObjects = arrayOfObjects.filter((item) => {
return selectedZoneOrCityName.includes(item.zoneName);
});
console.log('final filtered array : ', arrayOfObjects);
if you are usign filterBy then you have to chain filterBy for each array value.
Related
I have a component:
App.MyChildComponent = Ember.Component.extend({
addTooltips: Ember.on('didInsertElement', function() {
var me = this;
var metrics = this.get('option.metrics');
metrics.forEach(function(e, i) {
me.get('option.metrics').objectAt(i - 1).set('tooltipDisabled', true);
});
});
})
Which is generated inside an each loop by a different component:
App.MyParentComponent = Ember.Component.extend({
...
})
And the template of MyParentComponent is:
{{#each option in options}}
{{my-child option=option}}
{{/each}}
All this, is called by a view with a template like this:
{{my-parent options=options}}
options is defined in the model of the view with:
App.MyViewModel = Ember.Object.extend({
options: Ember.A([
{ metrics: Ember.A([
{ name: 'a' },
{ name: 'b' },
{ name: 'c' }
]) },
{ metrics: Ember.A([
{ name: 'd' },
{ name: 'e' },
{ name: 'f' }
]) },
{ metrics: Ember.A([
{ name: 'g' },
{ name: 'h' },
{ name: 'i' }
]) }
]),
});
When I run me.get('option.metrics').objectAt(i - 1).set('tooltipDisabled', true); I get:
Uncaught TypeError: me.get(...).objectAt(...).set is not a function
What am I doing wrong?
Vanilla JavaScript objects don't have set methods. Use Ember.Objects instead:
App.MyViewModel = Ember.Object.extend({
options: Ember.A([
{ metrics: Ember.A([
Ember.Object.create({ name: 'a' }),
// ...
]) }
]),
});
Demo.
I'm really struggling to understand how polymorphic relationships worm in Ember Data (Beta 11) and cannot find any update information on how to set them up and what is expected in the JSON payload. I'm trying to create a feed of items (think facebook feed) where you have different types of items in the feed. My modeling looks something like the following.
App.Feedable = DS.Model.extend({
activities: DS.hasMany('activity')
});
App.Activity = DS.Model.extend({
feedable: DS.belongsTo('feedable', { polymorphic: true, async: false })
});
App.MemberLikeShare = DS.Model.extend({
status: DS.attr('string')
});
App.PhotoShare = DS.Model.extend({
status: DS.attr('string'),
photo: DS.attr('string')
});
When I do a fetch at /activities I send back JSON that looks like the following:
{
activities: [
{
id: 1,
feedable: { id: 1, type: 'memberLikeShare' }
},
{
id: 4,
feedable: { id: 4, type: 'memberLikeShare' }
},
{
id: 5,
feedable: { id: 5, type: 'photoShare' }
}
],
member_like_shares: [
{
id: 1,
status: 'Foo'
},
{
id: 4,
status: 'Bar'
}
],
photo_shares: [
{id: 5, photo: 'example.jpg'}
]
}
When this runs I get an error like:
You can only add a 'feedable' record to this relationship Error: Assertion Failed: You can only add a 'feedable' record to this relationship
I'm assuming my relationships are wrong or I'm sending the wrong JSON?
polymorphic relationships should extend the base type.
App.Feedable = DS.Model.extend({
activities: DS.hasMany('activity')
});
App.MemberLikeShare = App.Feedable.extend({
status: DS.attr('string')
});
App.PhotoShare = App.Feedable.extend({
status: DS.attr('string'),
photo: DS.attr('string')
});
I'd also expect them to define the activities on them.
member_like_shares: [
{
id: 1,
status: 'Foo',
activites: [1,2,3,4]
},
{
id: 4,
status: 'Bar',
activites: [1,2,3,4]
}
],
photo_shares: [
{
id: 5,
photo: 'example.jpg',
activites: [1,2,3,4]
}
]
I have a list of products with related tags. I want to filter the list to only show products that have the specified tag:
App.Product = DS.Model.extend({
tags: DS.hasMany('Tag', { async: true }),
name: DS.attr( 'string' )
});
App.Tag = DS.Model.extend({
name: DS.attr('string')
});
App.ProductsTaggedRoute = Ember.Route.extend({
model: function(params) {
var store = this.store;
return store.find('product').then(function() {
store.filter('product', function(product, index, enumerable) {
var match = false;
product.get('tags').then(function(tags) {
tags.forEach(function(tag) {
if(tag.get('name') === 'Tag 1') {
console.log(product.get('name') + ' true');
match = true;
} else {
console.log(product.get('name') + ' false', tag.get('name'));
}
});
});
return match;
});
});
}
});
App.Product.FIXTURES = [
{ id: 1, tags: [1,2,3], name: "test 1" },
{ id: 2, tags: [3], name: "test 2" },
{ id: 3, tags: [2,1], name: "test 3" },
{ id: 4, tags: [], name: "test 4" }
];
App.Tag.FIXTURES = [
{ id: 1, name: "Tag 1" },
{ id: 2, name: "Tag 2" },
{ id: 3, name: "Tag 3" },
{ id: 4, name: "Tag 4" }
];
The output is:
test 2 false undefined
test 3 false undefined
test 3 false undefined
test 1 true
test 1 false Tag 2
test 1 false Tag 3
I don't understand why the first three are undefined? Also, I don't get any output in the template so it seems like the filter function isn't right:
{{#each controller}}
{{ name }}
{{/each}}
You'll need to make sure the records are resolved before using the filter on it. This is a perfect use case for promises. You return a promise, and control what's resolved and when.
http://emberjs.jsbin.com/OxIDiVU/84/edit
model: function(params) {
var store = this.store;
return new Em.RSVP.Promise(function(resolve){
//find products
store.find('product').then(function(products) {
// get all the tag promises
var promiseArr = products.getEach('tags');
//wait on them
Em.RSVP.all(promiseArr).then(function() {
var filter = store.filter('product', function(product, index, enumerable) {
var match = false;
product.get('tags').forEach(function(tag) {
if(tag.get('name') === 'Tag 1') {
console.log(product.get('name') + ' true');
match = true;
} else {
console.log(product.get('name') + ' false', tag.get('name'));
}
});
return match;
}); //filter
resolve(filter);
}); // RSVP All
}); //find
}); // promise
}
I'm trying to figure out how to populate a table from a JSON object.
My JSON is a structurated object:
{
id: 0,
list: [{ username:'user_1',online:true, user:0 },
{ username:'user_2',online:true, user:0 }]
}
My Model is defined as follow:
MyTalk.WUser = DS.Model.extend({
list: DS.hasMany('MyTalk.User')
});
MyTalk.User = DS.Model.extend({
username: DS.attr('string'), // primary key
online: DS.attr('boolean'),
user: DS.belongsTo('MyTalk.WUser')
});
I am using a custom Adapter for ember-data:
DS.SocketAdapter = DS.RESTAdapter.extend(MyTalk.WebSocketConnection, {
// code not relevant
}
DS.SocketAdapter.map('MyTalk.WUser', {
list: {embedded: 'always'}
});
DS.SocketAdapter.map('MyTalk.User', {
primaryKey: 'username'
});
MyTalk.Store = DS.Store.extend({
revision: 12,
adapter: DS.SocketAdapter.create({})
});
Now I would load my data. I run in Chrome command line the following statements:
var store = DS.get('defaultStore');
var obj = {
id: 0,
list: [{ username:'user_1',online:true, user:0 },
{ username:'user_2',online:true, user:0 }]
};
var store.loadMany(MyTalk.WUser,obj);
var record = MyTalk.WUser.find(0);
record.serialize();
But it returns no record:
> Object {list: Array[0]}
thanks in advance!!
If you want to allow the adapter to deserialize embedded records (or perform any custom deserialization, for that matter), you'll need to load your data through the adapter rather than directly into the store.
var store = DS.get('defaultStore'),
obj = {
id: 0,
list: [{ username:'user_1', online:true, user:0 },
{ username:'user_2', online:true, user:0 }]
},
type = MyTalk.WUser,
adapter = store.adapterForType(type);
adapter.load(store, type, obj);
Has anyone used ember-data to model a tree of data?
I would assume it would be something like:
Node = DS.Model.extend({
children: DS.hasMany(Node),
parent: DS.belongsTo(Node)
});
However, I have not been able to get this working which leads be to believe that either: 1) I'm just plain wrong in how I'm setting this up or, 2) it is not currently possible to model a tree using ember-data.
I'm hoping that it's the former and not the latter...
Of course it could be the JSON...I'm assuming the JSON should be of the form:
{
nodes: [
{ id: 1, children_ids: [2,3], parent_id: null },
{ id: 2, children_ids: [], parent_id: 1 },
{ id: 3, children_ids: [], parent_id: 1 }
]
}
Any tips/advice for this problem would be greatly appreciated.
There are several little things that prevent your fiddle to work:
the DS.hasMany function asks for a String as argument. Don't forget the quotes: DS.hasMany('Node')
in the fixture definition, hasMany relationships should not be postfixed by _ids or anything. Just use the plain name. For instance: { id: 42, children: [2,3], parent_id: 17 }
the length property of DS.ManyArray should be accessed using the get function: root.get('children.length')
by default, the fixture adapter simulates an ajax call. The find query will populate the record after waiting for 50ms. In your fiddle, the root.get('children.length') call comes too early. You can configure the fixture adapter so that it makes synchronous call:
App.store = DS.Store.create({
revision: 4,
adapter: DS.FixtureAdapter.create({
simulateRemoteResponse: false
})
});
Or you can load data to the store without any adapter:
App.store.loadMany(App.Node, [
{ id: 1, children: [2, 3] },
{ id: 2, children: [], parent_id: 1 },
{ id: 3, children: [], parent_id: 1 }
]);
and last one: it seems like the Ember app should be declared in the global scope (no var), and Ember-data models should be declared in the app scope (replacing var Node = ... by App.Node = ...)
Full example:
App = Ember.Application.create();
App.store = DS.Store.create({
revision: 4
});
App.Node = DS.Model.extend({
children: DS.hasMany('App.Node'),
parent: DS.belongsTo('App.Node')
});
App.store.loadMany(App.Node, [
{ id: 1, children: [2, 3] },
{ id: 2, children: [], parent_id: 1 },
{ id: 3, children: [], parent_id: 1 }
]);
var root = App.store.find(App.Node, 1);
alert(root.get('children'));
alert(root.get('children.length'));
This didn't work for me until I set up the inverse:
App.Node = DS.Model.extend({
children: DS.hasMany('App.Node', {inverse: 'parent'}),
parent: DS.belongsTo('App.Node', {inverse: 'children'}) });
Not sure but as per example given in ember guide
App.Post = DS.Model.extend({
comments: DS.hasMany('App.Comment')
});
The JSON should encode the relationship as an array of IDs:
{
"post": {
"comment_ids": [1, 2, 3]
}
}