We Keep Coding

Rivets.js IF object exist

I have a shopping cart from shopify. The object looks like this:
{
"attrs": {
"line_items": [
{
"image": {
"id": 19361216518,
"created_at": "2016-10-03T11:50:25-05:00",
"position": 1,
"updated_at": "2017-02-03T17:11:13-06:00",
"product_id": 8659646086,
"src": "https://cdn.shopify.com/s/files/1/1481/5646/products/watermain-box.jpg?v=1486163473",
"variant_ids": [
]
},
"image_variants": [
{
"name": "pico",
"dimension": "16x16",
"src": "https://cdn.shopify.com/s/files/1/1481/5646/products/watermain-box_pico.jpg?v=1486163473"
}
],
"variant_id": 30287712070,
"product_id": 8659646086,
"title": "Dome Water Main Shut Off Valve",
"quantity": 1,
"properties": {
},
"variant_title": "Default Title",
"price": "99.99",
"compare_at_price": null,
"grams": 0,
"shopify-buy-uuid": "shopify-buy.1494514993286.2"
}
],
"shopify-buy-uuid": "shopify-buy.1494514993286.1"
}
And a function that looks like this:
var updateCart = function() {
var cart = localStorage.getItem(domeCart).toJSON();
if (cart.lineItemCount != 0) {
var shoppingCart = document.getElementById('shopping-cart');
rivets.bind(shoppingCart,{cart:cart});
}
}
And a cart that looks like this:
<div id="shopping-cart">
<h3 class="empty-cart">Empty!</h3>
<div class="top-cart-items items">
<div class="top-cart-item clearfix">
<div class="top-cart-item-image">
<img src="images/shop/small/6.jpg" alt="Light Blue Denim Dress" />
</div>
<div class="top-cart-item-desc">
Light Blue Denim Dress
<span class="top-cart-item-price">$24.99</span>
<span class="top-cart-item-quantity">x 3</span>
</div>
</div>
</div>
<div class="top-cart-action clearfix">
<span class="fleft top-checkout-price">$114.95</span>
View Cart
</div>
</div>
I'm having trouble figuring out how I can use rivets to check if the object is empty or not and if it is empty put <h2>Shopping cart empty</h2> but if it isn't empty loop through all of the cart items and place the data in its respectable part of the markup.
I've looked through Rivets.js documentation and it the product doesn't seem well documented. Any help would be very much appreciated.

How do i list items(render) from a nested JSON response Angular.js

my home controller returns this, this is what i see on.
This lists the authors i have and the rating star, i wanted to include the titles of each authors. and i tried this but didn't work for me, what am i missing??
[
{
"_id": "58dd21c3cb77090b930b6063",
"bookAuthor": "George Orwell",
"titles": [
{
"title": "Animal Farm",
"_id": "58dd3f2701cc081056135dae",
"reviews": [
{
"author": "Lisa",
"rating": 4,
"reviewText": "this is a review",
"_id": "58dd8e13876c0f16b17cd7dc",
"createdOn": "2017-03-30T23:00:35.662Z"
}
],
"favouredBy": [
"bb, aa, cc"
]
},
{
"title": "1984",
"_id": "58dd42a59f12f110d1756f08",
"reviews": [
{
"author": "jessy",
"rating": 5,
"reviewText": "REVIEW FOR SECOND TITLE",
"_id": "58dd8ef46d4aaa16e4545c76",
"createdOn": "2017-03-30T23:04:20.609Z"
}
],
"favouredBy": [
"all"
]
}
]
}
]
and there is my home.view.html
<navigation></navigation>
<div class="container">
<page-header content="vm.pageHeader"></page-header>
<div class="row">
<div class="col-xs-12 col-sm-8">
<div class="error">{{ vm.message }}</div>
<div class="row list-group">
<div class="col-xs-12 list-group-item" ng-repeat="book in vm.data.books | filter : textFilter">
<h4>
<small class="rating-stars" rating-stars rating="book.rating"></small>
</h4>
<p class="Author">{{ book.bookAuthor }}</p>
</div>
<div class="col-xs-12 list-group-item2" ng-repeat="book in vm.data.books | filter : textFilter">
<h4>
{ book.titles.title }}
</h4>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<p class="lead">{{ vm.sidebar.content }}</p>
</div>
</div>
<footer-generic></footer-generic>
</div>

