I've been wondering for some long time, how can I filter something like this. Here is my situation:
I have one JSON table like this:
var cars = [{
"id": 1,
"brand": "Ford",
"model": "Focus",
"generation": "2.0TDCi",
"version": "hatchback, 3 drzwi",
"mileage": 100,},{
"id": 2,
"brand": "Volkswagen",
"model": "Golf",
"generation": "III",
"version": " 1.9 TDI, hatchback, 4 drzwi",
"mileage": 14,}];
And I'm using this kind of generating table using data from JSON:
<tr data-ng-repeat="car in cars" (...)
I've also have a dropdown with multiselection:
<div ng-dropdown-multiselect="" options="exampleBrand" selected-model="exampleBrandModel" extra-settings="exampleSettings"></div>
Things which are imported into this selector are from JSON file:
$scope.exampleBrand = [{id: 1, label: "Ford"}, {id: 2, label: "Ferrari"}, {id: 3, label:"Suzuki"},
{id: 4, label:"Fiat"}, {id: 5, label:"Aston Martin"}, {id: 6, label:"Opel"}];
The model of thing which are selected lands here:
$scope.exampleBrandModel = [];
For example if I select "Ford", the JSON file with model looks like this (checked with
{{ exampleBrandModel| json }}
):
[
{
"id": "Ford"
}
]
And my question is. How can I use angular's filter option to make it working?
I was using something like that which was not working:
<tr data-ng-repeat="car in cars |filter: {exampleBrandModel : id}">
I want to have situation like this:
At start I get whole table with cars listed in and then I select "Ford". Now every row in table without "Ford" word should be filtered out.
Do someone know how can I do that?
Related
So I have a bit of a dilemma. I am creating a forum and I am calling 3 different API's. Suppose I have multiple JSONs:
let forumPost= [{
"userId": 1,
"postId": 1,
"postTitle": "I am the post title",
"postBody": "I am the post body"
}]
let forumUser= [{
"userId": 1,
"name": "Someone Someone",
"username": "Som",
}]
let forumComment = [{
"postId": 7,
"userId" : 10,
"body": "I don't like your post",
}]
I would now like to create something like this:
Post title
Post body
By user
-------------
CommentUser: CommentBody
CommentUser: CommentBody
In order to do this I am currently sort of doing nest mapping 3 times 3 different arrays of objects and comparing id's so:
forumPost.map(...
forumUser.map(...
forumComment.filter(...
(post.userId === user.userId){
<div>...</div>
}
I was wondering if there is a more efficient way of mapping and comparing multiple nested objects in vanilla ReactJS?
I have an Antd Table, with data coming from axios API
"data": [
{
"id": 1,
"name": "Package 1",
"services": [
{
"id": 1,
"name": "Evaluation Core",
}
]
},
{
"id": 2,
"name": "Package 2",
"services": [
{
"id": 1,
"name": "Evaluation BizCore",
},
{
"id": 2,
"name": "Certification Fizz"
}
]
}
],
"meta": {
"current_page": 1,
"last_page": 1,
"per_page": 20,
"total": 2,
"total_results": 2
}
}
In this Table I'm rendering one column with the name of the Package, and the second column I need to render any name property inside the Services array. That columns has this dataindex:
dataIndex: ['services', 'name'],
If there is more then one property name, should be render separated with ",". I tried differents approaches,but nothing seems to work.
Thanks!!
If I understand correctly you want to render a Services column where each package may have a different amount of services. Each service has a name and you want to display the name property of all services for package aggregated. e.g. Package has Service 1 and Service 2 and it should be displayed Service 1,Service 2.
The simple answer is to use render. The column for Services can look like.
{
title: "Services",
dataIndex: "services",
render: (services) => services.map(service => service.name).join(),
key: "services"
}
https://codesandbox.io/s/basic-antd-4-16-3-forked-q6ffo?file=/index.js
Please comment if this was not the intended result.
I'm trying to preselect options on my multiselect. In order to make my case clear, I've made a JSFiddle.
<select ng-model="properties" id="props" multiple
ng-options="option.name group by option.category for option in options"></select>
Unfortunately, I am bound by the way the object is received, so I guess I need the ng-options attribute.
Does anybody have an idea how I can get both 'Captain America' and 'Dr. Doom' selected on load?
Try changing your controller code to:
function TestCtrl($scope) {
var myOptions = [{
"id": "4",
"name": "Captain America",
"categoryId": "1",
"category": "Heroes"
}, {
"id": "5",
"name": "Iron Man",
"categoryId": "1",
"category": "Heroes"
}, {
"id": "10",
"name": "Magneto",
"categoryId": "2",
"category": "Vilains"
}, {
"id": "9",
"name": "Dr. Doom",
"categoryId": "2",
"category": "Vilains"
}];
$scope.options = myOptions;
$scope.properties = [myOptions[0], myOptions[3]];
}
Explanation: you are setting your selected options (properties) to different instances of the objects than the ones that compose the full list. Use the same object references as shown above.
You are super close, two changes. Define the attributes in your controller like this
$scope.properties = ["Captain America", "Dr. Doom"];
And add a small piece to your ng-options like this
ng-options="option.name as option.name group by option.category for option in options"
Your option.name as will determine what the saved feature looks like in $scope.properties
I have this one level tree situation:
<select ng-model="tipost"
ng-options="tip.DESC group by tip.TIPIS for tip in tipall"><br>
</select>
where the json is:
[
{"ID":"1", "IDPARENT":"0", "TIPIS":"", "DESC":"GroupName1"},
{"ID":"2", "IDPARENT":"1", "TIPIS":"GroupName1", "DESC":"CHILDNAME1"},
{"ID":"3", "IDPARENT":"0", "TIPIS":"", "DESC":"GroupName2"}
]
the problem is that this creates the optgroups with their children but repeats
the roots too:
- GroupName1
- GroupName2
[ GroupName1 ]
- CHILDNAME1
[ GroupName2 ]
i want to produce:
[ GroupName1 ]
- CHILDNAME1
[ GroupName2 ]
The grouping doesn't quite work like that, if you change your json to something like this:
[
{"ID":"1", "TIPIS":"GroupName1", "DESC":"name"},
{"ID":"2", "TIPIS":"GroupName1", "DESC":"name1"},
{"ID":"3", "TIPIS":"GroupName2", "DESC":"name2"},
{"ID":"4", "TIPIS":"GroupName1", "DESC":"name3"},
]
Then you'll get the grouping the way you want
jsFiddle: http://jsfiddle.net/rtCP3/182/
The simple drop down that can display items with and without groups, and also you can set some items as disabled: Here is plunk: https://plnkr.co/edit/uhsn4lmzssi6rrijPEAp?p=preview
<select ng-model="ddl.selected"
ng-options="item.id as item.text group by item.groupName disable when item.enabled===false for item in ddl.items"></select>
I was searching for same question and found better answer. One can use function to return data as he needs, like in query below getGarageName
ng-options="car.id as car.name + ' (' + car.color + ')' group by getGarageName(car.garageId) for car in cars"
// this is the data
cars = [
{"id": 1, "name": "Diablo", "color": "red", "garageId": 1},
{"id": 2, "name": "Countach", "color": "white", "garageId": 1},
{"id": 3, "name": "Clio", "color": "silver", "garageId": 2},
...
]
garages = [
{"id": 1, "name": "Super Garage Deluxe"},
{"id": 2, "name": "Toms Eastside"},
...
]
http://www.wenda.io/questions/2597799/angular-js-select-with-ngoptions-label-the-optgroup.html
Suppose I have a collection like:
{
"id": 1,
"name": "jonas",
},
{
"id": 2,
"name": "jonas",
},
{
"id":3,
"name": "smirk",
}
How do I get :
Number of distinct names, like in this case, 2
The distinct names, in this case, jonas and smirk ?
With some Backbone and Underscore magic, combining collection.pluck and _.uniq:
pluck collection.pluck(attribute)
Pluck an attribute from each model in the collection. Equivalent to calling map, and returning a single attribute from the iterator.
uniq _.uniq(array, [isSorted], [iterator])
Produces a duplicate-free version of the array, using === to test object equality.
[...]
var c = new Backbone.Collection([
{id: 1, name: "jonas"},
{id: 2, name: "jonas"},
{id: 3, name: "smirk"}
]);
var names = _.uniq(c.pluck('name'));
console.log(names.length);
console.log(names);
And a demo http://jsfiddle.net/nikoshr/PSFXg/