I'm learning AngularJS. So I'm going through the AngularJS tutorials on here - https://docs.angularjs.org/tutorial/step_07. While I'm in step 7 I'm facing syntax error while using angularjs $http service. This is my application directory structure and files.
app/
phone-list/phone-list.component.js
phone-list/phone-list.module.js
phone-list/phone-list.template.html
app.module.js
phonelist.php
phonelist.json
phone-list/phone-list.component.js
angular.
module('phoneList').
component('phoneList', {
templateUrl: 'phone-list/phone-list.template.html',
controller: function PhoneListController($http) {
var self = this;
self.orderProp = 'age';
$http.get('phonelist.json').then(function(response) {
console.log(response);
self.phones = response.data;
});
}
});
phone-list/phone-list.module.js
angular.module('phoneList', []);
phone-list/phone-list.template.html
<p>Search: <input ng-model="$ctrl.query" /></p>
<p>
<select data-ng-model="$ctrl.orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</p>
<ul>
<li data-ng-repeat="phone in $ctrl.phones | filter: $ctrl.query | orderBy: $ctrl.orderProp">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
app.module.js
angular.module('phoneCatApp', ['phoneList']);
phonelist.php
<!DOCTYPE html>
<html>
<head>
<title>AngularJS | Phone List</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript" src="phone-list/phone-list.module.js"></script>
<script type="text/javascript" src="phone-list/phone-list.component.js"></script>
<script type="text/javascript" src="app.module.js"></script>
</head>
<body data-ng-app="phoneCatApp">
<phone-list></phone-list>
</body>
</html>
phonelist.json
[
{
"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S.",
"age": 2,
},
{
"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet.",
"age": 1,
},
{
"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet.",
"age": 4
}
]
Issue I'm facing is below
You have extra , two place, which is leading to error in json parsing
"age": 2, //<--here
"age": 1, //<--here
You should remove the invalid , from JSON response & make sure all the properties & strings are wrap inside "(double quotes)
Related
I'm trying to figure out on how to iterate the array using ngrepeat
If I have a array of data like below
{
"People": [{
"name": "Andrew Amernante",
"rating": 3,
},
{
"name": "Frank Wang",
"rating": 5,
},
{
"name": "Chang Wang",
"rating": 5,
}
]
}
In Controller, I have these code snippets.
app.controller('mainController', function($scope, $http) {
$http.get('people.json').
then(function onSuccess(response) {
console.log(response);
$scope.peoples = response.data;
}).
catch(function onError(response) {
console.log(response);
});
});
And, I wanted to iterate the array and display the three name in list.
<ul class="nav">
<li ng-repeat="obj.peoples track by $index">
{{obj.name}}
</li>
</ul>
But, I cannot able to get the names, any idea on this?
FYI - I'm using Angular 1.6.5 version here.
Plunkr Code here
You need to fix your HTML code.
Instead of ng-repeat="obj.peoples track by $index" it should be ng-repeat="obj in peoples.People track by $index"
See below demo.
angular.module('app', [])
.controller('mainController', function($scope, $http) {
// mocked, equivalente to `$scope.peoples = response.data`
$scope.peoples = {
"People": [{
"name": "Andrew Amernante",
"rating": 3,
},
{
"name": "Frank Wang",
"rating": 5,
},
{
"name": "Chang Wang",
"rating": 5,
}
]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='mainController'>
<ul class="nav">
<li ng-repeat="obj in peoples.People track by $index">
{{obj.name}}
</li>
</ul>
</div>
it is peoples in your script.js and you are using obj in html
$http.get('people.json').
then(function onSuccess(response) {
console.log(response);
$scope.peoples = response.data;
}).
change your html to the below code,
<li class="active" ng-repeat="item in peoples.People">
{{item.name}}<span class="glyphicon glyphicon-play"></span>
</li>
Two things, in javscript
$scope.peoples = response.data.People;
and in ng-repeat it should be
ng-repeat="people in peoples track by $index"
I have a JSON the following JSON file:
[
{
"pageID": 1,
"pageName": "Home Page",
"pageHead": "Home Page Title"
},
{
"pageID": 2,
"pageName": "Second Page",
"pageHead": "2nd Page Title"
},
{
"pageID": 3,
"pageName": "Third Page",
"pageHead": "3rd Page Title"
}
]
What I am trying to do is display a page takes its title and header from the JSON file.
To do this, I have created the following JS code:
var dbApp = angular.module('dbApp', ['ngSanitize']);
dbApp.controller('dbCtrl', function($scope, $http){
$http.get('pageDB.json').success(function(data) {
$scope.pageContent = data;
$scope.pageHeadDB = data[0].pageHead;
$scope.pageBodyDB = data[0].pageBody;
});
});
In the JS code I am using $scope.pageHeadDB = data[0].pageHead; using specific index [1] but please don't worry about this, later I will make it dynamic.
The following view is supposed to display what I need:
<html ng-app="dbApp" ng-controller="dbCtrl">
<head>
<title>{{pageHeadDB}}</title>
</head>
<body>
<div ng-bind-html="pageBodyDB"></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>
</body>
</html>
The page displays the data when I use [0] which is the first item from the JSON file, but I don't understand why it doesn't work when I make the index [1] and/or [2]?
Any thoughts?
I can't test the <title> tag problem using this code snippet tool, but here's a solution simplifies some of your logic and works regardless of page number:
angular
.module('dbApp', ['ngSanitize'])
.controller('dbCtrl', dbCtrl);
dbCtrl.$inject = ['$window', '$scope', '$http'];
function dbCtrl($window, $scope, $http){
$scope.page = 0;
// stubbing ajax call for demo purposes
// $http.get('pageDB.json').success(function(data) {
var data = [
{
"pageID": 1,
"pageName": "Home Page",
"pageHead": "Home Page Title"
},
{
"pageID": 2,
"pageName": "Second Page",
"pageHead": "2nd Page Title"
},
{
"pageID": 3,
"pageName": "Third Page",
"pageHead": "3rd Page Title"
}
];
$scope.pageContent = data;
// });
}
<html ng-app="dbApp" ng-controller="dbCtrl">
<head>
<title>{{ pageContent[page].pageHead }}</title>
</head>
<body>
<h1>{{ pageContent[page].pageHead }}</h1>
<div ng-bind-html="pageContent[page].pageName"></div>
<hr/>
<label>Page:</label>
<input type="text" ng-model="page"></input>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>
</body>
</html>
I am trying to implement chips style.
Adding tags and remove tags like chips style to an item, for that I need to split string and bind separately based on length of array of split.
How to split comma speared dynamic length string while binding data.
how can I use angular filters here
Please check following code.
JS: Controller:
var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope) {
var temp= {
"values": [
{
"id": "1",
"tags": "Design research, UI Frameworks, Wireframes"
},
{
"id": "2",
"tags": "Hockey, basketball, Cricket, Football, Baseball"
},
{
"id": "3",
"tags": "Sensors, maps, Location Service, Studio"
},
],
"count": "3"
};
// I have json like this
$scope.items = temp.values;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" >
<div ng-controller ="myCtrl">
<p ng-repeat="item in items">
<span>{{item.tags}}</span>
</p>
</div>
<hr>
<!-- here I am trying implement chips style -->
<!-- Requieremrnt-->
<span style="background:#ddd;">{{item.tags[0]}}</span>
<span style="background:#ddd;">{{item.tags[1]}}</span>
<span style="background:#ddd;">{{item.tags[n]}}</span>
<!-- can I use ng-repeat or custom filter. if yes how??-->
<hr>
</body>
Can I use ng-repeat or custom filter. if yes how??
Thanks.
There is no need to create a custom filter to do so (although you can if you want to).
For this particular purpose, you can split the tags in your controller and then simply iterate through the strings in your view. In this case we'll use a double ng-repeat. The first one to iterate through all group of strings in each set of tags and the second one to iterate through the split string items. I've modified your code below and cleaned it up a bit.
var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope) {
var temp= {
"values": [
{
"id": "1",
"tags": "Design research, UI Frameworks, Wireframes"
},
{
"id": "2",
"tags": "Hockey, basketball, Cricket, Football, Baseball"
},
{
"id": "3",
"tags": "Sensors, maps, Location Service, Studio"
},
],
"count": "3"
};
$scope.items = temp.values.map(function (item) {
return item.tags.split(",");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" >
<div ng-controller ="myCtrl">
<div ng-repeat="group in items">
<p ng-repeat="tag in group">{{tag}}</p>
<hr />
</div>
</div>
</body>
var foo = [
{
"id": 12,
"name": "Test"
},
{
"id": 2,
"name": "Beispiel"
},
{
"id": 3,
"name": "Sample"
},
{
"id": 4,
"name": "Test"
},
{
"id": 5,
"name": "Sample value"
},
{
"id": 6,
"name": "Testvalue"
}
];
I am trying to get a simple search input, which shows a couple of listings on ng-repeat. The search is basically a filter which shows searched items in that listing. What I have achieved is when I search something, with $http, it gets back the whole list of foo, and within that it filters. How can I just get the data with my keyword, and the whole JSON? For example if I search sample, how can I get the objects of id 3 and 5 so that I can display a new set of listings, or if I search with ID number 12, I get the object which has id as 12. The search term will be dynamic. I will be giving a $http call on every search as well.
Thanks.
If I understood well, it should work:
(function() {
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$http'];
function MainCtrl($scope, $http) {
$scope.foo = [
{
"id":12,
"name":"Test"
},
{
"id":2,
"name":"Beispiel"
},
{
"id":3,
"name":"Sample"
},
{
"id":4,
"name":"Test"
},
{
"id":5,
"name":"Sample value"
},
{
"id":6,
"name":"Testvalue"
}
];
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="search" placeholder="Search">
<ul>
<li ng-repeat="item in foo | filter: search">
<span ng-bind-template="{{item.id}} - {{item.name}}"></span>
</li>
</ul>
</body>
</html>
Note: If you want to perform a $http request based on search input, look at this DEMO.
You can use $filter to achieve this.
function YourController($filter) {
var result = $filter('filter')(foo, {"id":3,"id":5});
};
You can iterate result later.
Hello suppose I have a JSON Object
`var books = [{
"Genre": "Sci-fic",
"Name": "Bookname1"
}, {
"Genre": "Sci-fic",
"Name": "Bookname2"
}, {
"Genre": "Non sci-fic",
"Name": "Bookname3"
}, {
"Genre": "Non sci-fic",
"Name": "Bookname4"
}];`
now how I want to show it like
Sci-fic
Bookname1
Bookname2
Non-scific
Bookname3
Bookname3
I am well aware by angular unique property but unique discard the changes I want to segregate data based on similar string in json object
I have tried so far with unique but no luck. Any suggestion please.
You need to apply a filter. 'orderBy' is being provided by angular.js. You can do something like the following to get the expected result :
INDEX.HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="bookPerGenre in booksToFilter() | filter:filterGenres">
<b>{{bookPerGenre.Genre}}</b>
<li ng-repeat="book in books | filter:{Genre: bookPerGenre.Genre}">{{book.Name}}</li>
</div>
</body>
</html>
APP.JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.books = [{
"Genre": "Sci-fic",
"Name": "Bookname1"
}, {
"Genre": "Sci-fic",
"Name": "Bookname2"
}, {
"Genre": "Non sci-fic",
"Name": "Bookname3"
}, {
"Genre": "Non sci-fic",
"Name": "Bookname4"
}];
$scope.booksToFilter = function(){
indexedGenres = [];
return $scope.books;
};
$scope.filterGenres = function(book) {
var genreIsNew = indexedGenres.indexOf(book.Genre) == -1;
if (genreIsNew) {
indexedGenres.push(book.Genre);
}
return genreIsNew;
};
});
You can refer this plnkr
{{ books[0].Genre }}
{{ books[0].Name }}
like arrays books[0] used to access the first element.
I hope this will help!
I guess you also need to use groupBy filter like the following question
How can I group data with an Angular filter?
Something like
<ul ng-repeat="(key, value) in books | groupBy: 'Genre'">
{{ key }}
<li ng-repeat="book in value">
{{ book.Name }}
</li>
</ul>
Try it.