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>
Related
I have the following JSON object:
$scope.projects = [
{
"_id": "58ab1cb6edf5430e9014e2bc",
"name": "Project 1",
"issues": [
{
"status": 0,
"name": "Hart Cummings"
},
{
"status": 1,
"name": "Kinney Leach"
},
{
"status": 2,
"name": "Blake Mclaughlin"
}
]
},
{
"_id": "58ab1cb6d87456482e0eec4a",
"name": "Project 2",
"issues": [
{
"status": 0,
"name": "Vargas Gordon"
},
{
"status": 1,
"name": "Bobbie Church"
},
{
"status": 2,
"name": "Pennington Fry"
}
]
},
{
"_id": "58ab1cb6d87456482e0eec4a",
"name": "Project 3",
"issues": [
{
"status": 0,
"name": "WWWWW"
},
{
"status": 1,
"name": "SFSF"
},
{
"status": 2,
"name": "Pennington Fry"
}
]
}
];
I use ng-repeat to display this object in template:
<div ng-app="app">
<div ng-controller="TodoListController">
<div ng-repeat="project in projects">
<br>
<br>
<div><b> {{project.name}}</b></div>
<div class="tabs">
<div style="display:inline" ng-click="sort(1, $index);">Active</div> |
<div style="display:inline" ng-click="sort(0, $index);">Deactivated</div>
</div>
_____________________________________
<div ng-repeat="issue in project.issues | filter: (filterObject.index | filterObject.status)">
<div>{{issue.name}}</div>
</div>
</div>
</div>
</div>
So, as you can see I have two nested ng-repeat.
Issue is:
When I click on any tab and call method sort() I need to sort issue in project.issues by status field.
This is real sample that I want to reach.
https://jsfiddle.net/at6kw67g/
Problem is in this code:
<div ng-repeat="issue in project.issues | filter:filterObject.index : {status : filterObject.status}">
Since the links should sort the issues of a specific project, you should pass the project as argument to your sort() function.
And JavaScript arrays have a sort() method, so just use it.
Since one link should sort issues in ascanding order, and the other one in descending order, you should also pass this information to your sort() function.
So it boils down to
$scope.sortIssuesByStatus = function(project, descending) {
project.issues.sort(function(issue1, issue2) {
var result = issue1.status - issue2.status;
if (descending) {
result = -result;
}
return result;
});
}
and
<div ng-repeat="project in projects">
<div class="tabs">
<button ng-click="sortIssuesByStatus(project, true)">Active</button>
<button ng-click="sortIssuesByStatus(project, false)">Deactivated</button>
</div>
<div ng-repeat="issue in project.issues">
<div>{{issue.name}} - {{ issue.status }}</div>
</div>
</div>
Here's a plunkr implementing it.
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;
}
});
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>
Trying to create a dynamic svg icon generator to flesh out a grid of 5 days * 4 time periods per day with a built-on-the-fly svg.
Expected: 20 repeats
Result: 120 repeats, which has 20 svgs that repeat the contents 5 times
Why? No idea.
somecontroller.js:
var counter = 0;
$scope.iconGenerator = function ( i, parenti, tod ) {
counter++;
// console.log(counter);
//append svg contents
}`
index.html
<div class = "row">
<div class = "forecast-day col-md-fifth" ng-repeat = 'day in forecastData'>
<div class = "forecast-group" ng-repeat = "dayDetails in day.conditions">
<svg id = "{{myID($index, $parent.$index)}}"
ng-bind = "iconGenerator($index,$parent.$index, dayDetails)">
</svg>
</div>
</div>
</div>
data.json:
[
{
"ID" : 0,
"conditions": [
{
"key": "value"
},
{
"key": "value"
},
{
"key": "value"
},
{
"key": "value"
}
]
}
//array contains total: 5 objects like above
]
Edit:
I get it now. You are incrementing the value of a variable in the function you call in the ng-bind directive. This is never a good idea. I think that ng-bind must always refer to a variable or a 'getter' function that does not modify the state of the application.
To understand what I am trying to suggest, look again at the plunk http://plnkr.co/edit/eMams7nTe5qcxw2jC39i?p=preview. I added an input box with an ng-modelof x. Try modifying the input. Every time you change the input, angularjs has to reload the data in the entire document to check if anything changed. To do this, it must call the function iconGenerator repeatedly. In your case this function increments a value - and as a result the value increases every time you make a change.
You cannot rely on angular calling the iconGenerator function only once. So you need to change the code keeping that in consideration.
I tried to recreate your code here : http://plnkr.co/edit/eMams7nTe5qcxw2jC39i?p=preview and it seems to work fine. I think the problem is somewhere else (aside from the code you posted).
<head>
<script data-require="angular.js#1.3.0" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script>
angular.module('app', [])
.controller('mainCtrl', function($scope) {
$scope.forecastData = [{
"ID": 0,
"conditions": [{
"key": "value"
}, {
"key": "value"
}, {
"key": "value"
}, {
"key": "value"
}]
}, {
"ID": 1,
"conditions": [{
"key": "value"
}, {
"key": "value"
}, {
"key": "value"
}, {
"key": "value"
}]
}, {
"ID": 2,
"conditions": [{
"key": "value"
}, {
"key": "value"
}, {
"key": "value"
}, {
"key": "value"
}]
}, {
"ID": 3,
"conditions": [{
"key": "value"
}, {
"key": "value"
}, {
"key": "value"
}, {
"key": "value"
}]
}, {
"ID": 4,
"conditions": [{
"key": "value"
}, {
"key": "value"
}, {
"key": "value"
}, {
"key": "value"
}]
}
];
var counter = 0;
$scope.iconGenerator = function(i, parenti, tod) {
counter++;
//append svg contents
};
});
</script>
</head>
<body ng-app="app">
<div ng-controller="mainCtrl">
<div ng-repeat="day in forecastData">
<div ng-repeat="dayDetails in day.conditions">
<svg id="{{myID($index, $parent.$index)}}" ng-bind="iconGenerator($index,$parent.$index, dayDetails)">
</svg>
{{$parent.$index}}-{{$index}}
</div>
</div>
</div>
</body>
</html>
i am trying to do orderBy using dropdown value, but its not working :(
CODE:
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.datas = [{
"id": "1",
"name": "name area 1"
}, {
"id": "2",
"name": "name area 2"
}, {
"id": "3",
"name": "name area 3"
}, {
"id": "4",
"name": "name area 4"
}];
$scope.dropdown = [{
"title": "Newest first",
"value": "true"
}, {
"title": "Oldest first",
"value": "reverse"
}];
});
HTML:
<div ng-app="myApp">
<div ng-controller="myCtrl">
<ul ng-repeat="rows in datas | orderBy: 'id':orderByData">
<li>{{rows.id}} : {{rows.name}}</li>
</ul>
<select ng-model="orderByData" ng-options="x.value as x.title for x in dropdown"></select>
</div>
</div>
DEOM JS BIN
Why you use reverse?
Please use false instead reverse and it should work fine.
$scope.dropdown = [{
"title": "Newest first",
"value": "true"
}, {
"title": "Oldest first",
"value": "false"
}];
You don't need reverse parameter here. Instead you can do something like this:
<ul ng-repeat="rows in datas | orderBy: getSort()">
<li>{{rows.id}} : {{rows.name}}</li>
</ul>
Where getSort is defined as:
$scope.getSort = function() {
return $scope.orderByData ? 'id' : '-id';
};
Basically you want sort part to look like orderBy: 'id' or orderBy: '-id'.
Demo: http://jsbin.com/pepureta/1/edit?html,js,output