I'm currently working with two data models, where Foo has a "toMany" property of type Bars. I'm now trying to create two select boxes where when the first populated with Foo's is picked, it refines the second listing only the Bars associated with that foo.
JSFiddle Here: http://jsfiddle.net/drew/6jLCy/
Code below, but it certainly doesn't work. It does go as far as setting the SelectBox values for the first, but doesn't populate the second with the corresponding bar value titles.
App = Em.Application.create();
App.store = DS.Store.create({
revision: 7,
adapter: DS.fixtureAdapter
});
/**************************
* Models
**************************/
App.Foo = DS.Model.extend({
bars: DS.hasMany('App.Bar'),
title: DS.attr('string')
});
App.Bar = DS.Model.extend({
foos: DS.hasMany('App.Foo'),
title: DS.attr('string')
});
/**************************
* Fixtures
**************************/
App.Foo.FIXTURES = [
{
id: 0,
title: 'Footitle 1',
bars: [0,1]
},
{
id: 1,
title: 'Footitle 2',
bars: [0,1,2]
}
];
App.Bar.FIXTURES = [
{
id: 0,
title: 'Bartitle 1',
},{
id: 1,
title: 'Bartitle 2'
},{
id: 2,
title: 'Bartitle 3'
}
];
/**************************
* Views
**************************/
App.SetFooField = Em.Select.extend({
contentBinding: 'App.fooController',
valueBinding: 'content.selected',
optionLabelPath: 'content.title'
});
App.SetBarField = Em.Select.extend({
contentBinding: 'App.barController',
valueBinding: 'content.selected',
optionLabelPath: 'content.title'
});
/**************************
* Controllers
**************************/
App.fooController = Em.ArrayController.create({
content: App.store.findAll(App.Foo)
});
App.barController = Em.ArrayController.create({
contentBinding: 'App.fooController.selected.bars'
});
Markup for the html:
<script type="text/x-handlebars">
{{view App.SetFooField}}
{{view App.SetBarField}}
</script>
holy cow. after many days of going nearly nuts, it turns out this is entirely a bug in the latest ember-data. in fixtures, all ids need to be strings. just. plain. nuts.
/**************************
* Fixtures
**************************/
App.Foo.FIXTURES = [
{
id: '0',
title: 'Footitle 1',
bars: ['0','1']
},
{
id: '1',
title: 'Footitle 2',
bars: ['0','1','2']
}
];
App.Bar.FIXTURES = [
{
id: '0',
title: 'Bartitle 1',
},{
id: '1',
title: 'Bartitle 2'
},{
id: '2',
title: 'Bartitle 3'
}
];
failed to get embedded's object property using ember.js with ember-data
huge thanks to #dgeb for answering that question.
jsfiddle updated accordingly.
http://jsfiddle.net/drew/6jLCy/
Related
This question already has answers here:
How to map more than one property from an array of objects [duplicate]
(7 answers)
Closed last year.
I need to find first child element in array and just return it.
Here is problem because here is few children elements and i need loop thought each and return every first children element.
Example of array:
let allItems =
[{ id: 1 ,
name: 'Test 1' ,
children: [
id: 12,
title: 'Child element'
]
},
{
id: 2 ,
name: 'Test 2'
},
{
id: 3 ,
name: 'Test 3',
children: [
id: 12,
title: 'Child element',
children: [
id: 123,
title: 'GRAND Child element',
]
]
}]
What's the problem here? Since there can be many children elements, do I need to find a parent for each of those elements?
After looping i need array to be:
[{ id: 1 ,
name: 'Test 1'
},
{
id: 2 ,
name: 'Test 2'
},
{
id: 3 ,
name: 'Test 3'
}]
Wihout children elements.
What I am try:
allItems.map(item => item).filter(filteredItem => !filteredItem.children);
But this is no return me good results
Based on your expected output, here is my solution.
Also note, that you had missing curly braces with your children.
See you modified snippet below:
let allItems = [{
id: 1,
name: 'Test 1',
children: [{
id: 12,
title: 'Child element'
}]
},
{
id: 2,
name: 'Test 2'
},
{
id: 3,
name: 'Test 3',
children: [{
id: 12,
title: 'Child element',
children: [{
id: 123,
title: 'GRAND Child element',
}]
}]
}
]
console.log(allItems.map(item => {
return {
id: item.id,
name: item.name
}
}))
Using map and destructuring is a nice way to achieve what you're looking for
let allItems = [{
id: 1,
name: 'Test 1',
children: [{
id: 12,
title: 'Child element'
}]
},
{
id: 2,
name: 'Test 2'
},
{
id: 3,
name: 'Test 3',
children: [{
id: 12,
title: 'Child element',
children: [{
id: 123,
title: 'GRAND Child element',
}]
}]
}
];
const res = allItems.map(x => {
const {id, name} = x;
return {id, name};
});
console.log(res);
Use these propertys for call first child:
.firstchild==>this property calls first Node
.firstElementChild==>calls first element
I am new to Quasar and Vue. Could someone explain to me how to solve my task?
Briefly about the task:
(1) I have a q-tree element which represents the folder structure at the left side of a screen [ref.1]
(2) Here is a folder structure [ref.2]
(3) When the user clicks on any element in this folder structure, then he will see a new component on the right side with all children elements of clicked one in a grid layout.
This is what do I have now.
[ref.1] treeComponent.vue
<template>
<q-tree
:nodes="documents"
#click="getId"
node-key="id" >
</q-tree>
</template>
<script>
var documents = require('./documents')
module.exports = {
data: function () {
return {
selectedDoc: x,
documents: documents
}
},
methods: {
getId: function () {
const x = this.getNodeByKey('id')
consol.log(x)
}
}
}
</script>
[ref.2] documents.js
module.exports = [
{
id: '1',
label: 'My Documents',
icon: 'folder',
children: [
{
id: '01',
label: 'Dir 1',
children: [
{ id: '0001', label: 'Doc 1'},
{ id: '0002', label: 'Doc 2'}
]
},
{
id: '02',
label: 'Dir 2',
children: [
{ id: '0003', label: 'Doc 3'},
{ id: '0004', label: 'Doc 4'}
]
},
{
id: '103',
label: 'Dir 3',
children: [
{ id: '0005', label: 'Doc 5'},
{ id: '0006', label: 'Doc 6'},
{ id: '0007', label: 'Doc 7'}
]
}
]
}
]
you need to replace id by key.after this add this handler for each node
handler: (node) => this.onclick(node)
then add this method in methods
onclick(node) {
alert(node.key)
},
this will display id of perticular node
So, the main problem was related to not good enough acquainted with Quasar framework.
Here is my answer to this question:
<template>
<button v-on:click = "showNodeSelected">showClickedNode</button>
<q-tree
:nodes = "documents"
:selected.sync = "selected"
node-key="id"
/>
</template>
<script>
var documents = require('./documents')
module.exports = {
data: function () {
return {
selected: null,
documents: documents
}
},
methods: {
showNodeSelected: function () {
console.log(this.selected)
}
}
}
</script>
Response format:
const fakeDatabase = {
quizzes: [{
id: v4(),
title: 'Get started',
text: 'hey',
completed: true,
hints: [{
id: 1,
text: 'Hint 1'
}, {
id: 2,
text: 'Hint 2'
}]
}, {
id: v4(),
title: 'What are you waiting for?',
text: 'ho',
completed: true,
hints: [{
id: 3,
text: 'Hint 3'
}, {
id: 4,
text: 'Hint 4'
}]
}, {
id: v4(),
title: 'Remember! create more than you consume',
text: 'let’s go',
completed: false,
hints: [{
id: 5,
text: 'Hint 5'
}, {
id: 6,
text: 'Hint 6'
}]
}],
};
I have the following schema:
import { Schema, arrayOf } from 'normalizr';
export const hint = new Schema('hints');
export const quiz = new Schema('quizzes', {
hints: [ hint ]
});
export const arrayOfQuiz = arrayOf(quiz);
But after normalizing I get the following response:
normalize(response, schema.arrayOfQuiz)
So, basically my quiz is normalized properly but hints is kept as it is, I don't know if I am missing something.
It looks like you're using normalizr v2.x. Only in v3.0.0 was plain array syntaxt [ hint ] added. In v2.x, you need to use arrayOf(hint).
So I have little dilemma here. I have a nested json object that is inside ng-repeat and is sortable using AngularJS UI Sortable (based on JQuery UI Sortable):
$scope.rootItem = {
id: '1',
type: 'course',
title: 'Adobe Photoshop CC for beginners',
items: [{
id: '2',
type: 'label',
title:'label',
items:[{
id: '3',
type: 'module',
title:'Module title',
items: [{
id: '4',
type: 'topic',
title:'Topic title',
items: [{
id: '5',
type: 'content',
title:'Content title'
}, {
id: '6',
type: 'content',
title:'Content title'
}]
}]
},{
id: '7',
type: 'resources',
title:'Resources'
},{
id: '8',
type: 'module',
title:'Module title',
items: [{
id: '9',
type: 'topic',
title:'Topic',
items: [{
id: '10',
type: 'question',
title:'Question title'
}]
}, {
id: '11',
type: 'topic',
title:'Topic title',
items: [{
id: '12',
type: 'content',
title:'Content title'
}]
}]
}]
},{
id: '14',
type: 'assessmentLabel',
title: 'Assessment Label',
items: [{
id: '15',
type: 'assessment',
title: 'Assessment Title',
items: [{
id: '16',
type: 'courseAssessment',
title: 'Course Question Group',
items: []
}]
}]
}]
};
What I should be able to do is remove any of the items within this object, and if it has any children they need to be remove too.
So what I would generally think is passing either $index and use splice to remove it (if it was an array).
But for objects doesnt seem to work this way, I read online that delete should be used instead...
On my button I try to pass the object itself as in:
data-ng-click="removeItem(ngModelItem)"
and in my controller do something like this:
// Remove Item from the list
$scope.removeItem = function(item) {
};
Any suggestions?
Use ngModelItem
<li ng-repeat="innerItem in ngModelItem.items">
Delete me
in your controller,
$scope.deleteItem = function(collection, index){
collection.splice(index,1);
};
Demo
For removing json elements from a json object you use the delete operator. But in your case, I assume you want to remove a json object from a json array, so you should really use splice() instead.
You should receive both the list and the index in your removeItem() function so you can remove the indexed element and angularjs will update your view.
For some reason the code below results in Error while loading route: TypeError: Cannot read property 'typeKey' of undefined. Everything loads fine until I add the comments in the Note fixtures. I assume that having the comments nested in the note fixtures would work seeing as that is the way the API would return it, but that seems to be the break point.
** I should note that I have tried to add fixtures to the comments model and with a note_id referencing back to a note. I don't get an error, but I don't get any replies showing up**
Thanks for any help.
models/note.js
import DS from 'ember-data';
var Note = DS.Model.extend({
content: DS.attr('string'),
comments: DS.hasMany('comment'),
});
Note.reopenClass({
FIXTURES: [
{
id: 1,
content: 'This is the first comment',
comments: [
{ id: 1, content: 'First comment' },
{ id: 2, content: 'Second comment' },
{ id: 3, content: 'Third comment' }
]
},
{
id: 2,
content: 'This is the second comment',
comments: [
{ id: 4, content: 'First comment' },
{ id: 5, content: 'Second comment' },
{ id: 6, content: 'Third comment' }
]
}
]
});
export default Note;
templates/notes.hbs
{{#each}}
<div>
<div>{{content}}</div>
{{#each comments}}
{{this.content}}
{{/each}}
</div>
{{/each}}
models/comment.js
import DS from 'ember-data';
var Comment = DS.Model.extend({
content: DS.attr('string'),
timestamp: DS.attr('date'),
note: DS.belongsTo('note')
});
Comment.reopenClass({
FIXTURES: [
{ id: 1, content: 'First comment', note_id: 1 },
{ id: 2, content: 'Second comment', note_id: 1 },
{ id: 3, content: 'Third comment', note_id: 1 }
]
});
export default Comment;
Looks like I was missing a couple things.
need the async options in the relationships set to true
comments: DS.hasMany('comment', { async: true })
needed to set a relationship in the parent to the children
Note.reopenClass({
FIXTURES: [
{
id: 1,
content: 'This is the first comment',
comments: [1, 2, 3]
},
{
id: 2,
content: 'This is the second comment',
comments: [4, 5, 6]
}
]
});