I am newbie to AngularJS. I have JSON file which I have to fetch using angularjs!
JSON File
{
"records": [
{
"students": [
{
"id": 1,
"name": "Bill",
},
{
"id": 2,
"name": "Steve",
}
],
"exstudent": [
{
"id": 1,
"name": "Woz",
},
{
"id": 2,
"name": "Jonathan",
}
]
}
]
}
Controller part snippet -
$http.get('json/somedata.json').success(function (data){
$scope.name = data.records.student.name;
$scope.exname = data.records.exstudent.name;
});
}])
HTML
<div class="panel-body" ng-repeat = "browse in name">
{{browse.student.name}}
</div>
Which part I am doing wrong? I think the problem is with ng-repeat!
Need Help
You can't use data.records.students.name as students is an Array.
You can however store its data into your $scope and use it in the ng-repeat:
$http.get('json/config.json').success(function (data){
$scope.students = data.records.students;
$scope.exstudents = data.records.exstudent;
});
Then in your HTML use the ng-repeat like this:
<div class="panel-body" ng-repeat="student in students">
{{student.name}}
</div>
Related
I'm trying to filter a nested array of objects with my own objects, by idSubject. But I'm not getting the right result.
I have articles (which have subjects)
And a array of objects (which are the subjects I want to filter the articles with)
Data looks like this:
So I'm trying to filter the array of articles by its subjects.
I tried the following:
<div class="panel panel-default"
ng-repeat="searchArticle in searchArticles | filter: {subjects: filterSubjects} as articleSearchResult">
So filterSubjects is the second screenshot and SearchArticles is the first screenshot.
Without much luck.
Hope you can help, please tell me if things are still unclear.
This custom filter will help you.
Example : http://plnkr.co/edit/jMizCLxPH6DtDA5wL15Q?p=preview
HTML:
<body ng-app="myApp">
<div ng-controller="MainCtrl">
<h2>Select Subjects</h2>
<div ng-repeat="subject in subjects">
<label>
<input type="checkbox" ng-model="filterSubjects[subject.id]" ng-true-value="'{{subject.id}}'" ng-false-value="''">{{subject.name}}</label>
</div>
<h2>Filtered Articles</h2>
<div ng-repeat="searchArticle in searchArticles | subjectFilter:filterSubjects">{{searchArticle.name}}</div>
</div>
</body>
JS:
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.searchArticles = [{
"name": "Article1",
"sid": "1"
}, {
"name": "Article2",
"sid": "1"
}, {
"name": "Article3",
"sid": "2"
}];
$scope.subjects = [{
"name": "Subject1",
"id": "1"
}, {
"name": "Subject2",
"id": "2"
}];
$scope.filterSubjects = [];
});
app.filter('subjectFilter', function() {
return function(articles, filterSubjects) {
filtered = articles.filter(function(e){return filterSubjects.indexOf(e.sid) >= 0},filterSubjects);
return filtered;
}
});
if you want to filter based on object :
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.searchArticles = [{
"name": "Article1",
"sid": "1"
}, {
"name": "Article2",
"sid": "1"
}, {
"name": "Article3",
"sid": "2"
}];
$scope.subjects = [{
"name": "Subject1",
"id": "1"
}, {
"name": "Subject2",
"id": "2"
}];
$scope.filterSubjects = [{
"name": "Subject1",
"id": "1"
}, {
"name": "Subject1",
"id": "2"
}];
});
app.filter('subjectFilter', function() {
return function(articles, filterSubjects) {
var sFiltered = [];
for (var i = 0; i < filterSubjects.length; i++) {
sFiltered.push(filterSubjects[i].id);
}
var filtered = articles.filter(function(e) {
return sFiltered.indexOf(e.sid) >= 0;
}, sFiltered);
return filtered;
}
});
response object like
$scope.list= [
Object {
cid=74,
date="2016-08-25T00:00:00.000+0530",
optkey="key",
optvalue="{
value:{
'name':test,
'gender':male
}
}"
},
Object {
cid=75,
date="2016-08-25T00:00:00.000+0530",
optkey="key",
optvalue="{
value:{
'name':test2,
'gender':female
}
}"
}},
Object {
cid=77,
date="2016-08-26T00:00:00.000+0530",
optkey="key",
optvalue="{
value:{
'name':test1,
'gender':female
}
}"
}]
and in html page used ng-repeat
<div ng-repeat="item in list">
{{item.date}} -- works fine
</div>
here how to display json value in object optvalue, done some code like.
<div ng-repeat="item in list">
{{item.optvalue.value}} -- but it is undefined
</div>
but it is not working can any one give hint for this
Just because your optvalue is a String but not a object. It should be :
optvalue = {
value:{
'name':test1,
'gender':female
}
}
In JSON, an object should NOT be in the parenthese.
Try this working example, please check the object created.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.list=
[
{
cid:74, date:"2016-08-25T00:00:00.000+0530", optkey:"key", optvalue:{value:{'name':'test','gender':'male'}}
},
{
cid:75, date:"2016-08-25T00:00:00.000+0530", optkey:"key", optvalue:{value:{'name':'test','gender':'male'}}
},
{
cid:76, date:"2016-08-25T00:00:00.000+0530", optkey:"key", optvalue:{value:{'name':'test','gender':'male'}}
}
]
});
<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="item in list">
{{item.optvalue.value.name}}
</div>
</div>
The response JSON is not valid :
Strings should be wrapped in double quotes.
Expecting colon, not = in key value pairs.
Invalid characters found.
Invalid number.
Issue Capture :
Valid JSON :
[
{
"cid": 74,
"date": "2016-08-25T00:00:00.000+0530",
"optkey": "key",
"optvalue": {
"value": {
"name": "test",
"gender": "male"
}
}
},
{
"cid": 75,
"date": "2016-08-25T00:00:00.000+0530",
"optkey": "key",
"optvalue": {
"value": {
"name": "test2",
"gender": "female"
}
}
},
{
"cid": 77,
"date": "2016-08-26T00:00:00.000+0530",
"optkey": "key",
"optvalue": {
"value": {
"name": "test1",
"gender": "female"
}
}
}
]
In your case {{item.optvalue.value}} is giving undefined because optvalue is a string not an object.So, it should be an object.
"optvalue": {
"value": {
"name": "test1",
"gender": "female"
}
}
thanks for your answers,i have resolved it using--
angular.toJson and angular.fromJson
while send to server used
angular.toJson(stringOfJson)
and when got the response object the using
angular.fromJson(value)
and set to object field,it is working fine.
you need to change your code to this
<div ng-repeat="item in list">
{{item.optvalue.value.name}}
</div>
i have read this post https://stackoverflow.com/a/18295177/6188148
but my json looks bit different. here is my json.
[{"ID":1,"Name":"Suzy","ParentID":0},
{"ID":2,"Name":"Somi","ParentID":1},
{"ID":3,"Name":"Romi","ParentID":2},
{"ID":4,"Name":"Jumi","ParentID":3},
{"ID":5,"Name":"Gargi","ParentID":0},
{"ID":6,"Name":"Sujoy","ParentID":5},
{"ID":7,"Name":"Kamal","ParentID":6},
{"ID":8,"Name":"Joy","ParentID":0},
{"ID":9,"Name":"Sumana","ParentID":8},
{"ID":10,"Name":"Alex","ParentID":0}]
in my case relation establish with ID and ParentID. the relation can be nested upto nth level. so tell me how to use ng-repeat to show parent and child data.
this way i tried
<div ng-app="myApp">
<ul class="nav nav-pills" data-ng-controller= "MasterDetails" >
<li
data-ng-repeat="parent in details | filter: { ParentID: 0 }" >
{{ parent.Name }}
<ul>
<li data-ng-repeat="child in details | filter: { ParentID: parent.ID }">
{{ child.Name }}
</li>
</ul>
</li>
</ul>
</div>
angular.module("myApp", []).
controller("MasterDetails", ['$scope', function($scope) {
$scope.details = [{"ID":1,"Name":"Suzy","ParentID":0},
{"ID":2,"Name":"Somi","ParentID":1},
{"ID":3,"Name":"Romi","ParentID":2},
{"ID":4,"Name":"Jumi","ParentID":3},
{"ID":5,"Name":"Gargi","ParentID":0},
{"ID":6,"Name":"Sujoy","ParentID":5},
{"ID":7,"Name":"Kamal","ParentID":6},
{"ID":8,"Name":"Joy","ParentID":0},
{"ID":9,"Name":"Sumana","ParentID":8},
{"ID":10,"Name":"Alex","ParentID":0}];
}]);
here is jsfiddle https://jsfiddle.net/tridip/s0svpaev/2/
the above code is working but not getting right output. hierarchy should be look like this way
Suzy
Somi
Romi
Jumi
Gargi
Sujoy
Kamal
Joy
Sumana
Alex
where i made the mistake in code for which i am not getting right output. thanks
Based on your link, I created this plnkr with some modifications to fit your needs.
I just added the getSubPeople function in the controller to get a sub array that represent the elder parents and pass them immediately to the directive for sub rendering:
Our partial:
<ul>
<li ng-repeat="p in peoples">
{{p}}
<div ng-switch on="p.ParentID > 0">
<div ng-switch-when="true">
<div ng-init="peoples = getSubPeople(p.ParentID);" ng-include="'partialPeoples.html'"></div>
</div>
</div>
</li>
</ul>
Our Controller :
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.peoples = [{"ID":1,"Name":"Suzy","ParentID":0},
{"ID":2,"Name":"Somi","ParentID":1},
{"ID":3,"Name":"Romi","ParentID":2},
{"ID":4,"Name":"Jumi","ParentID":3},
{"ID":5,"Name":"Gargi","ParentID":0},
{"ID":6,"Name":"Sujoy","ParentID":5},
{"ID":7,"Name":"Kamal","ParentID":6},
{"ID":8,"Name":"Joy","ParentID":0},
{"ID":9,"Name":"Sumana","ParentID":8},
{"ID":10,"Name":"Alex","ParentID":0}];
$scope.getSubPeople = function(parentId) {
var arr = [];
for(var i=parentId; i>0 ; i--){
arr.push($scope.peoples[i-1]);
}
return arr;
}
});
Presume include jQuery and not care dom opt perfomance too much, This anwser can match your requirement.
angular.module('app', [])
.controller('appCtrl', function($scope) {
$scope.data = [{
"ID": 1,
"Name": "Suzy",
"ParentID": 0
}, {
"ID": 2,
"Name": "Somi",
"ParentID": 1
}, {
"ID": 3,
"Name": "Romi",
"ParentID": 2
}, {
"ID": 4,
"Name": "Jumi",
"ParentID": 3
}, {
"ID": 5,
"Name": "Gargi",
"ParentID": 0
}, {
"ID": 6,
"Name": "Sujoy",
"ParentID": 5
}, {
"ID": 7,
"Name": "Kamal",
"ParentID": 6
}, {
"ID": 8,
"Name": "Joy",
"ParentID": 0
}, {
"ID": 9,
"Name": "Sumana",
"ParentID": 8
}, {
"ID": 10,
"Name": "Alex",
"ParentID": 0
}];
})
.directive('tree',function($filter){
return {
restrict:'EA',
scope:{
data:'='
},
link:function(scope,element,attrs){
scope.data = $filter('orderBy')(scope.data,'ParentID');
var html = $('<ul id="tree-outer-0"></ul>');
element.append(html);
angular.forEach(scope.data,function(val,index){
var tree = $('<li id="tree-inner-'+val.ID+'">'+val.Name+'</li>');
var parent = $('ul#tree-outer-'+val.ParentID);
if(parent.length){
parent.append(tree);
}else{
var parents = $('li#tree-inner-'+val.ParentID);
var parent = $('<ul id="tree-outer-'+val.ParentID+'"></ul>');
parent.appendTo(parents).append(tree);
}
});
}
}
});
<script src="//cdn.bootcss.com/angular.js/1.5.5/angular.min.js"></script>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<div ng-app="app" ng-controller="appCtrl">
<tree data="data"></tree>
</div>
hi i have a JSON like this:
pages[
{
"id": "74682309",
"labels": [
{
"term": "test1",
"probability": 0.069
},
{
"term": "test2",
"probability": 0.037
}
]
}];
and using tags-input i want the tags to read only the term and show the term so i can show and update.
i have
<tags-input ng-model="se.labels"></tags-input>
the 'se' comes from ng-repeat="se in searchCtrl.pages
Based on the documentation (http://mbenford.github.io/ngTagsInput/documentation/api) you can change the keyProperty and displayProperty to make it use "term" instead of "text"
I've created a fiddle to demonstrate how you can obtain the data needed, considering that the provided JSON is a valid JSON. Your JSON is invalid.
var myApp = angular.module('myApp',['ngTagsInput']);
myApp.factory('data', function() {
var data = [
{
"id": "74682309",
"labels": [
{
"text": "test1",
"probability": 0.069
},
{
"text": "test2",
"probability": 0.037
}
]
}];
return data;
});
myApp.controller('MyCtrl', ['$scope', 'data', function($scope, data) {
var values = [];
data.map(function(elem) {
return elem.labels.forEach(function(el) {
values.push({
"text" : el.text
});
});
});
$scope.tags = values;
}]);
And the html part:
<div ng-controller="MyCtrl">
<div class="elem">
<tags-input ng-model="tags"></tags-input>
</div>
</div>
Here is the fiddle:
http://jsfiddle.net/HB7LU/16554/
Update:
You haven't included the angular ng-tags-input extension as a tag into your question. Please see my updated fiddle:
http://jsfiddle.net/HB7LU/16557/
I can't get my search field to filter my data from my .json file below.
As soon as i start typing in the search fields, all of the items disappear.
Here is my json file that works as my database.
[{
"id": 1,
"userId": 1,
"firstName": ["Jack", "text"],
"lastName": ["Rackum", "text"],
"phone": ["33221122", "tel"]
}, {
"id": 2,
"userId": 1,
"firstName": ["Ellery", "text"],
"lastName": ["Queen", "text"]
}, {
"id": 3,
"userId": 1,
"firstName": ["Minnie", "text"],
"lastName": ["Mouse", "text"]
}]
And here is my views file for the front-end
<div class="input">
<input type="text" placeholder="Søg" ng-model="query.$">
<i class="icon"></i>
</div>
<div class="item" ng-repeat="child in children | filter:query">
<img class="image" src="images/children/1.jpg">
<div class="content" >
<div class="header">
<a>
{{ child.firstName[0] }} {{ child.lastName[0] }}
</a>
</div>
</div>
</div>
And my controllers.js file
angular.module('ContactsApp')
.controller('ListController', function ($scope, Contact) {
$scope.children = Contact.query();
$scope.fields = ['firstName', 'lastName'];
$scope.firstname = ['firstName'];
$scope.lastname = ['lastName'];
$scope.phone = ['phone'];
});
And finally my factories file
angular.module('ContactsApp')
.factory('Contact', function ($resource) {
return $resource('/api/child/:id', { id: '#id' }, {
'update': { method: 'PUT' }
});
});
It looks like filters don't work well with searching within arrays. You might need to change your data structure.
Here's a Plunker:
http://plnkr.co/edit/pC0W6YwhTB9l0CUaZWy0?p=preview
Instead of using
{{child.firstName[0]}}
I used
{{child.firstName}}
with the appropriate changes in the data.