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>
Related
I wanna show a category hierarchy data and I use angularJS with ng-repeat and ng-if.Here's to my demo file:
<div ng-app="" ng-controller="DanhMucController">
<ul>
<li ng-repeat="danhmuc in DanhMucList" ng-if="danhmuc.depended==0">{{danhmuc.name}}
<ul>
<li ng-repeat="danhmuc in DanhMucList" ng-if="danhmuc.depended==2">
{{danhmuc.name}}
<ul ng-repeat="danhmuc in DanhMucList" ng-if="danhmuc.depended==4">
<li>{{danhmuc.name}}</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
controller:
<script>
function DanhMucController($scope, $http) {
var url = "category.txt";
$http.get(url).success(function(response) {
$scope.DanhMucList = response;
});
}
</script>
this file category data :
[{
"id": "1",
"name": "Parent1",
"depended": "0"
}, {
"id": "2",
"name": "Parent2",
"depended": "0"
}, {
"id": "3",
"name": "Parent3",
"depended": "0"
}, {
"id": "4",
"name": "ChildA",
"depended": "1"
}, {
"id": "5",
"name": "ChildB",
"depended": "2"
}, {
"id": "6",
"name": "ChildC",
"depended": "3"
}, {
"id": "7",
"name": "grandChildA",
"depended": "4"
}, {
"id": "8",
"name": "grandChildB",
"depended": "5"
}, {
"id": "9",
"name": "grandChildC",
"depended": "6"
}, {
"id": "10",
"name": "grandChildD",
"depended": "5"
}, {
"id": "11",
"name": "grandChildE",
"depended": "6"
}, {
"id": "12",
"name": "grandChildF",
"depended": "3"
}]
category Image
But I can not define the id of parent so it dont show data which I need .It must display:
-Parent 1 contain ChildA.
-Parent 2 contain ChildB.
-Parent 3 contain ChildC.
Everyone can suggest me a solution for my issues. Thanks all
you can do something like this here.
I would suggest though you arrange your data better instead of looping over the same data 3 times.
I'm having the hardest time figuring out how to display the following JSON file in my Angularjs repeat.
for the following JSON results, I thought I could simply display the title in an ng-repeat with the following:
<div ng-repeat="x in results">
{{x.data[0].title}}
</div>
But I'm not seeing results.
Here is the JSON:
{
"data": [
{
"id": 1,
"title": "Temp Title",
"description": "Temp Description",
"created_at": {
"date": "2016-03-15 07:10:17.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"updated_at": {
"date": "2016-03-15 07:10:17.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"user": {
"data": {
"id": 29,
"displayName": "chris.nakea",
"email": "chris.nakea#freshconsulting.com",
"join_date": 1458025279,
"profile": {
"data": {
"id": 29,
"displayName": "chris.nakea",
"avatar": null,
"firstName": null,
"lastName": null,
"bio": null,
"city": null,
"zipcode": null,
"state": null,
"country": null,
"latitude": null,
"longitude": null,
"avatars": {
"data": [
{
"id": "default_avatar.png",
"filename": "default_avatar.png",
"url": "https://cdn.band.dev/common/images/common/default_avatar.png",
"created_at": {
"date": "2016-03-15 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"images": {
"small": "https://cdn.band.dev/common/images/common/default_avatar_small.png",
"medium": "https://cdn.band.dev/common/images/common/default_avatar_medium.png",
"large": "https://cdn.band.dev/common/images/common/default_avatar_large.png"
}
}
]
},
"coverPhotos": {
"data": []
}
}
}
}
},
"category": {
"data": {
"id": 2,
"name": "Staff / Events",
"description": "Staff / Events",
"colorCode": "#242156",
"iconName": "icon-staff-events",
"iconCharacterCode": "c108"
}
},
"attachments": {
"data": [
{
"id": "1d3f96e2286c27ee599c9e49a0c33da0",
"filename": "man.jpg",
"url": "https://api.band.dev/v1/file/1d3f96e2286c27ee599c9e49a0c33da0",
"created_at": {
"date": "2016-03-15 07:10:17.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"images": {
"small": "https://api.band.dev/v1/file/50af58b3d52d8629e9f5c4d0dcdd5181",
"medium": "https://api.band.dev/v1/file/51535d38f7b3cd82313eac2414059d83",
"large": "https://api.band.dev/v1/file/a7be1dada18e4041cf48aea377cafa29"
}
}
]
}
},
{
"id": 2,
"title": "Temp Title",
"description": "Temp Description",
"created_at": {
"date": "2016-03-15 07:12:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"updated_at": {
"date": "2016-03-15 07:12:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"user": {
"data": {
"id": 29,
"displayName": "chris.nakea",
"email": "chris.nakea#freshconsulting.com",
"join_date": 1458025279,
"profile": {
"data": {
"id": 29,
"displayName": "chris.nakea",
"avatar": null,
"firstName": null,
"lastName": null,
"bio": null,
"city": null,
"zipcode": null,
"state": null,
"country": null,
"latitude": null,
"longitude": null,
"avatars": {
"data": [
{
"id": "default_avatar.png",
"filename": "default_avatar.png",
"url": "https://cdn.band.dev/common/images/common/default_avatar.png",
"created_at": {
"date": "2016-03-15 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"images": {
"small": "https://cdn.band.dev/common/images/common/default_avatar_small.png",
"medium": "https://cdn.band.dev/common/images/common/default_avatar_medium.png",
"large": "https://cdn.band.dev/common/images/common/default_avatar_large.png"
}
}
]
},
"coverPhotos": {
"data": []
}
}
}
}
},
"category": {
"data": {
"id": 2,
"name": "Staff / Events",
"description": "Staff / Events",
"colorCode": "#242156",
"iconName": "icon-staff-events",
"iconCharacterCode": "c108"
}
},
"attachments": {
"data": [
{
"id": "a93cf8df7b60686e7ca6884d0ce353c8",
"filename": "man2.jpg",
"url": "https://api.band.dev/v1/file/a93cf8df7b60686e7ca6884d0ce353c8",
"created_at": {
"date": "2016-03-15 07:12:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"images": {
"small": "https://api.band.dev/v1/file/cd04551395a355f4792fb85833156741",
"medium": "https://api.band.dev/v1/file/4ff543cd8f5055bfecd703dedaee6d87",
"large": "https://api.band.dev/v1/file/5cdd9a0c3650228e0b93f9c6cd1404df"
}
}
]
}
}
]
}
You can just remove the datap[0] part and get the output
<div ng-repeat="x in results.data">
{{x.title}}
</div>
Output:
Temp Title
Temp Title
if you want to filter then you can do it by
<div ng-repeat="x in results.data | filter: { id: '1' }">
{{x.title}}
</div>
Output:
Temp Title
<div ng-repeat="item in data">{{item.title}}</div>
And in your controller, bind the json to the scope.
$scope.data = jsonData.data;
Here's a fiddle for you - jsFiddle
<div ng-repeat="x in results.data">
{{x.title}}
</div>
https://jsfiddle.net/nvqf8oo7/6/
Thank you all for responding. I finally figured out that the reason I wasn't seeing anything was because I am using ui.bootstrap's modal and I was out of scope.
I resolved this by moving the ng-repeat out of the modal, but I could have also tried to work with the modal scope itself.
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/
I'm trying to loop through a multi-dimensional array to get properties of products that are part of line items. They look basically like this: (I did a json_encode so it would be easier to read)
[{
"rcpt": "email#email.com",
"vars": [{
"name": "SYSTEM",
"content": "Bikes"
}, {
"name": "CUSTOMERSERVICE",
"content": "(855-553-4889)"
}, {
"name": "IMAGE",
"content": "http:\/\/www.url.com\/assets\/images\/chicago\/email\/dear_member.jpg"
}, {
"name": "LINKCOLOR",
"content": "#3db7e4"
}, {
"name": "FACEBOOK",
"content": "Bikes"
}, {
"name": "TWITTER",
"content": "Bikes"
}, {
"name": "INSTAGRAM",
"content": "Bikes"
}, {
"name": "CLOSING",
"content": "Greetings"
}, {
"name": "item",
"content": [{
"lineItem": 1,
"id": "3",
"name": "24-Hour Pass Gift Certificate",
"quantity": 2,
"nameShort": "24-Hour",
"type": "Gift Certificate",
"image": "24hour_blank.jpg",
"price": "9.95",
"total": "19.90",
"taxable": false,
"giftCertificates": {
"3204": {
"id": "3204",
"redemptionNumber": "xxxxx",
"type": "24-Hour"
},
"3205": {
"id": "3205",
"redemptionNumber": "xxxxx",
"type": "24-Hour"
}
}
}, {
"lineItem": 2,
"id": "1",
"name": "Annual Membership Gift Certificate",
"quantity": 2,
"nameShort": "Annual",
"type": "Gift Certificate",
"image": "annual_blank.jpg",
"price": "75.00",
"total": "150.00",
"taxable": false,
"giftCertificates": {
"892": {
"id": "892",
"redemptionNumber": "xxxxxx",
"type": "Annual"
},
"893": {
"id": "893",
"redemptionNumber": "xxxxx",
"type": "Annual"
}
}
}]
}, {
"name": "orderID",
"content": 1220
}, {
"name": "giftMessage",
"content": false
}, {
"name": "email",
"content": "email#email.com"
}, {
"name": "transactionDate",
"content": "12\/23\/2015"
}, {
"name": "transactionTime",
"content": "12:21 pm"
}, {
"name": "salesTaxTotal",
"content": 0
}, {
"name": "salesTaxRatePercent",
"content": "6.250"
}, {
"name": "TransactionAmount",
"content": "169.90"
}, {
"name": "account_number",
"content": "XXXX1111"
}, {
"name": "card_type",
"content": "Visa"
}, {
"name": "firstName",
"content": "tetete"
}, {
"name": "lastName",
"content": "tethuhhu"
}, {
"name": "address",
"content": "295 Place St"
}, {
"name": "city",
"content": "Brooklyn"
}, {
"name": "state",
"content": "NY"
}, {
"name": "zip",
"content": "11238"
}, {
"name": "country",
"content": "US"
}, {
"name": "phone",
"content": "8888888888"
}, {
"name": "transactionId",
"content": "xxxxxx"
}, {
"name": "shipToFirstName",
"content": "tetete"
}, {
"name": "shipToLastName",
"content": "tethuhhu"
}, {
"name": "shipToAaddress",
"content": "295 Place St"
}, {
"name": "shipToCity",
"content": "Brooklyn"
}, {
"name": "shipToState",
"content": "NY"
}, {
"name": "shipToZipCode",
"content": "11238"
}, {
"name": "ShipToCountry",
"content": "US"
}, {
"name": "ShipToCountry",
"content": "US"
}]
}]
So I am trying to get a print out of each gift certificate's type and redemption number. When I iterate through {{ giftCertificates }} like this:
{{#each giftCertificates}}
{{type}} {{redemptionNumber}}
{{/each}}
I get one of the line items but not the other. I'm guessing maybe it is being overwritten when it loops through again? But I have also tried to loop through {{ item }} and grab {{ giftCertificates.type }} and {{ giftCertificates.redemptionNumber }} and that does not work either. What is the correct way to get all of these from each line item?
Thanks for your help.
I know this is a very old question, but:
you can use {{this.proprietyName}} to get the type and number:
{{#each giftCertificates}}
{{this.892.type}}
{{/each}}
do not forget to add this to the mandrill message o
"merge": true,
"merge_language": "handlebars",
Also, the data structure is not ideal:
giftCertificates[
{
"id": "892",
"redemptionNumber": "xxxxxx",
"type": "Annual"
},
{
"id": "893",
"redemptionNumber": "xxxxxx",
"type": "Annual"
}
]
would be easier to handle.
I am sure I am missing some small detail. I have a factory which reads data from the server and retrieves JSON results. Then, in my controller I do the following:
.controller('homeController', ['$scope','RecentItems', function($scope,RecentItems)
{
//scopes for the items
$scope.items={};
RecentItems.getRecentItems().done(function(data){
$scope.items = data;
console.log($scope.items);
});
}])
In the HTML template i have an ng-repeat directive > ng-repeat="item in items"
And the results don't appear in the view. console.log($scope.items) displays the data in the console however, in the view the items appears to be empty.
I know that it has to do with the variable scopes in JavaScript rather than being an AngularJS problem
THIS IS THE JSON RESULT:
[
{
"iid": "32",
"name": "Womens bag 2",
"brand": "Gucci",
"category": "Handtaschen",
"minprice": "20",
"retailprice": "400",
"duedate": "2015-06-10 21:25:00",
"description": "second bag",
"img": "images/items/1433274066696.jpg",
"current_price": "0"
},
{
"iid": "31",
"name": "Womens Bag",
"brand": "Gucci",
"category": "Handtaschen",
"minprice": "20",
"retailprice": "300",
"duedate": "2015-06-10 21:25:00",
"description": "Bag",
"img": "images/items/1433274042147.jpg",
"current_price": "0"
},
{
"iid": "30",
"name": "Watch2",
"brand": "Swiss",
"category": "Uhren",
"minprice": "20",
"retailprice": "200",
"duedate": "2015-06-10 21:25:00",
"description": "watch to test",
"img": "images/items/1433273997525.png",
"current_price": "0"
},
{
"iid": "29",
"name": "Watch",
"brand": "Swiss",
"category": "Uhren",
"minprice": "10",
"retailprice": "200",
"duedate": "2015-06-10 21:25:00",
"description": "Test",
"img": "images/items/1433273879811.png",
"current_price": "0"
}
]