Ember - how to use pushObject on nested data object? - ember.js

I can already push a new object into the jobs and jobProducts array thanks to this post How to create nested models in Ember.js?
but I cannot seem to push new allocations or deliverys. I have included the JSON object below.
Any advice is appreciated, I will put together a fiddle of where I currently am when I get a moment.
Cheers
App.jobs = [
{
id: 0,
jobTitle: "This is the only job",
jobProducts: [
{
id: 0,
productTitle: "Product 1",
allocations:[
{
id: 0,
allocationTitle: "Allocation 1",
deliverys:[
{
id: 0,
deliveryTitle: "Delivery 1"
},
{
id: 1,
deliveryTitle: "Delivery 2"
}
]
},
{
id: 1,
allocationTitle: "Allocation 2",
deliverys:[
{
id: 0,
deliveryTitle: "Delivery 3"
},
{
id: 1,
deliveryTitle: "Delivery 4"
}
]
}
]
},
{
id: 1,
productTitle: "Product 2",
allocations:[
{
id: 0,
allocationTitle: "Allocation 3",
deliverys:[
{
id: 0,
deliveryTitle: "Delivery 5"
},
{
id: 1,
deliveryTitle: "Delivery 6"
}
]
},
{
id: 1,
allocationTitle: "Allocation 4",
deliverys:[
{
id: 0,
deliveryTitle: "Delivery 7"
},
{
id: 1,
deliveryTitle: "Delivery 8"
}
]
}
]
}
]
}
];

The short:
here is an example how you might do it: http://jsbin.com/esixeh/7/edit
The long:
In the example you will find code lines like the below, which look scary but it works:
App.get('jobs').objectAt(0).jobProducts.objectAt(0).allocations.objectAt(0).deliverys.pushObject({...});
Since down you JSON structure, starting from App.get('jobs') the objects are just plain javascript objects and do not extend from Ember.Object you cannot use ember methods like .get('allocations') or .get('deliverys') on them and chain them together like:
App.get('jobs').get('jobProducts').get('allocations').get('deliverys');
or
App.get('jobs.jobProducts.allocations.deliverys');
but you can still use plain javascript dot notation accessor like .allocations.
On array's you can still use ember's .pushObject(), .objectAt() etc. instead of plain .push(), because array's are augmented by the framework by default see here for more info on that.
Hope it helps.

Related

How to filter the result whose type is array in loopback 4?

import {Entity, model, property} from '#loopback/repository';
#model()
export class Misc extends Entity {
#property({
type: 'number',
id: true,
generated: true,
})
id?: number;
#property({
type: 'array',
itemType: 'number',
required: true,
})
members: number[];
constructor(data?: Partial<Misc>) {
super(data);
}
}
export interface MiscRelations {
// describe navigational properties here
}
export type MiscWithRelations = Misc & MiscRelations;
Above is the model for misc API. I am using PostgreSQL.
I have inserted data in the table. Result of GET request from this table is as following -
[
{
"id":1,
"members":[
1,
2,
3
]
},
{
"id":2,
"members":[
1,
2,
3,
4,
5
]
},
{
"id":3,
"members":[
10,
20,
30,
40,
50
]
},
{
"id":4,
"members":[
100,
200,
300,
400,
500
]
},
{
"id":5,
"members":[
1,
2,
3,
500,
1000,
5000
]
}
]
I want to get the records who have members with value 1, so I applied a filter like this -
http://localhost:3000/miscs?filter[where][inq][members]=1
But this isn't working. If there is no way to execute such a query then can I do some change in the model to adjust its type such that it can accept CSV values and also can filter those data?
Please help. Thanks in advance!
For the Postgresql connector, use contains, which accepts an array:
?filter[where][contains][members][0]=1
- SAME AS -
{
where: {
contains: [1]
}
}
Finally, I found an answer. Regex can be used to match the record here like this
filter[where][members][regexp]=1,|1]

How to programmatically collapse raddataform "Groups" in Nativescript-vue

