I can accomplish what I need with filter/map and perhaps reduce, but I want to know - as it can be very nifty and succinct in accomplishing things... if I had an array of objects like so:
Please try do it through xorBy
> var arr = [
{name: "bill", id: 909},
{name: "tina", id: 444},
{name: "ron", id: 24},
{name: "paul", id: 4445}];
> var remove_arr = _.xorBy(arr, [{name: "ron", id: 24}], 'id');
> remove_arr
[{name: "bill", id: 909},
{name: "tina", id: 444},
{name: "paul", id: 4445}];
> var add_arr = _.xorBy(arr, [{name: "mary", id: 887}], 'id');
> add_arr
[{name: "bill", id: 909},
{name: "tina", id: 444},
{name: "ron", id: 24},
{name: "paul", id: 4445},
{name: "mary", id: 887}];
Related
I have an object that looks like this
category_1: [
[
id: 1,
name: 'Product 1',
tags: []
],
[
id: 2,
name: 'Product 2',
tags: []
]
],
category_2: [
[
id: 3,
name: 'Product 3',
tags: []
],
[
id: 4,
name: 'Product 4',
tags: ['blue']
],
[
id: 5,
name: 'Product 5',
tags: []
],
[
id: 6,
name: 'Product 6',
tags: ['blue']
]
]
and what I'm trying to do is grab everything in my category, for example category_2 and grab only the items that has blue in the tags.
This issue I'm having is that I get the first item and it just loops a couple of times with just that item.
Here is my code
getCategories(){
Object.keys(categories).forEach(category => {
if(category === 'category_2'){
categories[category].forEach(c => {
if(c.tags.includes('blue') === true){
this.categorydata.push(c)
}
});
}
})
}
First of all are you sure you want categories to be arrays of arrays? If you want items of categories to be objects instead of arrays than you are using the wrong notation. If you want your category to be consisted of objects and not arrays, change your code to this:
category_1: [
{ id: 1, name: "Product 1", tags: [] },
{ id: 2, name: "Product 2", tags: [] },
],
category_2: [
{ id: 3, name: "Product 3", tags: [] },
{ id: 4, name: "Product 4", tags: ["blue"] },
{ id: 5, name: "Product 5", tags: [] },
{ id: 6, name: "Product 6", tags: ["blue"] },
],
With that out of the way, you can do what you want using filter function.
Your code should look like this:
getCategories(categoryName, wantedTag){
return categories[categoryName].filter(item => item.tags.includes(wantedTag));
}
Tell a beginner web delepoer how to get all title from all objects in array
this is my array
0: {id: 6, category_id: 2, title: "Test", brand: "Test", serial_number: "2165412315864",…}
1: {id: 7, category_id: 3, title: "Test2", brand: "Test2", serial_number: "2165412315864",…}
2: {id: 8, category_id: 5, title: "New", brand: "New", serial_number: "2165412315864",…}
3: {id: 9, category_id: 1, title: "New2", brand: "New2", serial_number: "2165412315864",…}
Im try to use this code
categories: {
handler(categories) {
console.log('categories: ', categories[title]); //Debug
},
deep: true
}
If you want an array with just the titles you can use Array.map and pick the parts your interested in:
const arr = [{
id: 6,
category_id: 2,
title: "Test",
brand: "Test",
serial_number: "2165412315864"
},
{
id: 7,
category_id: 3,
title: "Test2",
brand: "Test2",
serial_number: "2165412315864"
},
{
id: 8,
category_id: 5,
title: "New",
brand: "New",
serial_number: "2165412315864"
},
{
id: 9,
category_id: 1,
title: "New2",
brand: "New2",
serial_number: "2165412315864"
}
];
const titles = arr.map(({ title }) => title);
console.log(titles);
The categories variable is actually an array here, so you can not use
categories['title']
// Or,
categories.title
here. To get all title property for each category inside the categories array you can use array .map() method like:
categories: {
handler(categories) {
const arr = categories.map(c => c.title)
console.log('titles: ', arr); //Debug
},
deep: true
}
Please help. I am stuck at this point for more then 14 hours and I can't find an explanation or an example.
This is what I have now:
http://plnkr.co/edit/PaYR7c0QXSKxl1jcmRBQ
If I don't use angular-routing, ngTable works correctly. As soon as I add routing, it gives this error.
The error disappears when I comment $scope.tableParams = new ngTableParams({
...but then the data is not showing.
The code that does not work:
var app = angular.module('main', [
'ngRoute',
'ngTable'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl: 'partial1.html', controller: 'MyCtrl1'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
app.controller('MyCtrl1', [function($scope,ngTableParams) {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length, // length of data
getData: function($defer, params) {
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
}]);
</script>
</head>
<body ng-app="main">
<div ng-view=""></div>
</body>
The HTML header should be corrected: (you were loading ngTable before angular)
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js#*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular-route.js"></script>
<script data-require="ng-table#*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
The controller declaration is a little off.
app.controller('MyCtrl1', ['$scope', 'ngTableParams', function MyCtrl1($scope, ngTableParams) {
Im trying to load data into a list using a store. When i run my code the list value is blank, the list is not empty but it is blank.
Here is the part of my controller where i try to add data to store.
var loginStore = Ext.getStore('instance');
var record = [{id:id, issued_at:issued, instance_url:instance, signature:sig, access_token:access, myBaseUri:baseUri}];
loginStore.add(record);
Here is the part of the view where i make the list
{
xtype :'list',
id : 'list1',
loadingText: 'Loading Projects',
emptyText: '<div>No Projects Found</div>',
onItemDisclosure: true,
itemTpl: '<div>{issued_at}</div>',
height: 320,
store : 'instance'
}
This doesnt work but when i replace itemTpl:'<div>{issued_at}</div>' with
itemTpl:'<div>{id}</div>'
it seems to work. What am I doing wrong?
Here is my store:
Ext.define('GS.store.instance',{
extend: 'Ext.data.Store',
requires: ['GS.model.login'],
config:{
model: 'GS.model.login'
}
});
And here is my model:
Ext.define('GS.model.login',{
extend: 'Ext.data.Model',
fields:[
{name: 'id', type: 'string'},
{name: 'issued_at', type:'string'},
{name: 'instance_url', type:'string'},
{name: 'signature', type:'string'},
{name: 'access_token', type:'string'},
{name: 'myBaseUri', type:'string'}
]
});
The way you create your record is wrong. Try this way :
var record = Ext.create('YOUR_MODEL', {
id : id,
issued_at: issued,
instance_url: instance,
...
});
Hope this helps.
Try it using this example:
Ext.define('Contact', {
extend: 'Ext.data.Model',
config: {
fields: ['firstName', 'lastName']
}
});
var store = Ext.create('Ext.data.Store', {
model: 'Contact',
},
data: [
{ firstName: 'Tommy', lastName: 'Maintz' },
{ firstName: 'Rob', lastName: 'Dougan' },
{ firstName: 'Ed', lastName: 'Spencer' },
{ firstName: 'Jamie', lastName: 'Avins' },
{ firstName: 'Aaron', lastName: 'Conran' },
{ firstName: 'Dave', lastName: 'Kaneda' },
{ firstName: 'Jacky', lastName: 'Nguyen' },
{ firstName: 'Abraham', lastName: 'Elias' },
{ firstName: 'Jay', lastName: 'Robinson'},
{ firstName: 'Nigel', lastName: 'White' },
{ firstName: 'Don', lastName: 'Griffin' },
{ firstName: 'Nico', lastName: 'Ferrero' },
{ firstName: 'Jason', lastName: 'Johnston'}
]
});
Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
store: store,
});
As you get values in the list when using id instead of issued_at, the problem seems to be, not with the functions/models/store so much, but with the issued_at variable itself. Are you certain it's getting through to the store?
Try adding this when your store has loaded, or run it in the browser using for instance chrome
console.log(Ext.getStore("instance").getAt(0).data.id);
console.log(Ext.getStore("instance").getAt(0).data.issued_at);
You should see some result from your first data item.
If you get an id but just "undefined" for issued_at, you'll know that the issue is with the records. And in that case I would try to log your issued variable before you try to add it to the store to make sure that it is actually defined.
Please report with results for further help/discussions if needed.
It turns out that i was missing the config option on my model definition.
Ext.define('GS.model.login',{
extend: 'Ext.data.Model',
config:{
fields:[ 'id','issued_at','instance_url','signature','access_token','myBaseUri' ]
}
});
I have the following store:
Ext.define('Sencha.store.AdultMenuStore', {
extend: 'Ext.data.Store',
config: {
onItemDisclosure: true,
model:'Sencha.model.MenuPoint',
data: [
{
id: 'addChild',
name: 'Add child',
icon_url: 'http://kidsparent.no/images/adultMenu/bkids-home-plussign.png',
xtype: 'addchildform'
},{
id: 'share',
name: 'Share',
icon_url: 'http://kidsparent.no/images/adultMenu/bkids-home-shareicon.png',
xtype: 'childmenu'
},{
id: 'myProfile',
name: 'My Profile',
icon_url: 'http://kidsparent.no/images/adultMenu/bkids-home-profile.png',
xtype: 'childmenu'
},{
id: 'help',
name: 'Help',
icon_url: 'http://kidsparent.no/images/adultMenu/bkids-home-question.png',
xtype: 'childmenu'
}]
}
});
Which uses the following model:
Ext.define('Sencha.model.MenuPoint', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'id', type: 'string'},
{name: 'name', type: 'string'},
{name: 'icon_url', type: 'string'},
{name: 'xtype', type: 'string'}
]
}
});
Some places in the code I add menu points dynamically like this:
var child = children[i];
var menuPoint = Ext.create('Sencha.model.MenuPoint', {id: child.childId, name: child.firstName, icon_url: 'aLink', xtype: 'childmenu'});
store.add(menuPoint);
And sometimes I need to clear the store, ergo remove the menu points I added dynamically and only use the menu points I hardcoded in the store. I see methods for removing and adding in the store, but I dont know how to reset the store and repopulate it with the static data I defined there.
do as I have answered on your prev question, which you did not respect :)
var data = [
{
id: 'addChild',
name: 'Add child',
icon_url: 'http://kidsparent.no/images/adultMenu/bkids-home-plussign.png',
xtype: 'addchildform'
},{
id: 'share',
name: 'Share',
icon_url: 'http://kidsparent.no/images/adultMenu/bkids-home-shareicon.png',
xtype: 'childmenu'
},{
id: 'myProfile',
name: 'My Profile',
icon_url: 'http://kidsparent.no/images/adultMenu/bkids-home-profile.png',
xtype: 'childmenu'
},{
id: 'help',
name: 'Help',
icon_url: 'http://kidsparent.no/images/adultMenu/bkids-home-question.png',
xtype: 'childmenu'
}]
store.load(function (store) {
store.add(data)// data is an array with you local data
})
store.load() function cleans up prev data
Cheers, Oleg