We Keep Coding

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>

json not working in Angular

I'm a beginner in Angular so I hope someone to help me!
This is my script.js
ar app = angular.module('computer', ['ngRoute'])
.config(['$routeProvider',function($routeProvider) {
$routeProvider
.when('/main', {
templateUrl : 'main.html',
controller : 'MainCtrl'
})
.when('/service', {
templateUrl : 'service.html',
controller : 'ServicesCtrl'
})
.otherwise({redirectTo:'/main'});
}])
.controller('MainCtrl', ['$scope', function($scope){
}])
.controller('ServicesCtrl', ['$scope','$http', function($scope,$http){
$http.get('serviceData.json').then(function(response){
console.log(response);
$scope.services = response.data;
});
}]);
and this is service.html
<div class="row">
<div class="col-md-12">
<h2>Services</h2>
<div ng-repeat="serv in services">
<div class="row service">
<div class="col-md-2">
<img src="computer-icon.png" class="img-responsive">
</div>
<div class="col-md-10">
<h3>{{ serv.id : serv.name }}</h3>
<p>{{serv.Description}}</p>
<button class="btn btn-primary">Read More…</button>
</div>
</div>
</div>
</div>
and serviceData.json
[{
"id": 1,
"name": "Reparation",
"Description": "Reparation of your hardware"
}, {
"id": 2,
"name": "Installation",
"Description": "Installation of your hardware"
}, {
"id": 3,
"name": "Reparation and Reset",
"Description": "Reparation and Reset of your hardware"
}]
But I have this error in console
angular.min.js:118 Error: [$parse:syntax] http://errors.angularjs.org/1.5.8/$parse/syntax?p0=%3A&p1=is%20an%20unexpected%20token&p2=9&p3=serv.id%20%3A%20service.name&p4=%3A%20service.name
and anything display in screen.
Thank you for help !

You have to use the following line:
<h3>{{ serv.id : serv.name }}</h3>
like this:
<h3>{{ serv.id}} : {{serv.name }}</h3>

ng-view does not get the data from href?

I tried one product page using AngularJS. This the first time i am creating the page using AngularJS.
ng-view is not working when i click the add to cart page. It does not show any respond.
I am verified the code with all the tutorials. It seems correct.
Can anyone please tell what i did wrong.
Below i mentioned the code. Sorry, cant able to put the code in jsfiddle. It does not bind the normal date.
Code:
var app = angular.module("myApp", ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/red', {
templateUrl: 'dashboard.html',
controller: 'myCtrl',
})
.when('/green', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/yellow', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/black', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/grey', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/blue', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
app.controller("myCtrl", function($scope) {
$scope.records = [{
"Name": "Alfreds Futterkiste",
"Country": "Germany",
"Dollar": "$21.00",
"URL": "red"
}, {
"Name": "Berglunds snabbköp",
"Country": "Sweden",
"Dollar": "$21.00",
"URL": "green"
}, {
"Name": "Centro comercial Moctezuma",
"Country": "Mexico",
"Dollar": "$21.00",
"URL": "yellow"
}, {
"Name": "Ernst Handel",
"Country": "Austria",
"Dollar": "$21.00",
"URL": "black"
}, {
"Name": "Ernst Jubilie",
"Country": "Canada",
"Dollar": "$21.00",
"URL": "grey"
}, {
"Name": "Idris_09090",
"Country": "India",
"Dollar": "$43.00",
"URL": "blue"
}]
});
li.list-group-item {
position: relative;
display: inline-block;
margin-bottom: -1px;
background-color: #D38585;
border: 1px solid #ddd;
width: 25%;
height: 210px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<body ng-app="myApp" style="background-color: #2a2326;" ng-controller="myCtrl">
<div class="container">
<div class="well well-sm" style="background-color:#2a2326; color:white; text-align:center; font-size:30px;">
<h4><strong>Water Products</strong></h4>
</div>
<div class="item col-xs-12 col-lg-4" ng-repeat="x in records">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
{{x.Name}}</h4>
<p class="group inner list-group-item-text">
{{x.Country}}</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
{{x.Dollar}}</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" ng-href="#{{x.URL}}">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div ng-view></div>
</div>
Please help on this.

remove
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
change your url to
<a class="btn btn-success" ng-href="#/{{x.URL}}">Add to cart</a>
demo:
https://plnkr.co/edit/5odGEUq0eK8tGR8IxohW?p=preview

Change href to ng-href
<a class="btn btn-success" href ng-href="#{{x.URL}}">Add to cart</a>

Can you please try this ? , as i can't judge is your app is getting load or not, but your href issue will solved from this.
var app = angular.module("myApp", ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/red', {
templateUrl: 'dashboard.html',
controller: 'myCtrl',
})
.when('/green', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/yellow', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/black', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/grey', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/blue', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
app.controller("myCtrl", function($scope) {
$scope.records = [{
"Name": "Alfreds Futterkiste",
"Country": "Germany",
"Dollar": "$21.00",
"URL": "red"
}, {
"Name": "Berglunds snabbköp",
"Country": "Sweden",
"Dollar": "$21.00",
"URL": "green"
}, {
"Name": "Centro comercial Moctezuma",
"Country": "Mexico",
"Dollar": "$21.00",
"URL": "yellow"
}, {
"Name": "Ernst Handel",
"Country": "Austria",
"Dollar": "$21.00",
"URL": "black"
}, {
"Name": "Ernst Jubilie",
"Country": "Canada",
"Dollar": "$21.00",
"URL": "grey"
}, {
"Name": "Idris_09090",
"Country": "India",
"Dollar": "$43.00",
"URL": "blue"
}]
});
li.list-group-item {
position: relative;
display: inline-block;
margin-bottom: -1px;
background-color: #D38585;
border: 1px solid #ddd;
width: 25%;
height: 210px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<body ng-app="myApp" style="background-color: #2a2326;" ng-controller="myCtrl">
<div class="container">
<div class="well well-sm" style="background-color:#2a2326; color:white; text-align:center; font-size:30px;">
<h4><strong>Water Products</strong></h4>
</div>
<div class="item col-xs-12 col-lg-4" ng-repeat="x in records">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
{{x.Name}}</h4>
<p class="group inner list-group-item-text">
{{x.Country}}</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
{{x.Dollar}}</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" ng-href="#/{{x.URL}}">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div ng-view></div>
</div>