I have an JSON object like this
$scope.list = [{
"ID": 1,
"Name": "NAME1",
"Category": "Category1",
"Code": "Code1"
}, {
"ID": 2,
"Name": "NAME2",
"Category": "Category1",
"Code": "Code2"
}, {
"ID": 3,
"Name": "NAME3",
"Category": "Category1",
"Code": "Code3"
}, {
"ID": 4,
"Name": "NAME4",
"Category": "Category3",
"Code": "Code4"
}, {
"ID": 5,
"Name": "NAME5",
"Category": "Category3",
"Code": "Code5"
}]
And I have just one input. I want to filter the ng repetive directive with only the objects that have values similar to "Name" or "Category" properties. How can I do that? For example:
<input type="text" ng-model="searchText">
<div ng-repeat="obj in list | filter:{Name:searchText.name}"
| filter:{Category:searchText.category}">
</div>
I dont want to search by Code propertie.
Thanks
You can have a model variable and use it for filter,
DEMO
angular.module('myApp', [])
.controller('myCtrl', function($scope){
$scope.list = [{
"ID": 1,
"Name": "NAME1",
"Category": "Category1",
"Code": "Code1"
}, {
"ID": 2,
"Name": "NAME2",
"Category": "Category1",
"Code": "Code2"
}, {
"ID": 3,
"Name": "NAME3",
"Category": "Category1",
"Code": "Code3"
}, {
"ID": 4,
"Name": "NAME4",
"Category": "Category3",
"Code": "Code4"
}, {
"ID": 5,
"Name": "NAME5",
"Category": "Category3",
"Code": "Code5"
}];
$scope.search = function (row) {
return (angular.lowercase(row.Name).indexOf($scope.searchText || '') !== -1 || angular.lowercase(row.Category).indexOf($scope.searchText || '') !== -1);
};
});
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller='myCtrl'>
Search: <input ng-model="searchText">
<table id="searchTextResults">
<tr><th>Name</th><th>Category</th></tr>
<tr ng-repeat="item in list | filter:search">
<td>{{item.Name}}</td>
<td>{{item.Category}}</td>
</tr>
</table>
</body>
</html>
Related
I am trying to get "children" object from nested array, well, the problem is how to pull "childrens" and display them in dropdown options? For example:
[
{
"id": 1,
"name": "someName",
"children": [
{
"id": 2,
"name": "children_lvl_1",
"children": [
{
"id": 3,
"name": "children_lvl_2",
}
]
"children": [
{
"id": 4,
"name": "children_lvl_3",
}
]
}
]
}
]
The original idea is to get something like here:
https://embed.plnkr.co/plunk/Vn1zH5
So far I tried something like below, that wasnt writen by me.
Data.post('documentCategories/read', {}).then(function(results) {
if (results.status === "success") {
$scope.model.categories = parseCategories(results.data, -1, $scope.tag);
$scope.model.categoryTree = results.data;
var obj = $scope.model.categoryTree = results.data;
// console.log($scope.model.categoryTree);
const node = getNode($scope.model.categoryTree, $scope.document.category_id);
if (node) {
parseExpirationRanges(node);
$scope.model.categoryTags.splice(0, $scope.model.categoryTags.length);
$scope.model.categoryTags = node.categoryTags.slice();
}
}
if (results.status === "error") {
$.notify(results.message, "error");
}
return 0;
});
<div class="form-group">
<label class="col-sm-4 control-label no-padding-right">Categorys</label>
<div class="col-sm-8">
<span class="block input-icon input-icon-right">
<select ng-model="document.category" class="form-control"
ng-options="category as category.name for category in model.categoryTree" required></select>
</span>
</div>
</div>
Any fresh ideas are welcome.
Tnx
Have ng-model for each select and in ng-options of second and third select iterate through .children of previous select's model variable
<select ng-model="select1" ng-options="node as node.name for node in data"></select>
<select ng-model="select2" ng-options="node as node.name for node in select1.children"></select>
<select ng-model="select3" ng-options="node as node.name for node in select2.children"></select>
angular.module('app', []).controller("ctrl", function ($scope) {
$scope.data = [{
"id": 1,
"name": "Lvl1 Example 1",
"children": [{
"id": 4,
"name": "Lvl2 Example 4",
"children": [{
"id": 8,
"name": "Lvl3 Example 8",
}]
},
{
"id": 5,
"name": "Lvl2 Example 5",
"children": [{
"id": 9,
"name": "Lvl3 Example 9",
}]
}
]
},
{
"id": 2,
"name": "Lvl1 Example 2",
"children": [{
"id": 6,
"name": "Lvl2 Example 6",
"children": [{
"id": 10,
"name": "Lvl3 Example 10",
}]
}]
},
{
"id": 3,
"name": "Lvl1 Example 3",
"children": [{
"id": 7,
"name": "Lvl2 Example 7",
"children": [{
"id": 11,
"name": "Lvl3 Example 11",
}]
}]
}
]
});
<div ng-app="app" ng-controller="ctrl">
<select ng-model="select1" ng-options="node as node.name for node in data"></select>
<select ng-model="select2" ng-options="node as node.name for node in select1.children"></select>
<select ng-model="select3" ng-options="node as node.name for node in select2.children"></select>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
I have angular 8 frontends and node js is a backend
I fetched multiple table results in a single function with sequelize package.
below I mention the result JSON from the backend...
{
"filtergroups": [
{
"id": 1,
"name": "Ram",
"subcatId": "1",
"childcatId": 1,
"createdAt": "2019-11-13T00:00:00.000Z",
"updatedAt": "2019-11-13T00:00:00.000Z",
"filters": [
{
"id": 1,
"name": "2 GB",
"filterGroupId": "1",
"productId": "1",
"createdAt": "2019-11-19T00:00:00.000Z",
"updatedAt": "2019-11-27T00:00:00.000Z"
}
]
},
{
"id": 2,
"name": "Internal Storage",
"subcatId": "1",
"childcatId": 1,
"createdAt": "2019-11-05T00:00:00.000Z",
"updatedAt": "2019-11-24T00:00:00.000Z",
"filters": [
{
"id": 2,
"name": "8 GB",
"filterGroupId": "2",
"productId": "1",
"createdAt": "2019-11-20T00:00:00.000Z",
"updatedAt": "2019-11-20T00:00:00.000Z"
}
]
}
],
"products": [
{
"id": 1,
"name": "A7",
"childcatId": "1",
"subcatId": "1",
"price": 18000,
"mrp": 21000,
"discription": "sfhshsfhsf",
"image": "http://bestjquery.com/tutorial/product-grid/demo3/images/img-7.jpeg",
"createdAt": "2019-11-13T00:00:00.000Z",
"updatedAt": "2019-11-14T02:00:00.000Z"
},
{
"id": 2,
"name": "A8",
"childcatId": "1",
"subcatId": "1",
"price": 22000,
"mrp": 25000,
"discription": "7578",
"image": "http://bestjquery.com/tutorial/product-grid/demo3/images/img-8.jpeg",
"createdAt": "2019-11-20T00:00:00.000Z",
"updatedAt": "2019-11-21T00:00:00.000Z"
},
{
"id": 3,
"name": "Woodland",
"childcatId": "2",
"subcatId": "1",
"price": 2500,
"mrp": 2800,
"discription": "7575",
"image": "http://bestjquery.com/tutorial/product-grid/demo3/images/img-7.jpeg",
"createdAt": "2019-11-20T00:00:00.000Z",
"updatedAt": "2019-11-13T00:00:00.000Z"
}
]
}
This JSON I am getting an error in display section like
CategoryComponent.html:53 ERROR Error: Error trying to diff '[object
Object]'. Only arrays and iterables are allowed
service.ts
getAllProduct(): Observable<Filter_group[]>{
let params_url = new HttpParams().set('fil_outlet',this.name);
console.log('new my ss--',this.name);
return this.http.get<Filter_group[]>("http://localhost:4500/mobile_store");
};
my component.ts
this.route.queryParams.subscribe(params => {
this.subcat = params ['=='];
this.childcat = params ['fil_outlet'];
if (this.subcat){
this.categoryService.getAllProduct().subscribe((filter_groups: Filter_group[]) => {
this.filter_groups = filter_groups;
console.log('new Query Params:', filter_groups);
});
}
});
Error its
component.html
<mat-accordion multi="true" *ngFor="let filter_group of filter_groups">
<mat-expansion-panel>
<mat-expansion-panel-header >
{{filter_group.name}}
</mat-expansion-panel-header>
<p >name</p>
</mat-expansion-panel>
</mat-accordion> <!-- filter-group .// -->
<div class="col-md-3 col-sm-6" *ngFor="let product of products">
<div class="product-grid2">
<div class="product-image2">
<a routerLink="/categories">
<img class="pic-1" src="{{product.image}}">
<img class="pic-2" src="{{product.image}}">
</a>
<ul class="social">
<li><a routerLink="/products" data-tip="Quick View"><i class="fa fa-eye"></i></a></li>
<li><i class="fa fa-shopping-bag"></i></li>
</ul>
<span class="product-discount-label">40%</span>
<a class="add-to-cart" href="">Add to cart</a>
</div>
<div class="product-content">
<h3 class="title"><a routerLink="/categories">{{product.name}}</a></h3>
<div class="price">
{{product.price}}
<span>{{product.mrp}}</span>
</div>
You are taking up the full object which has both filter_groups and products and trying to loop it. Angular loops through arrays not objects.
You need to change your code in your subscription
this.categoryService.getAllProduct().subscribe((data: Filter_group) => {
this.filter_groups = data.filtergroups;
this.products = data.products;
console.log('filter group:', filter_groups );
console.log('products:', products);
});
How Display stores,bookmarks,favorites using below JSON Data
JSON data (vm.bookmarks):
[
{
"category": "stores",
"title": "store1",
"link": "http://www.store1.com",
},
{
"category": "stores",
"title": "store1",
"link": "http://www.store2.com",
},
{
"category": "bookmarks",
"title": "bookmark1",
"link": "http://www.bookmark1.com",
},
{
"category": "bookmarks",
"title": "bookmark2",
"link": "http://www.bookmark2.com",
},
{
"category": "bookmarks",
"title": "bookmark3",
"link": "http://www.bookmark3.com",
},
{
"category": "favorites",
"title": "favorites1",
"link": "http://www.favorites1.com",
},
{
"category": "favorites",
"title": "favorites2",
"link": "http://www.favorites2.com",
}
]
I want to list only categories' names using ng-repeat:
<div ng-repeat="item in vm.bookmarks|groupBy:'category'">
<h2>{{item.category}}</h2>
</div>
I want this to be displayed:
stores
bookmarks
favorites
But it displays nothing! What am I doing wrong?
P.S
I was using filters without injecting anything, like this:
<div ng-repeat="item in vm.bookmarks|filter:{category:'flyers'}" >
{{item.title}}
</div>
Not sure if I need to inject angular-filter to use groupBy filter - why?
You do not need to use (key, value) , also you need to inject angular.filter as dependency
var MyApp = angular.module("MyApp",['angular.filter']);
<ul class="nav nav-tabs" data-tabs="tabs"
ng-repeat="bookmark in vm.bookmarks|groupBy:'category'">
<li>{{bookmark.category}}</li>
</ul>
DEMO
var app = angular.module("myApp", ['angular.filter']);
app.controller("SimpleController", function($scope) {
this.bookmarks = [
{
"category": "stores",
"title": "store1",
"link": "http://www.store1.com",
},
{
"category": "stores",
"title": "store1",
"link": "http://www.store2.com",
},
{
"category": "bookmarks",
"title": "bookmark1",
"link": "http://www.bookmark1.com",
},
{
"category": "bookmarks",
"title": "bookmark2",
"link": "http://www.bookmark2.com",
},
{
"category": "bookmarks",
"title": "bookmark3",
"link": "http://www.bookmark3.com",
},
{
"category": "favorites",
"title": "favorites1",
"link": "http://www.favorites1.com",
},
{
"category": "favorites",
"title": "favorites2",
"link": "http://www.favorites2.com",
}
];
var vm = this;
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js" > </script>
<body ng-app="myApp">
<div>
<div data-ng-controller="SimpleController as vm">
<ul class="nav nav-tabs" data-tabs="tabs"
ng-repeat="(key, value) in (vm.bookmarks|groupBy:'category')">
<div ng-repeat="cat in value | unique:'category' ">
<h1> {{cat.category}}</h1>
</div>
</ul>
</div>
</div>
</body>
</html>
i have object value in JSON, within which it contains array.i am trying to group the subdocument but does not work. my plunk
The below is my controller code.
Controller
app.controller('MainCtrl', function($scope) {
$scope.list = {
"_id": "56c4758af801160e00d176e0",
"orderfood": [
{
"_id": "569d84f04834c10e003dff36",
"qty": "1",
"confirm": "placed",
"price": 125,
"name": "Paneer Tikka"
},
{
"_id": "569d869fff1fe20e00f8ba9b",
"qty": "1",
"confirm": "placed",
"price": 85,
"name": "Falooda"
},
{
"_id": "569d869fff1fe20e00f8ba9b",
"qty": "1",
"confirm": "placed",
"price": 85,
"name": "Falooda"
}
],
"title": "Status",
"created": "2016-02-17T13:28:42.226Z"
}
});
The below is my HTML code
HTML
<p ng-repeat="(key,value) in list.orderfood | groupBy:'name'">
{{key}}
</p>
my plunk
Dont know what you want your ouput to be but you need to do this with a custom function:
<div ng-app ng-controller="Main">
<div ng-repeat="list in itemsToFilter() | filter:filterNames">
<b>{{list.name}}</b>
<li ng-repeat="item in itemsToFilter() | filter: {name: list.name}">NAME: {{item.name}}- PRICE: {{item.price}}, etc...</li>
</div>
</div>
Then in your controller:
function Main($scope) {
$scope.list = {
"_id": "56c4758af801160e00d176e0",
"orderfood": [
{
"_id": "569d84f04834c10e003dff36",
"qty": "1",
"confirm": "placed",
"price": 125,
"name": "Paneer Tikka"
},
{
"_id": "569d869fff1fe20e00f8ba9b",
"qty": "1",
"confirm": "placed",
"price": 85,
"name": "Falooda"
},
{
"_id": "569d869fff1fe20e00f8ba9b",
"qty": "1",
"confirm": "placed",
"price": 85,
"name": "Falooda"
}
],
"title": "Status",
"created": "2016-02-17T13:28:42.226Z"
}
var indexedTeams = [];
$scope.itemsToFilter = function() {
indexedTeams = [];
return $scope.list.orderfood;
}
$scope.filterNames = function(item) {
var nameIsNew = indexedTeams.indexOf(item.name) == -1;
if (nameIsNew) {
indexedTeams.push(item.name);
}
return nameIsNew;
}
}
here is a link...js-fiddle exmple: http://jsfiddle.net/L6cQN/305/
So I made a webshop with firebase, and I want each product to have its own review section, and to keep it optimized I have to keep my data as flat as possible.
Consider this database structure
Lets say, after I repeat my 7 products. I want to repeat all their corresponding reviews in them, I'm new to angular & really can't figure it out.
Check out this jsfiddle which is an example of my data & lays down what I want to achieve.
// the main (app) module
var myApp = angular.module("myApp", []);
// add a controller
myApp.controller("showProducts", function($scope) {
//Products
$scope.products = [{
"brand": "Apple",
"id": 0,
"img": "img/macbook.png",
"model": 2015,
"name": "Macbook 13'",
"operatingSystem": "OS X",
"price": "1900"
}, {
"brand": "Google",
"id": 1,
"img": "img/chromebook.png",
"model": "Pixel 2",
"name": "Chromebook",
"operatingSystem": "Chrome OS",
"price": "1700"
}, {
"brand": "Dell",
"id": 2,
"img": "img/dellxps13.png",
"model": "XPS13",
"name": "Dell XP13",
"operatingSystem": "Win 10",
"price": "1500"
}, {
"brand": "Lenovo",
"id": 3,
"img": "img/lenovo.png",
"model": "A2",
"name": "Lenovo A2",
"operatingSystem": "Win 7",
"price": "999"
}, {
"brand": "Sony",
"id": 4,
"img": "img/vaio.png",
"model": "VAIO",
"name": "Sony vaio",
"operatingSystem": "Win 8.0",
"price": "1200"
}, {
"brand": "Acer",
"id": 5,
"img": "img/acer.png",
"model": "a7",
"name": "Acer A7",
"operatingSystem": "Win 8.1",
"price": "1199"
}, {
"brand": "AW",
"id": 6,
"img": "http://gearnuke.com/wp-content/uploads/2015/07/alienware-1-1.jpg",
"model": "5A",
"name": "Alienware",
"operatingSystem": "Windows 10",
"price": "5000"
}];
//Reviews
$scope.reviews = [{
"-K1bfGsnWOclf1R85Uec": {
"comment": "This laptop is great",
"rating": "5",
"user": "Maryam"
}
}, {
"-K1bg0wHIUQ9qbxspLmg": {
"comment": "This laptop is working good so far!",
"rating": "4",
"user": "spongbob"
},
"-K1bzqAQpr1br6h04bSH": {
"comment": "some comment",
"rating": "10",
"user": "test"
}
}, {
"-K1bfvS9MYGE82nTx67r": {
"comment": "This laptop is meh",
"rating": "3",
"user": "superman"
}
}, {
"-K1bgSTfbjQ-LRDScH-3": {
"comment": "daym son",
"rating": "10",
"user": "Omar"
}
}, {
"-K1bgljvaeY94E_aPQvY": {
"comment": "commenthere",
"rating": "10",
"user": "pewdiepie"
}
}, {
"-K1bgmXWai9PDake2Wh1": {
"comment": "commenthere",
"rating": "10",
"user": "tiesto"
}
}, {
"-K1bgnMlsp_Dl5ooBl2G": {
"comment": "commenthere",
"rating": "10",
"user": "ex-gf"
},
"-K1gxHCtPdEniOGNFcWi": {
"comment": "idk",
"rating": 3,
"user": "idk"
}
}];
});
.card {
margin: 1% 1% 1% 1%;
padding: 1% 1% 1% 1%;
width: 250px;
height: 150px;
overflow-y: auto;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="showProducts">
<div class="card" ng-repeat="product in products">
<h5>{{ product.name }}</h5>
</div>
<div ng-repeat="review in reviews">
<div ng-repeat="(key, data) in review">User:{{ data.user }} | Comment:{{ data.comment }} | Rating:{{ data.rating }}</div>
</div>
</body>
At the bottom of my results, you will see all the comments. I have tried many things to get them in the right places without much success.
You can use $index to grab the correct list of reviews per product. You'll only need two ng-repeat.
// the main (app) module
var myApp = angular.module("myApp", []);
// add a controller
myApp.controller("showProducts", function($scope) {
//Products
$scope.products = [{
"brand": "Apple",
"id": 0,
"img": "img/macbook.png",
"model": 2015,
"name": "Macbook 13'",
"operatingSystem": "OS X",
"price": "1900"
}, {
"brand": "Google",
"id": 1,
"img": "img/chromebook.png",
"model": "Pixel 2",
"name": "Chromebook",
"operatingSystem": "Chrome OS",
"price": "1700"
}, {
"brand": "Dell",
"id": 2,
"img": "img/dellxps13.png",
"model": "XPS13",
"name": "Dell XP13",
"operatingSystem": "Win 10",
"price": "1500"
}, {
"brand": "Lenovo",
"id": 3,
"img": "img/lenovo.png",
"model": "A2",
"name": "Lenovo A2",
"operatingSystem": "Win 7",
"price": "999"
}, {
"brand": "Sony",
"id": 4,
"img": "img/vaio.png",
"model": "VAIO",
"name": "Sony vaio",
"operatingSystem": "Win 8.0",
"price": "1200"
}, {
"brand": "Acer",
"id": 5,
"img": "img/acer.png",
"model": "a7",
"name": "Acer A7",
"operatingSystem": "Win 8.1",
"price": "1199"
}, {
"brand": "AW",
"id": 6,
"img": "http://gearnuke.com/wp-content/uploads/2015/07/alienware-1-1.jpg",
"model": "5A",
"name": "Alienware",
"operatingSystem": "Windows 10",
"price": "5000"
}];
//Reviews
$scope.reviews = [{
"-K1bfGsnWOclf1R85Uec": {
"comment": "This laptop is great",
"rating": "5",
"user": "Maryam"
}
}, {
"-K1bg0wHIUQ9qbxspLmg": {
"comment": "This laptop is working good so far!",
"rating": "4",
"user": "spongbob"
},
"-K1bzqAQpr1br6h04bSH": {
"comment": "some comment",
"rating": "10",
"user": "test"
}
}, {
"-K1bfvS9MYGE82nTx67r": {
"comment": "This laptop is meh",
"rating": "3",
"user": "superman"
}
}, {
"-K1bgSTfbjQ-LRDScH-3": {
"comment": "daym son",
"rating": "10",
"user": "Omar"
}
}, {
"-K1bgljvaeY94E_aPQvY": {
"comment": "commenthere",
"rating": "10",
"user": "pewdiepie"
}
}, {
"-K1bgmXWai9PDake2Wh1": {
"comment": "commenthere",
"rating": "10",
"user": "tiesto"
}
}, {
"-K1bgnMlsp_Dl5ooBl2G": {
"comment": "commenthere",
"rating": "10",
"user": "ex-gf"
},
"-K1gxHCtPdEniOGNFcWi": {
"comment": "idk",
"rating": 3,
"user": "idk"
}
}];
});
.card {
margin: 1% 1% 1% 1%;
padding: 1% 1% 1% 1%;
width: 250px;
height: 150px;
overflow-y: auto;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="showProducts">
<div class="card" ng-repeat="product in products">
<h5>{{ product.name }}</h5>
<div ng-repeat="(key, data) in reviews[$index]">User:{{ data.user }} | Comment:{{ data.comment }} | Rating:{{ data.rating }}</div>
</div>
</body>
I want to repeat all their corresponding reviews
There must be a relationship between your products and their reviews. So try to add product id to the reviews for mapping.
Once you have a mapping between product and their respective reviews you can for something like below with filter to achieve your functionality.
<div ng-repeat="product in products">
<div class="card"><h5>{{ product.name }}</h5></div>
<div ng-repeat="review in reviews | filter:{productId: product.id}"">
<div ng-repeat="(key, data) in review">User:{{ data.user }} | Comment:{{ data.comment }} | Rating:{{ data.rating }}</div>
</div>
</div>