I'm trying to make use of the RadDataForm using NativeScript-Vue to develop a relatively long form.
My form elements are being defined and grouped programmatically via json. I would like to have the groups start in a minimized / collapsed state for the user experience.
The NativeScript-Vue docs for this feature are very sparse. Angular documentation is deeper so I went there for help, but clicking thru to the "collapsed" API reference results in a 404 from this page.
I'm running it from the Playground to test functionality using the following code:
<template>
<Page class="page">
<ActionBar title="Home" class="action-bar">
<ActionItem icon="font://" class="fa" />
<ActionItem icon="font://\uf07a" class="fa" />
</ActionBar>
<RadDataForm :source="person" :metadata="groupMetaData"
#groupUpdate="onGroupUpdate" />
</Page>
</template>
<script>
import Vue from "nativescript-vue";
import RadDataForm from "nativescript-ui-dataform/vue";
Vue.use(RadDataForm);
export default {
data() {
return {
person: {
name: "John",
age: 23,
email: "john#company.com",
city: "New York",
street: "5th Avenue",
streetNumber: 11
},
groupMetaData: {
// propertyGroup: [{
// "Address": {
// 'collapsed' = true,
// },
// // {
// // "Main Info": 'collapsed',
// }
// ],
propertyAnnotations: [{
name: "city",
index: 3,
groupName: "Address",
editor: "Picker",
valuesProvider: [
"New York",
"Washington",
"Los Angeles"
]
},
{
name: "street",
index: 4,
groupName: "Address"
},
{
name: "streetNumber",
index: 5,
editor: "Number",
groupName: "Address"
},
{
name: "age",
index: 1,
editor: "Number",
groupName: "Main Info"
},
{
name: "email",
index: 2,
editor: "Email",
groupName: "Main Info"
},
{
name: "name",
index: 0,
groupName: "Main Info"
}
]
}
};
},
methods: {
onGroupUpdate: function(args) {
let nativeGroup = args.group;
if (args.ios) {
nativeGroup.collapsible = true;
// nativeGroup.collapsed = true;
} else {
nativeGroup.setExpandable(true);
// nativeGroup.collapsed;
// nativeGroup.collapsed(true);
// nativeGroup.collapsed;
}
// console.log(JSON.stringify(nativeGroup));
}
}
};
</script>
<style scoped>
.home-panel {
vertical-align: center;
font-size: 20;
margin: 15;
}
.description-label {
margin-bottom: 15;
}
</style>
My assumption was to address this in the OnGroupUpdate method, but I'm not getting where I need to be (you can see a few attempts that are commented out).
The goal is to have this view load with minimized groups so that the user can expand the different form groups that s/he wishes to work on in sequence.
Playground link: https://play.nativescript.org/?id=XLKFoC&template=play-vue&v=14
Thanks for any help
I think what you actually need is nativeGroup.setIsExpanded(false);
exports.onGroupUpdate = (args) => {
if (app.ios) {
let nativeGroup = args.group;
nativeGroup.collapsible = true;
} else {
let nativeGroup = args.group;
nativeGroup.setExpandable(true);
//in this example i only expand one group.
if (args.groupName !== "SERVICE INFORMATION") {
nativeGroup.setIsExpanded(false)
}
}
}

Ember data, how can i use nested(two-depth) json-format for hasMany Relationship

Generally, Ember HasMany relationship json format is follow,
{ "post" : { id:1, title:"this is title", comments:[1,2], writer: ...} }
But, i want to use next json format (because, my server return like this)
{ "post" : { id:1, title:"this is title",
comments:[
{id:1, bodytext:"blarblar...."},
{id:2, bodytext:"second blarblar...."},
], writer: ...} }
How can I use this?
Isn't there any problem in ember store relationship?
This is a job for EmbeddedRecordsMixin.
If you're implementing the server yourself and it's purpose-built for your ember application, you should consider switching to side-loading instead:
{ "post" : { id: 1,
title: "this is title",
comments: [1,2],
writer: ...
},
"comments": [ { id: 1,
bodytext: "blarblar...."
},
{ id: 2,
bodytext: "second blarblar...."
}
]
}
That way, it would be still just one request, but would work for more complicated structures (other than trees) as well.

How do I create a polymorphic 1:1 relationships wtih Ember Data fixtures?

Page has a polymorphic 1:1 relationship with a model called PageContent. PageContent has two subtypes (TextOnly and Video). I want to be able to able to do a findAll for "page" and get all of the content back. What am I doing wrong?
JSBin
This seems to work: http://jsbin.com/names/1/edit
Only wrong thing I could see is the App.Page.FIXTURES.
It should be:
App.Page.FIXTURES = [
{
id: 1,
title: "Introduction",
pageContent: 1,
pageContentType: "textOnly"
},{
id: 2,
title: "Summary",
pageContent: 1,
pageContentType: "Video"
}
];
or
App.Page.FIXTURES = [
{
id: 1,
title: "Introduction",
pageContent: {
id: 1,
type: "textOnly"
}
},{
id: 2,
title: "Summary",
pageContent: {
id: 1,
type: "Video"
}
}
];

getting to ember.js model enumerable property childs

I'm trying to get to my models data from a view didInsertElement hook, because I need to trigger some actions on the DOM when the template rendering is completed.
with models like:
App.MyParent = DS.Model.extend({
title: DS.attr('string'),
childs: DS.hasMany('App.MyChild')
});
App.MyChild = DS.Model.extend({
name: DS.attr('string'),
parent: DS.belongsTo('App.MyParent')
});
and objects like:
App.MyParent.FIXTURES = [
{ id: 0, title: "some title", childs: [0,2,3] }
]
App.MyChild.FIXTURES = [
{ id: 0, name: "some name", parent: 0 },
{ id: 2, name: "other name", parent: 0 },
{ id: 3, name: "diff name", parent: 0 }
]
Inside the hook function I am getting to the childs property like this:
var childs = this.get("context.content.childs");
then I get an enumerable with the right number of childs, but the child all have undefined properties.
update
Seems like the only place where I can get to a child with App.MyChild.find(someId) is in the browser console, in my app code I only get objects with undefined properties.
I'm puzzled!
To access the childs property, try something like this:
var childs = this.get("context.content.childs");
Also, the fixture data for associations should not use _id or _ids. So use childs and parent instead:
App.MyParent.FIXTURES = [
{ id: 0, title: "some title", childs: [0,2,3] },
];
App.MyChild.FIXTURES = [
{ id: 0, name: "some name", parent: 0 },
{ id: 2, name: "other name", parent: 0 },
{ id: 3, name: "diff name", parent: 0 },
];
http://jsbin.com/ucanam/316/