Yous should use <div ng-app='myApp' ng-controller='myController as vm'> also you should place the nested loop inside the first div and then access do a ng-repeat for the child item.
<div ng-repeat="eachbook in book.titles">
DEMO
var myApp=angular.module('myApp',[])
myApp.controller('myController',function(){
this.data={};
this.data.books= [
{
"_id": "58dd21c3cb77090b930b6063",
"bookAuthor": "George Orwell",
"titles": [
{
"title": "Animal Farm",
"_id": "58dd3f2701cc081056135dae",
"reviews": [
{
"author": "Lisa",
"rating": 4,
"reviewText": "this is a review",
"_id": "58dd8e13876c0f16b17cd7dc",
"createdOn": "2017-03-30T23:00:35.662Z"
}
],
"favouredBy": [
"bb, aa, cc"
]
},
{
"title": "1984",
"_id": "58dd42a59f12f110d1756f08",
"reviews": [
{
"author": "jessy",
"rating": 5,
"reviewText": "REVIEW FOR SECOND TITLE",
"_id": "58dd8ef46d4aaa16e4545c76",
"createdOn": "2017-03-30T23:04:20.609Z"
}
],
"favouredBy": [
"all"
]
}
]
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app='myApp' ng-controller='myController as vm'>
<div class="row">
<div class="row list-group">
<div class="col-xs-12 list-group-item" ng-repeat="book in vm.data.books | filter : textFilter">
<h4>
<small class="rating-stars" rating-stars rating="book.rating"></small> {{book.bookAuthor}}
</h4>
<div ng-repeat="eachbook in book.titles">
<ul>
<li>
{{eachbook.title}}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

angularJs ng -Repeat over an array of json object

This is the format of json which I need to parse:
[{
"perAddress": {
"city": "Delhi",
"Street": "saket",
"pin": "101011"
},
"flag": false
}, {
"perAddress": {
"city": "Delhi",
"Street": "malvya",
"pin": "101011"
},
"flag": true,
"alterAddress": {
"city": "bangalore",
"street": "velondore",
"pin": "560103"
}
}];
If the flag is false then the corresponding row will not be
highlighted and only perAddress will be populated .
If the flag is true then the corresponding row will be highlighted with
containing perAddress and on click on the row the alterAddress need
to populated. How to iterate through the json?

I can tell you in 2 ways. No need of using flag too.
.highlight {
background-color: gray;
}
Using flag solution follows:
<div>
<div ng-repeat="address in addresses" ng-class="{'highlight' : address.flag}">
<a ng-if="!showAlterAddress" ng-click="showAlterAddress = !showAlterAddress">{{address.perAddress}}</a>
<span ng-if="showAlterAddress">{{address.alterAddress}}</span>
</div>
</div>
Without using flag solution follows:
<div>
<div ng-repeat="address in addresses" ng-class="{'highlight' : address.alterAddress}">
<a ng-if="!showAlterAddress" ng-click="showAlterAddress = !showAlterAddress">{{address.perAddress}}</a>
<span ng-if="showAlterAddress">{{address.alterAddress}}</span>
</div>
</div>

Try this
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.data = [{
"perAddress": {
"city": "Delhi",
"Street": "saket",
"pin": "101011"
},
"flag": false
}, {
"perAddress": {
"city": "Delhi",
"Street": "malvya",
"pin": "101011"
},
"flag": true,
"alterAddress": {
"city": "bangalore",
"street": "velondore",
"pin": "560103"
}
}];
});
.Highlight {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="d in data" ng-init="" ng-click="d.flag = !d.flag" ng-class="{'Highlight' : d.alterAddress}">
<li>{{d.perAddress}}
<div ng-if="d.alterAddress">
<div ng-if="!d.flag">{{d.alterAddress}}</div>
</div>
</li>
</div>
</div>

Create a css class "Highlight" and use this code -
<ul>
<li ng-repeat="i in jsonArray" ng-class="{'Highlight' : i.flag}">
<span>{{i.perAddress.city}} | {{i.perAddress.Street}} | {{i.perAddress.pin}}</span>
</li>
</ul>

Angular Material chain combine via md-select from arrays, form inputs array

I have a little problem with chain combine in Angular Material. I want to "replace" this solution link to jsfiddle to Material using md-select and md-option.
How must it works? Simple.
Scenario:
First md-select: select e.g. Manufacturer.
Second md-select: select e.g. Model
Place a price from array to text input as value.
Array struct:
Manufacturer
-Models
--Model (model name and price)
One more thing what I want to do is array from these form inputs like this:
master = [
{
"product": {
"name": "1936 Harley Davidson El Knucklehead",
"price": 24.23
}
}
]
Could anyone help me? Show or tell me how can I do it.
I'll be very appreciate for help.
Regards

Please have a look at the code snippet below with Angular Material
var app = angular.module('app', ['ngMaterial']);
app.controller('SelectController', function ($scope) {
// Data taken from KnockoutJs cart example
$scope.sampleProductCategories = [
{
"name": "Classic Cars",
"products": [
{
"name": "1948 Porsche 356-A Roadster",
"options":[
{"value": "Color",
"options":[
{"value": "Red"},
{"value":"Black"}
],
},
{"value":"Seats",
"options":[
{"value": "Leather"},
{"value":"Cloth"}
],
},
{"value":"Warranty",
"options":[
{"value": "2 Year"},
{"value":"3 Year"}
],
}
],
"price": 53.9
},
{
"name": "1948 Porsche Type 356 Roadster",
"price": 62.16
},
{
"name": "1949 Jaguar XK 120",
"price": 47.25
}
]
},
{
"name": "Motorcycles",
"products": [
{
"name": "1936 Harley Davidson El Knucklehead",
"price": 24.23
},
{
"name": "1957 Vespa GS150",
"price": 32.95
},
{
"name": "1960 BSA Gold Star DBD34",
"price": 37.32
}
]
},
{
"name": "Planes",
"products": [
{
"name": "1900s Vintage Bi-Plane",
"price": 34.25
},
{
"name": "1900s Vintage Tri-Plane",
"price": 36.23
},
{
"name": "1928 British Royal Navy Airplane",
"price": 66.74
},
{
"name": "1980s Black Hawk Helicopter",
"price": 77.27
},
{
"name": "ATA: B757-300",
"price": 59.33
}
]
}
];
});
angular.bootstrap(document, ['app']);
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"/>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<div ng-controller="SelectController">
<div layout="row">
<md-input-container style="margin-right: 10px;">
<label>Catgory</label>
<md-select ng-model="category">
<md-option ng-repeat="c in sampleProductCategories" ng-value="c">{{c.name}}</md-option>
</md-select>
</md-input-container>
<md-input-container style="margin-right: 10px;">
<label>Product</label>
<md-select ng-model="categoryItem">
<md-option ng-repeat="p in category.products" ng-value="p">{{p.name}}</md-option>
</md-select>
</md-input-container>
<md-input-container style="margin-right: 10px;">
<label>SubChild</label>
<md-select ng-model="subChild">
<md-option ng-repeat="o in categoryItem.options" ng-value="o">{{o.value}}</md-option>
</md-select>
</md-input-container>
<md-input-container style="margin-right: 10px;">
<label>Level4</label>
<md-select ng-model="level4">
<md-option ng-repeat="o in subChild.options" ng-value="o">{{o.value}}</md-option>
</md-select>
</md-input-container>
</div>
<hr />
category={{category.name}}<br/>
product={{categoryItem.name}}<br/>
subChild={{subChild.value}}<br/>
level4={{level4.value}}<br/>
</div>

Filters not working - Angularjs

I have been studying some of the videos for angularjs. While trying to apply filter to a list of bookmark category my main content simply doesn't loads. I have not implemented view as of now. And I would like my code to be without views for a moment.
The filter line is problematic as when I remove the curly braces around. The bookmark lists does shows up but the filtering still not works !
Please let me know what is the correction which needs to be done ?
Here is my code for INDEX.HTML
<!doctype html>
<html ng-app="Eggly">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Eggly</title>
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/eggly.css">
<link rel="stylesheet" href="assets/css/animations.css">
</head>
<body ng-controller='MainCtrl'>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<img class="logo" src="assets/img/eggly-logo.png">
<ul class="nav nav-sidebar">
<li ng-repeat="category in categories">
{{category.name}}
</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div ng-repeat="bookmark in bookmarks | filter:{category:currentCategory.name}">
<button type="button" class="close">×</button>
<button type="button" class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span></button>
{{bookmark.title}}
</div>
<hr/>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app/eggly-app.start.js"></script>
</body>
JS FILE
angular.module('Eggly', [
])
.controller('MainCtrl', function($scope){
$scope.categories = [
{"id": 0, "name": "Development"},
{"id": 1, "name": "Design"},
{"id": 2, "name": "Exercise"},
{"id": 3, "name": "Humor"}
];
$scope.bookmarks= [
{"id":0, "title": "AngularJS", "url": "http://angularjs.org", "category": "Development" },
{"id":1, "title": "Egghead.io", "url": "http://angularjs.org", "category": "Development" },
{"id":2, "title": "A List Apart", "url": "http://alistapart.com/", "category": "Design" },
{"id":3, "title": "One Page Love", "url": "http://onepagelove.com/", "category": "Design" },
{"id":4, "title": "MobilityWOD", "url": "http://www.mobilitywod.com/", "category": "Exercise" },
{"id":5, "title": "Robb Wolf", "url": "http://robbwolf.com/", "category": "Exercise" },
{"id":6, "title": "Senor Gif", "url": "http://memebase.cheezburger.com/senorgif", "category": "Humor" },
{"id":7, "title": "Wimp", "url": "http://wimp.com", "category": "Humor" },
{"id":8, "title": "Dump", "url": "http://dump.com", "category": "Humor" }
];
$scope.currentCategory = null;
function setCurrentCategory(category) {
$scope.currentCategory = category;
}
$scope.currentCategory = setCurrentCategory;
});

A few errors there must me fixed in your code.
Please attach .setCurrentCategory() to $scope (or this) in controller as Angular realize MVVM architecture. $scope is an object that links your controllers with views. As long as you want to interact with data from controller by method setCurrentCategory you must assign it to $scope
Filters - according to AngularJS documentation need expression – not curly brackets
angular.module('Eggly', [])
.controller('MainCtrl', function($scope) {
$scope.categories = [{
"id": 0,
"name": "Development"
}, {
"id": 1,
"name": "Design"
}, {
"id": 2,
"name": "Exercise"
}, {
"id": 3,
"name": "Humor"
}];
$scope.bookmarks = [{
"id": 0,
"title": "AngularJS",
"url": "http://angularjs.org",
"category": "Development"
}, {
"id": 1,
"title": "Egghead.io",
"url": "http://angularjs.org",
"category": "Development"
}, {
"id": 2,
"title": "A List Apart",
"url": "http://alistapart.com/",
"category": "Design"
}, {
"id": 3,
"title": "One Page Love",
"url": "http://onepagelove.com/",
"category": "Design"
}, {
"id": 4,
"title": "MobilityWOD",
"url": "http://www.mobilitywod.com/",
"category": "Exercise"
}, {
"id": 5,
"title": "Robb Wolf",
"url": "http://robbwolf.com/",
"category": "Exercise"
}, {
"id": 6,
"title": "Senor Gif",
"url": "http://memebase.cheezburger.com/senorgif",
"category": "Humor"
}, {
"id": 7,
"title": "Wimp",
"url": "http://wimp.com",
"category": "Humor"
}, {
"id": 8,
"title": "Dump",
"url": "http://dump.com",
"category": "Humor"
}];
$scope.currentCategory = null;
function setCurrentCategory(category) {
$scope.currentCategory = category;
}
$scope.setCurrentCategory = setCurrentCategory;
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='Eggly'>
<div ng-controller='MainCtrl'>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li ng-repeat="category in categories">
{{category.name}}
</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div ng-repeat="bookmark in bookmarks | filter:currentCategory.name">
<button type="button" class="close">×</button>
<button type="button" class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span>
</button>
{{bookmark.title}}
</div>
<hr/>
</div>
</div>
</div>
</div>
</div>