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.
Related
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)
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.
I'm just starting to use javascript and json.
I need to read data (get Information function) from a json file when processing an event in a javascript function without using jquery or any other librery. I don't know if I am missing something in the code, or if I have to create an Request and handle the callback, or if I need to import additional javascript to use json. Because I don't know how to make it work. all i get is undefined. Any help is aprreciated.
The json file:
"hotels": [
{
"name": "Hotel Sunny Palms",
"imgUrl": "imgs/sunny.jpg",
"rating": 5,
"price": 108.00
},
{
"name": "Hotel Snowy Mountains",
"imgUrl": "imgs/snowy.jpg",
"rating": 4,
"price": 120.00
},
{
"name": "Hotel Windy Sails",
"imgUrl": "imgs/windy.jpg",
"rating": 3,
"price": 110.00
},
{
"name": "Hotel Middle of Nowhere",
"imgUrl": "imgs/nowhere.jpg",
"rating": 4,
"price": 199.00
}
]
my javascript is
function hot1(){
var text = '{"hotels": [{"name": "Hotel Sunny Palms","imgUrl": "http://www.pruebaswebludiana.xyz/imgs/sunny.jpg","rating": 5,"price": 108.00}]}';
var obj = JSON.parse(text);
document.getElementById("img-container").innerHTML =
obj.imagUrl+ "<br>"+ obj.name+ " " +obj.rating+ " " +obj.price;}
and my html code is
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2" />
<link rel='stylesheet' href='style.css' type='text/css' media='all' />
</head>
<body>
<nav></nav>
<div class="container">
<div>
<ul>
<li onclick="hot1()">Hotel Sunny Palms</li>
<li onclick="hot2()">Hotel Snowy Mountains</li>
<li onclick="hot3()">Hotel Windy Sails</li>
<li onclick="hot4()">Hotel Middle Of Nowhere</li>
</ul>
</div>
<div class="banner-section" id="img-container">
</div>
</body>
</html>
Your JSON file contains an array in the property hotels, you probably need to work with one of those, e.g.:
var jsonText = ...;
var parsedObject = JSON.parse(jsonText);
var hotels = parsedObject.hotels;
var hotel = hotels[0]; // instead of 0, pass the index of the needed hotel
document.getElementById("img-container").innerHTML =
hotel.imgUrl + "<br/>" + hotel.name + " " + hotel.rating + " " + hotel.price;
{"hotels": [{"name": "Hotel Sunny Palms","imgUrl": "http://www.pruebaswebludiana.xyz/imgs/sunny.jpg","rating": 5,"price": 108.00}]}
You get undefined because you are trying to read the name (and other properties) of the outer object.
The outer object doesn't have those properties. It has one property: hotels.
The value of the property is an array.
That array contains an object.
The properties you are trying to access exist on that object.
i.e.
obj.hotels[0].name // etc
I am using angularjs. I have sample list of json. I am display the list using ng-repeat and I have checkbox in html.
I need to find user checkbox is clicked or not(not checked or not).
Here's a working example:
var app = angular.module('MyApp', []);
app.controller('MainCtrl', function($scope) {
$scope.result = {};
$scope.result.name = 'World';
var data = '[ { "button": 1, "name": "Test-1", "checked" : 0 }, { "button": 2, "name": "Test-2", "checked" : 0 }, { "button": 3, "name": "Test-3", "checked" : 1 }, { "button": 4, "name": "Test-4", "checked" : 0 }, { "button": 5, "name": "Test-5", "checked" : 1 } ]';
$scope.result.list = JSON.parse(data);
});
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
<div ng-app="MyApp" ng-controller="MainCtrl">
<p>Hello {{name}}!</p>{{result.list.name}}
<ul>
<li ng-repeat="list in result.list">
<input type="checkbox" ng-model="list.isChecked" ng-checked="list.checked == 1">- {{list.name}}</li>
</ul>
</div>
Expected output:
Find user clicked the checkbox or not.
If checkbox already checked (3 & 5). If user unchecked means I need to identify.
Alternatively, here's a Plunker.
As far as I understood, You want to check if the checkbox was clicked by user or not. Check out the below code changes or on Plunker
This code adds, isClicked attribute to the check-boxes that were clicked. Also it stores the current value of check-boxes in checked attribute.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.result = {};
$scope.result.name = 'World';
var data = '[ { "button": 1, "name": "Test-1", "checked" : 0 }, { "button": 2, "name": "Test-2", "checked" : 0 }, { "button": 3, "name": "Test-3", "checked" : 1 }, { "button": 4, "name": "Test-4", "checked" : 0 }, { "button": 5, "name": "Test-5", "checked" : 1 } ]';
$scope.result.list = JSON.parse(data);
});
<!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">
<p>Hello {{name}}!</p>{{result.list}}
<ul>
<li ng-repeat="list in result.list">
<input type="checkbox" ng-model="list.checked" ng-click="list.isClicked = true" ng-true-value="1" ng-false-value="0">- {{list.name}}</li>
</ul>
</body>
</html>